ThinkSSL🔒 一键申购 5分钟快速签发 30天无理由退款 购买更放心 广告
### HChecker 组件 介绍:`HChecker` 组件和多选框很像,不同的是,`HChecker` 可以指定选中的个数,而且其样式经常应用在购物网站中,比如在购买手机时,选择手机内存容量,颜色等时使用的就是 `HChecker` 组件。 <table> <caption>HChecker 属性</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>max</td> <td>指定最多能选中多少个标签</td> <td>Number</td> <td>1</td> </tr> <tr> <td>gutter</td> <td>每个选项标签之间的距离,内部实现使用的是 margin-right 属性</td> <td>String | Number</td> <td>0</td> </tr> <tr> <td>defaultBorderColor</td> <td>未选中时,选项标签的边框颜色</td> <td>String</td> <td>#ccc</td> </tr> <tr> <td>checkedBorderColor</td> <td>选中时,选项标签的边框颜色</td> <td>String</td> <td>#12CC94</td> </tr> <tr> <td>bgcolor</td> <td>选项标签的背景颜色</td> <td>String</td> <td>#FFF</td> </tr> <tr> <td>color</td> <td>选项标签的字体颜色</td> <td>String</td> <td>#333</td> </tr> <tr> <td>customStyle</td> <td>如果你觉得通过以上样式属性还不能满足需求,那么你可以定制你自己的样式</td> <td>Object</td> <td>{}</td> </tr> <tr> <td>checkerItems</td> <td>用于指定每个选项标签的基本信息,具体属性看下表</td> <td>Array</td> <td>[]</td> </tr> </tbody> </table> <table> <caption>checkerItems 中 item 的属性</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> <table> <caption>HChecker 事件</caption> <thead> <th>事件名</th> <th>说明</th> <th>返回值</th> </thead> <tbody> <tr> <td>onChange</td> <td>选中值改变时触发</td> <td>包含选中值的数组</td> </tr> </tbody> </table> 示例代码: <template> <div class="checker"> <div class="box"> <span class="text">单选</span> <HChecker :checkerItems="items" v-model="checked" :gutter="gutter" :max="max"> </HChecker> </div> <div class="box"> <span class="text">单选, 改变选中时的颜色</span> <HChecker :checkerItems="items" v-model="checked" :gutter="gutter" checkedBorderColor="#58e" :max="max"> </HChecker> </div> <div class="box"> <span class="text">最多可选 2 个</span> <HChecker :checkerItems="items2" v-model="checked2" :gutter="gutter" :max="max2"> </HChecker> </div> </div> </template> <script> import { HChecker } from 'vuecomponent' export default { data () { return { items: [ { title: 'A', value: 1 }, { title:'B', value: 2 }, { title: 'C', value: 3 }, { title: 'D', value: 4 } ], items2: [ { title: 'HTML', value: 1 }, { title:'CSS', value: 2 }, { title: 'JavaScript', value: 3 }, { title: 'Vue', value: 4 } ], checked: [], checked2: [], gutter: 10, max: 1, max2: 2, color: '#fff' } }, components: { HChecker }, watch: { checked (val) { console.log(val) } } } </script> <style scoped> .box { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; width: 480px; margin: 32px auto; } </style> 效果示意图: ![](http://ojihaa8pb.bkt.clouddn.com/h-checker-basic.jpg)