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]

}

}

相关推荐
咔咔咔索菲斯9 分钟前
Vue 中mounted 生命周期钩子的执行时机和 v-for 的渲染顺序
前端·javascript·vue.js
前端小咸鱼一条10 分钟前
Vue响应式原理一:认识响应式逻辑
前端·javascript·vue.js
程序员秘密基地10 分钟前
基于html,css,vue,vscode,java,springboot,mysql数据库,在线考勤,管理系统
java·vue.js·spring·html·web app
paopaokaka_luck36 分钟前
基于Spring Boot+Vue的巴彦淖尔旅游网站(AI问答、腾讯地图API、WebSocket及时通讯、支付宝沙盒支付)
数据库·vue.js·spring boot·websocket·mysql·毕业设计·旅游
初心w50t241 分钟前
Vue 前端开发性能优化攻略
前端·javascript·vue.js
{⌐■_■}42 分钟前
【软件工程】tob和toc含义理解
前端·数据库·mysql·golang·软件工程·tidb
码农捻旧1 小时前
前端性能优化:从之理论到实践的破局道
前端·性能优化
3Katrina1 小时前
前端面试之防抖节流(一)
前端·javascript·面试
kk_stoper1 小时前
使用Ruby接入实时行情API教程
java·开发语言·javascript·数据结构·后端·python·ruby
浏览器API调用工程师_Taylor2 小时前
自动化重复任务:从手动操作到效率飞跃
前端·javascript·爬虫