更新记录

1.0.0(2024-03-12) 下载此版本

版本发布


平台兼容性

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

插件介绍

1.支持v-model双向绑定

2.支持vue2 vue3

3.支持单选多选禁用

4.支持每行个数间距颜色主题配置

5.角标

6.更多用法查看配置项

扫码查看组件示例

文档地址

文档地址

请下载使用 ex-ui

请下载使用 ex-ui

属性

属性名 类型 默认值 可选值 说明
list Array 二维数组,格式见下方示例
scrollViewHeight String 80vh 区域高度
showIndex Boolean true 是否显示侧边索引
indexStyle Object {top: '60px',right: '12px'} 右侧索引栏相对定位位置
indexItemActiveStyle Object {'color':'#409eff' } 索引项每一项选中样式
indexItemUnActiveStyle Object {} 索引项每一项未选中样式
props Object {label:'label',subListKey:'list', childProps:{label:'label',value:'value' }} 配置项
multiple Boolean false true,false 按钮是否多选
maxNum Number Infinity 最大选中数量, 仅多选有效
maxNumToast String 超出最大选中数量 超出最大选中数量的提示信息
cancelSelectItem Boolean true true,false 选中的选项再次点击能否取消选中,默认 true
disabledArr Array [] 禁用选项
lineNumber Number 3 每行按钮个数
gap String 12px 按钮间距
selectedStyle Object {background: '#409eff',color: '#FFFFFF',borderColor: '#409eff'} 自定义按钮选中样式
unSelectedStyle Object {background: '#F5F5F5', color: '#4D4D4D',borderColor: '#F5F5F5'} 自定义按钮未选中样式
disabledStyle Object {background: '#e9e9eb',color: '#bcbec2',borderColor: '#e9e9eb'} 按钮禁用的样式
showBadge Boolean false 是否显示选中角标
badgePosition String top top,bottom 选中角标的位置
badgeSize String 16px 角标的大小
badgeColor String #cdcdcd 角标默认颜色
badgeSelectedColor String #409eff 角标选中颜色
badgeDisabledColor String #bcbec2 角标禁用颜色

props 配置项

{
    label: 'label', // 分组的标签key
    indexKey: 'label', // 右侧索引项对应的key
    anchorKey: '$uniqueKey', // 锚点key 锚点对应的id(数字字母格式,需要以字母开头)
    subListKey: 'list', // 子列表对应的key
    childProps: {
        label: 'label',
        value: 'value'
    }
}

list 配置项

属性名 类型 默认值 可选值 说明
label String,Number 分组 key
list Array 子分组数组

list 数据格式

const list = [
  {
    label: "A",
    list: [
      {
        label: "阿坝",
        value: "00",
      },
      {
        label: "阿克苏",
        value: "01",
      },
    ],
  },
  {
    label: "B",
    list: [
      {
        label: "北京",
        value: "10",
      },
      {
        label: "白城",
        value: "11",
      },
      {
        label: "百色",
        value: "12",
      },
      {
        label: "白山",
        value: "13",
      },
    ],
  },
];

事件

事件名 说明
itemClick 选项点击事件

隐私、权限声明

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

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

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

许可协议

MIT协议

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