🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
### HChecklist 组件 介绍: `HChecklist` 就是复选框组件,在网页中用的多的是 `direction` 为 `row` 的复选框,不过原生的复选框太丑了,所以将此使用率较高的组件封装起来以供以后使用。 <table> <caption>HChecklist 属性</caption> <thead> <th>属性</th> <th>说明</th> <th>类型</th> <th>默认值</th> </thead> <tbody> <tr> <td>value</td> <td>选中的值,用 v-model 绑定</td> <td>Array</td> <td>[]</td> </tr> <tr> <td>items</td> <td>指定每个复选框所需要的数据,其中最基本的属性是 title 和 value</td> <td>Array</td> <td>[]</td> </tr> <tr> <td>right</td> <td>复选框在 title 左侧还是右侧(一个复选框组件的行首或行末), true 表示在右侧,反之则表示在左侧</td> <td>Boolean</td> <td>false</td> </tr> <tr> <td>size</td> <td>决定复选框的尺寸大小,选中时的图标也会随这个属性而改变</td> <td>String | Number</td> <td>24</td> </tr> <tr> <td>color</td> <td>复选框边框的和选中时图标的颜色</td> <td>String</td> <td>#333</td> </tr> <tr> <td>type</td> <td>复选框的形状,rect 代表矩形,circle 代表圆形</td> <td>String</td> <td>rect</td> </tr> <tr> <td>direction</td> <td>复选框的排列方向,column 说明各复选框项纵向排列,row 说明各复选框项横向排列</td> <td>String</td> <td>column</td> </tr> <tr> <td>hrcolor</td> <td>当复选框纵向排列时,你可能需要分隔线来分隔开不同的项, 此属性用于设置分隔线的颜色</td> <td>String</td> <td>transparent</td> </tr> </tbody> </table> <table> <caption>items 属性</caption> <thead> <th>属性</th> <th>说明</th> <th>类型</th> <th>默认值</th> </thead> <tbody> <tr> <td>title</td> <td>说明性文字,可以设置也可以不设置</td> <td>String</td> <td>-</td> </tr> <tr> <td>value</td> <td>所代表的值</td> <td>String</td> <td>-</td> </tr> </tbody> </table> 示例代码: <template> <div class="container"> <div class="checklist"> <HChecklist :items="items" :right="!right" :hrcolor="hrcolor" :type="type" v-model="value" @onClick="clickHandler" :color="color"></HChecklist> </div> <div class="checklist"> <HChecklist :items="items" :right="right" :hrcolor="hrcolor" v-model="value" @onClick="clickHandler" :color="color"></HChecklist> </div> <div class="checklist"> <HChecklist :items="items" :right="right" v-model="value" :type="type" direction="row" @onClick="clickHandler" :color="color"></HChecklist> </div> <div class="checklist"> <HChecklist :items="items" :right="right" v-model="value" direction="row" @onClick="clickHandler" :color="color"></HChecklist> </div> </div> </template> <script> import HChecklist from 'vuecomponent' export default { components: { HChecklist }, data () { return { items: [ { title: 'CSS3', value: 'item1' }, { title: 'ES6', value: 'item2' }, { title: 'Node', value: 'item3' } ], right: false, value: [ 'item1' ], color: '#46466E', type: 'circle', hrcolor: '#ccc' } }, methods: { clickHandler () { console.log(this.value) } } } </script> <style scoped> .container { display: flex; flex-flow: row wrap; } .checklist { width: 480px; margin: 24px auto; } </style> 效果示例图: ![](http://ownp5gqo8.bkt.clouddn.com/h-checklist-basic.jpg)