更新记录

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>

平台兼容性

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>