更新记录

v1.0(2024-08-08) 下载此版本

仅适用于vue3,看插件市场没有真的用于vue3的多选下拉插件,特意开发了一个

select

组件作用

用于单选 多选下拉列表

组件接收属性

/**
 * @description 组件的属性描述
 * @property {Boolean} showSearch - 是否显示搜索框
 * @property {[Number, String, Array, Object]} modelValue - 绑定的值,可以是数字、字符串、数组或对象
 * @property {String} placeholder - 搜索框的提示文字
 * @property {Boolean} multiple - 是否允许多选
 * @property {Array} list - 下拉列表的数据源
 * @property {String} valueKey - 列表中值的键名
 * @property {String} labelKey - 列表中标签的键名
 * @property {Boolean} disabled - 是否禁用组件
 * @property {Boolean} clearable - 是否显示清空按钮
 * @property {String} emptyText - 下拉列表无数据时的提示文字
 * @property {String} title - 下拉列表的标题
 * @property {String} confirmText - 确认选择的文本
 * @property {String} color - 组件的颜色
 * @property {String} selectColor - 被选中的颜色
 * @property {String} bgColor - 组件背景颜色
 * @property {String} selectBgColor - 被选中时的背景颜色
 * @property {String} valueType - 值的类型,例如 'number' 或 'string'

 */

组件对外方法

@change

组件使用方法

<cs-select :multiple="true" :list="tags" label-key="label" value-key="value" placeholder="请选择"
    title="选择" clearable v-model="model.tag" @change="selectChange" showSearch></cs-select>

平台兼容性

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

select

组件作用

用于单选 多选下拉列表

组件接收属性

/**
 * @description 组件的属性描述
 * @property {Boolean} showSearch - 是否显示搜索框
 * @property {[Number, String, Array, Object]} modelValue - 绑定的值,可以是数字、字符串、数组或对象
 * @property {String} placeholder - 搜索框的提示文字
 * @property {Boolean} multiple - 是否允许多选
 * @property {Array} list - 下拉列表的数据源
 * @property {String} valueKey - 列表中值的键名
 * @property {String} labelKey - 列表中标签的键名
 * @property {Boolean} disabled - 是否禁用组件
 * @property {Boolean} clearable - 是否显示清空按钮
 * @property {String} emptyText - 下拉列表无数据时的提示文字
 * @property {String} title - 下拉列表的标题
 * @property {String} confirmText - 确认选择的文本
 * @property {String} color - 组件的颜色
 * @property {String} selectColor - 被选中的颜色
 * @property {String} bgColor - 组件背景颜色
 * @property {String} selectBgColor - 被选中时的背景颜色
 * @property {String} valueType - 值的类型,例如 'number' 或 'string'

 */

数据格式 可选

tags: [{
    label: '跑步',
    value: 0
}, {
    label: '游泳',
    value: 1
}, {
    label: '绘画',
    value: 2
}, {
    label: '足球',
    value: 3
}, {
    label: '篮球',
    value: 4
}, {
    label: '其他',
    value: 5
}],

组件对外方法

@change

组件使用方法

<cs-select :multiple="true" :list="tags" label-key="label" value-key="value" placeholder="请选择"
    title="选择" clearable v-model="model.tag" @change="selectChange" showSearch></cs-select>

隐私、权限声明

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

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

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

许可协议

MIT协议

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