vue3 ts项目结合vant4 复选框+气泡弹框实现一个类似Select样式的下拉选择功能
由于最近写项目接触到了移动端，需要实现一个类似于select下拉组件，如下图：
本来想使用vant现有组件直接使用，但是只找到了下拉菜单那种的组件，不满足这个项目的需求，于是我就自己将vant 气泡弹框结合复选框，实现了一个类似element Plus里select下拉选择的组件。
1.可多选的下拉组件
1.结构代码：
2.样式代码：
3.逻辑代码
const pathWarningBack = computed(() => return route?.path?.includes('/tabs/phm/warning') || false)
const warnLevelList = ref(['一般', '中等', '严重'])
const selectForm = ref({ level: [warnLevelList.value[0]] })
// 下拉选择
const levelPopover = ref(false)
// 复选框 全选状态
const isLevelCheckAll = ref(true)
// 全选不确定状态
const isLevelIndet = ref(true)
// 默认选中下拉列表的第一项
const levelAll = ref<string[]>([warnLevelList.value[0]])
// 支持全选
function checkAllChange(val: boolean, params: string) {
if (params === '等级') {
levelAll.value = val ? warnLevelList.value : [warnLevelList.value[0]]
isLevelIndet.value = false
}
}
// 多选选中
function checkedResultChange(value: string[], params: string) {
const checkedCount = value.length
if (params === '等级') {
selectForm.value.level = value
isLevelCheckAll.value = checkedCount === warnLevelList.value.length
isLevelIndet.value = checkedCount > 0 && checkedCount < warnLevelList.value.length
}
}
2.可单选的下拉选择组件
1.结构代码：
2.样式代码：
3.逻辑代码
// 下拉选择
const namePopover = ref(false)
const warnNameList = ref([modelSystem(GetPrecent(1000, 1500), '模型名称'), modelSystem(GetPrecent(1500, 2000), '模型名称')])
const selectForm = ref({ name: [warnNameList.value[0]] })
// 单选状态
const checkedWN = ref(warnNameList.value[0])
// 单选选中
function radioChecked(value: string, params: string) {
if (params === '名称') {
selectForm.value.name = [value]
}
}
原文地址：https://blog.csdn.net/m0_65292523/article/details/143718920
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！