更新记录

1.0.1(2024-11-11) 下载此版本

修复层级问题; 在 Vue 2 中,直接通过 this.selectValue[this.currentActiveItem] = [] 的方式向对象中添加数组时,Vue 无法检测到该属性的变化问题

1.0.0(2024-11-11) 下载此版本

组件初始化


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
×

ydl-col-picker

简介

ydl-col-picker 是一个基于 UniApp 的列选择器组件,支持单选多选及搜索功能。它可以用于各种 UniApp 项目中,提供灵活的列选择和过滤功能。

使用方法

template 中使用

<template>
  <view class="content">
    <button type="default" @click="openPicker()">打开col-picker组件</button>
    <ydl-col-picker
      ref="colPicker"
      :range="dataList"
      :checkValue="checkValue"
      :multiple="true"
      rangeKey="name"
      @confirm="confirmPicker"
    ></ydl-col-picker>
  </view>
</template>

script

<script>
export default {
  data() {
    return {
      dataList: [
        {
          id: 1,
          name: "前端",
          children: [
            {
              id: 11,
              name: "Vue",
            },
            {
              id: 12,
              name: "React",
            },
          ],
        },
        {
          id: 2,
          name: "后端",
          children: [
            {
              id: 21,
              name: "Node",
            },
            {
              id: 22,
              name: "PHP",
            },
          ],
        }
      ],
      checkValue: {
        1: [12],
        3: [31, 33],
      },
    };
  },
  onLoad(options) {},
  methods: {
    openPicker() {
      this.$refs.colPicker.open();
    },
    confirmPicker(e) {
      console.log(e);
    },
  },
};
</script>

属性

属性名 类型 默认值 描述
range Array [] 列数据。
checkValue Object {} 默认选中值。
idKey String "id" 指定 Object 中 key 的值作为单条数据的唯一id。
rangeKey String "label" 指定 Object 中 key 的值作为选择器显示的内容。
multiple Boolean false 是否多选。
closeOnClickMask Boolean true 是否允许点击蒙层关闭选择器。
title String "标题" 选择器的标题。
cancelBtn Object { text: "取消", color: "#666666", fontSize: "32rpx" } 取消按钮自定义。
confirmBtn Object { text: "确定", color: "#557FF7", fontSize: "32rpx" } 确定按钮自定义。
showSearch Boolean true 是否开启搜索。
searchPlaceholder String "请输入搜索内容" 搜索框的占位文本。

方法

方法名 参数 描述
open - 打开选择器。
close - 关闭选择器。
reset - 重置选择器状态。
init - 初始化选择器状态。

事件

事件名 参数 描述
confirm value: Object 当用户点击确定按钮时触发,返回选中的值。返回值是一个对象,其中键是父级项的 id,值是一个数组,包含选中的子项的 id。例如:{ 1: [12], 3: [31, 33] }

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问