Vue自定义单选按钮和复选框组件

> “ 做好自己就好了呀 ”

问题

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

构思

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

兼容性

由于在写组件时使用了flex布局，so 低版本浏览器不支持的哈，具体有关flex的知识可以学习一下阮大佬的博客：[Flex 布局教程：语法篇](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)

## 废话不多说上代码```html
 

<!-- Checkbox -->
<template>
  <div class="check-boxs"
       :class="{'column':isColumn}">
    <div v-for="(item,index) in items"
         :key=index
         class="check-box"
         :class="{'width100':isColumn}"
         @click="checkBox(index)"
         v-show="!item.isShow">
      <span :class="{'checkbox-icon':true,'checkbox-input':item.isChecked,'opacity':opacity&&item.isChecked}"
            :style="item.isChecked?propsStyle:''">
        <i :class="{'checkbox-on':item.isChecked}"></i>
      </span>
      <input type="checkbox"
             :value="item.value">
      <span v-html="item.name