vue3+vant3 实现选择器多选功能
vue3+vant3 实现选择器多选功能
·
效果
因为vant3的选择器模块没有多选功能,所以要根据自己的需求去更改代码,以下是实现的代码
代码
<template>
<van-field
v-model="position_main_name"
is-link
readonly
name="position_main_name"
required
label="职位关键词"
placeholder="点击选择职位关键词"
@click="showPicker4 = true"
:rules="[
{
required: true,
message: '请选择职位关键词',
},
]"
/>
<van-popup
round
v-model:show="showPicker4"
position="bottom"
:style="{ height: '50%' }"
>
<van-picker
show-toolbar
:columns="columns4"
value-key="name"
item-height="56px"
@confirm="onConfirm4"
@cancel="showPicker4 = false"
>
<template #option="option">
<div style="width: 100%">
<van-checkbox-group
v-model="groupChecked"
style="display: inline-block; margin-left: 130px"
>
<van-checkbox :name="option.name" shape="square">{{
option.name
}}</van-checkbox>
</van-checkbox-group>
</div>
</template>
</van-picker>
</van-popup>
</template>
<script>
export default {
const state = reactive({
groupChecked: [],
columns4: [],
customFieldNames4: {},
position_main_name: '',//职位关键词
})
//获取关键词,调接口
const getKey = () => {
let params = {
//传参
}
//写接口
}
// 关键词
const onConfirm4 = () => {
state.position_main_name = state.groupChecked;
state.showPicker4 = false;
};
// 关键词名字
const customFieldName4 = {
text: 'name'
};
return {
...toRefs(state),
customFieldName4,
onConfirm4,
}
}
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)