鉴于第三方封装的checkbox组件样式修改比较麻烦,本人封装了一个纯净的checkbox组件,样式可以自定义,有用的上的就拿去吧!各路好汉来了就留个评论呗!
功能优化,可选方向水平和垂直,可加全选功能,可加最大可选项数控制
已发布npm包wcheckbox,使用
npm install wcheckbox // yarn add wcheckbox
import checklist from 'wcheckbox' 即可使用
在线预览地址:https://wenyuming.github.io/w-demos/dist/index.html#/checkbox
gitHub地址:https://github.com/wenyuming/vue-checkbox
对你有帮助的话就帮我扫一下支付宝红包呗,不要的扫给我也可以,谢谢了各位,有啥需要可以在下方留言,多金大佬也可以打赏些小费。
用法
在你需要使用的地方import这个组件
<check-list :options="printer.operate" v-model="printer.selected" @change="select" style="margin-top:-10px;"></check-list>
printer: {
name: '',
operate: [
{label:'下单打印',id: 1,},
{label:'付款打印', id:2},
{label:'确认收货打印',id: 3}
],
selected: [1,3]
}
效果
垂直方向
<check-list :options="printer.operate" direction="vertical" v-model="printer.selected" @change="select" style="margin-top:-10px;"></check-list>
效果
哪位大神知道怎么去图片上csdn的水印么?知道的评论一下, 谢了。
属性 | 类型 | 描述 |
options | array | 必填 |
label | string | 默认为label,值不为label时,则必填 |
v-moel | array | 必填,默认所选中项(选中项对应的索引数组) |
direction | string | 非必填,默认horizontal(水平方向),可选值vertical(垂直方向) |
relkey | string | 索引值,默认为id,若索引不为id,则必填 |
encheckall | boolean | 非必填,默认为false,值为true时开启 |
max | number | 最大可选项数,非必填,默认为options数组长度,值为小于等于options数组长度的的数值 |
事件 | 参数 |
change | data, data.val为所选项索引数组,data.current为当前所点击项的数据 |
## 注意事项
1.全选功能不能与最大可选项数控制功能同时开启
2.开启全选功能时,点击全选那一项时,父组件@change事件回调参数将不包括data.current一项,需进行特殊处理以防止页面报错
3.开启最大可选项数控制时,达到最大可选数量时,点击其他未选项将不再触发父组件@change事件,如需触发请自行优化
### 更新
#### 新增是否开启全选功能,属性为encheckall,值为true时开启,非必填,默认为false
#### 新增最大可选项数控制,属性为max值为小于等于options数组长度的的数值,非必填,默认为options数组长度
#### 废弃selected属性,采用v-model实现数据双向绑定
## 后续优化增加最大可选数量,勾号颜色,以及背景色