<template>
<view>
<uv-drop-down ref="dropDown" sign="dropDown_1" text-active-color="#3c9cff"
:extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}"
:extra-active-icon="{name:'arrow-up-fill',color:'#3c9cff',size:'26rpx'}"
:defaultValue="defaultValue" :custom-style="{padding: '0 30rpx'}" @click="selectMenu">
<uv-drop-down-item name="order" type="2" :label="dropdownMenuData.order.label" :value="dropdownMenuData.order.value">
</uv-drop-down-item>
<uv-drop-down-item name="type" type="2" :label="dropdownMenuData.type.label" :value="dropdownMenuData.type.value">
</uv-drop-down-item>
</uv-drop-down>
<uv-drop-down-popup sign="dropDown_1" :click-overlay-on-close="true"
:currentDropItem="currentDropItem" @clickItem="clickItem"></uv-drop-down-popup>
</view>
</template>
<script setup lang="ts">
const activeName = ref('order')
// 表示value等于这些值,就属于默认值
const defaultValue = [0, 'all', '0']
const dropdownMenuData = reactive({
order: {
label: '综合排序',
value: 'all',
activeIndex: 0,
color: '#333',
activeColor: '#2878ff',
child: [{
label: '综合排序',
value: 'all'
}, {
label: '最新发布',
value: 'new'
}, {
label: '低价优先',
value: 'money'
}]
},
type: {
label: '文档格式',
value: 'all',
activeIndex: 0,
color: '#333',
activeColor: '#2878ff',
child: [{
label: '全部',
value: 'all'
}, {
label: 'PDF',
value: 'pdf'
}, {
label: 'WROD',
value: 'word'
}, {
label: 'PPT',
value: 'ppt'
}]
}
})
// 获取当前下拉筛选项
const currentDropItem = computed(() => {
// @ts-ignore
return dropdownMenuData[activeName.value];
})
/**
* 点击每个筛选项回调
* @param {Object} e { name, active, type } = e
*/
function selectMenu(e) {
const { name } = e;
activeName.value = name;
}
/**
* 点击菜单回调处理
* @param {Object} e 选中项 { label,value } = e
*/
function clickItem(e) {
// 下面有重新赋值,所以用let
const { label, value } = e;
console.log(value);
if (defaultValue.indexOf(value) == -1) {
// 不是默认值 替换label
// @ts-ignore
dropdownMenuData[activeName.value].label = label
// @ts-ignore
dropdownMenuData[activeName.value].value = value
}else{
// @ts-ignore
dropdownMenuData[activeName.value].label = activeName.value == 'order' ? '综合排序' : '文档格式'
// @ts-ignore
dropdownMenuData[activeName.value].value = 'all'
}
// TODO 接口获取数据逻辑
}
</script>