vue3 ts项目结合vant4 复选框+气泡弹框实现一个类似Select样式的下拉选择功能

前端小超超2024-11-14 9:59

由于最近写项目接触到了移动端，需要实现一个类似于select下拉组件，如下图：

本来想使用vant现有组件直接使用，但是只找到了下拉菜单那种的组件，不满足这个项目的需求，于是我就自己将vant 气泡弹框结合复选框，实现了一个类似element Plus里select下拉选择的组件。

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

}

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 === '名称') {

}