mteacher/src/views/audition/modal/accompanimentModal.vue

<template>
    <div class="accompanimentModal">
        <van-dropdown-menu class="cateDropDown">
            <van-dropdown-item v-model="value1" :options="option1" />
            <van-dropdown-item v-model="value2" :options="option2" />
        </van-dropdown-menu>
        <van-search
            v-model="search"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            >
            <template #label>
                <van-dropdown-menu class="headDropDown">
                    <van-dropdown-item v-model="value1" :options="option1" />
                </van-dropdown-menu>
            </template>
            <template #action>
                <div @click="onSearch">搜索</div>
            </template>
        </van-search>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value1: 0,
            value2: 'a',
            option1: [
                { text: '全部商品', value: 0 },
                { text: '新款商品', value: 1 },
                { text: '活动商品', value: 2 },
            ],
            option2: [
                { text: '默认排序', value: 'a' },
                { text: '好评排序', value: 'b' },
                { text: '销量排序', value: 'c' },
            ],
            search: null,
        }
    },
    methods: {
        onSearch() {

        }
    }
}
</script>

<style lang="less" scoped>
.accompanimentModal {
    /deep/.van-cell {
        font-size: 0.14rem;
        padding: 0.05rem 0.08rem;
        line-height: 0.24rem;
    }

    .headDropDown {
        height: .36rem;
        background: transparent;
        .van-dropdown-menu {
        }
    }
}
</style>