更新记录

1.0.6（2024-09-25） 下载此版本

支持vue3

1.0.5（2024-09-25） 下载此版本

支持vue3

1.0.4（2024-09-25） 下载此版本

支持vue3

查看更多

平台兼容性

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

插件介绍

1.支持v-model双向绑定

2.支持vue2 vue3

3.支持单选多选禁用

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

5.角标(仅ex-ui)

6.更多用法查看配置项

扫码查看组件示例

文档地址

文档地址

推荐下载使用 ex-ui

推荐下载使用 ex-ui

属性名 类型 默认值 可选值 说明
list Array 按钮选项数组
props Object { 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 是否显示选中角标(仅ex-ui支持)
badgePosition String top top,bottom 选中角标的位置 (仅ex-ui支持)
badgeSize String 16px 角标的大小 (仅ex-ui支持)
badgeColor String #cdcdcd 角标默认颜色 (仅ex-ui支持)
badgeSelectedColor String #409eff 角标选中颜色 (仅ex-ui支持)
badgeDisabledColor String #bcbec2 角标禁用颜色 (仅ex-ui支持)

list 配置项

属性名 类型 默认值 可选值 说明
label String,Number 显示的字段 ke
value 绑定的 key
disabled Boolean false 是否禁用选项 true 禁用

事件

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

隐私、权限声明

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

无

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

无

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

是

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

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

加载更多...