vue 可选按钮_Vue自定义单选按钮和复选框组件

“ 做好自己就好了呀 ”

问题

前段时间接到一个任务，需要做一个自定义的单选和多选按钮，但是之前都是用现成的UI框架，都不用自己写样式，直接一套就是干！但是进公司后，发现部门不适用外部UI框架，好吧，那我就自己写呗！

构思

我想到的办法是运用原生的radio和CheckBox，再通过样式覆盖的方式。

兼容性

由于在写组件时使用了flex布局，so 低版本浏览器不支持的哈，具体有关flex的知识可以学习一下阮大佬的博客：Flex 布局教程：语法篇

废话不多说上代码

:class="{'column':isColumn}">

:key=index

class="check-box"

:class="{'width100':isColumn}"

@click="checkBox(index)"

v-show="!item.isShow">

:style="item.isChecked?propsStyle:''">

:value="item.value">

export default {

name: "checkbox",

data() {

return {

propsStyle: {

border: "1px solid " + this.color,

background: this.color

}

};

},

props: {

/**

items实例:[{name:'选项一',isChecked:false}],

name：可以是html，

需要显示和隐藏的加上isShow字段，true为隐藏，如下：

[{name:'选项一',isChecked:false,isShow:false}]

*/

items: {

type: Array,

default: function() {

re