vant(一)基于picker单选组件自定义picker多选组件~

简介: vant(一)基于picker单选组件自定义picker多选组件~

手机端网页使用的是vant组件库。


有需求需要使用多选的picker组件,但是vant组件库中只有单选的picker组件。


嗯,可能我们需要基于vant的单选picker组件和checkbox组件来自定义一个多选的picker组件。


代码版本:vue3.2+vant4.0.10


Vue组件代码:


<van-field
      v-model="position_main_name"
      readonly
      name="position_main_name"
      label="学生列表"
      placeholder="点击选择学生,可多选!"
      required
      @click="showStudentSelectPicker = true"
      :rules="[
        {
          required: true,
          message: '请选择学生!',
        },
      ]"
    />
  <van-popup
    round
    v-model:show="showStudentSelectPicker"
    position="bottom"
    :style="{ height: '50%' }"
  >
    <van-picker
      :columns="studentList"
      value-key="name"
      item-height="56px"
      @confirm="onConfirm"
      @cancel="showStudentSelectPicker = false"
    >
      <template #option="option">
        <div style="width: 100%">
          <van-checkbox-group
            v-model="studentGroupChecked"
            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>

 


组件js代码:


// 学生列表
export const studentList = ref(Array(<any>[{name: "潇寒-1"}, {name: "宋俊铭-123456"}]));
// 选择下拉列表弹窗标识
export const showStudentSelectPicker = ref(<boolean>false);
// 学生下拉列表框显示
export const position_main_name = ref(<any>'');
// 学生选中值
export const studentGroupChecked = ref(Array(<any>[]));
/**
 * @name: 选择学生下拉列表点击确定
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2023-01-18 22:47:46
 */
export const onConfirm = () => {
    let array = <any>[];
    studentGroupChecked.value.forEach(function (item:any) {
        if(item != '')
        {
            array.push(item);
        }
    });
    studentGroupChecked.value = array;
    position_main_name.value = studentGroupChecked.value;
    showStudentSelectPicker.value = false;
};

上边的组件代码的基本使用。复制应该就能好用。


最终效果:

image.png



有好的建议,请在下方输入你的评论。


目录
相关文章
uniapp如何安装vant
uniapp如何安装vant
973 1
|
小程序 搜索推荐
uniapp中如何使用image图片
uniapp中如何使用image图片
2316 0
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
9162 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
开发工具 git
Stylelint—— Expected class selector ".nut-popup--top" to be kebab-case selector-class-pattern
新项目制定规范接入了stylelint,并通过husky在git提交时去触发检测修复,因为使用的是NutUi,所以无法直接调整组件对应的类名称,只好在stylelint.config.js中加入相应的rules进行配置。
307 0
|
JavaScript 小程序
【经验分享】 自定义picker组件,拿走即用。
【经验分享】 自定义picker组件,拿走即用。
504 6
|
移动开发 资源调度 JavaScript
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
这篇文章介绍了在Vue移动端网页中使用`pdfh5`和`vue-pdf`两个插件来实现PDF文件的预览,包括滚动查看、缩放、添加水印、分页加载、跳转指定页数等功能。
8211 1
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
|
12月前
|
JavaScript
vue3,使用watch监听props中的数据
【10月更文挑战第3天】
3609 2
|
12月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
274 4
使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据,下拉刷新当前列表数据(等同于翻页功能)
使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据,下拉刷新当前列表数据(等同于翻页功能)
|
移动开发 前端开发 UED
深入理解Rem适配:移动端网页设计的利器
深入理解Rem适配:移动端网页设计的利器