Vue组件开发系列之Checkbox多选组件

组件源码：
https://github.com/AntJavascript/widgetUI/tree/master/radioGroup

FireShot Capture 6 - nvx - http___localhost_8080_demo#_Checkbox.png
组件结构：

<template>
    <div class="wt-checkbox">
        <ul>
          <li v-for="(item, index) in dataSource" :key="index"  @click='handle(item, index)'>
              <p :class="{'icon-check acitive': find(item), 'disable': item.disable}"></p>
              <div class="item-inner">
                <div class="title">{{item.title}}</div>
                <div class="subtitle">{{item.desc}}</div>
              </div>
          </li>
        </ul>
    </div>
</template>

代码分析：

props参数：

props: {
    dataSource: { // 数据来源
      type: Array,
      default: function () {
        return [];
      }
    }
  }

data参数：

data () {
    return {
      selected: [] // 选中的数据
    };
  }

methods函数：

methods: {
    // 点击选项触发的函数
    handle (item, index) {
      // 如果disable为真则不能被选中，直接return
      if (item.disable) {
        return;
      }
      // 如果当前点击选项不在已选中数组内，则添加进去，否则就清除出去
      if (!this.find(item)) {
        this.selected.push(item);
      } else {
        var i = this.find(item, true).index;
        this.selected.splice(i, 1);
      }
      this.$emit('handle', this.selected); // 传值父组件
    },
    // 去重操作
    /*
      参数说明：
        item 当前选项 (必传)
        remove 是否删除 (可选)
     */
    find (item, remove) {
      var flag = false;
      var index;
      for (var i = 0; i < this.selected.length; i++) {
        if (this.selected[i] === item) {
          flag = true;
          index = i;
        }
      }
      if (remove) {
        return {
          flag: flag,
          index: index
        };
      } else {
        return flag;
      }
    }
  }

css代码：

.wt-checkbox {
    ul {
        background: #ffffff;
        list-style: none;
        padding: 0;
        margin: 0;
        position: relative;
        li {
            box-sizing: border-box;
            position: relative;
            text-align: left;
            // line-height: 2rem;
            // height: 2rem;
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            .item-inner {
                width: 100%;
                box-sizing: border-box;
                white-space: nowrap;
                // padding-right: 2rem;
                text-overflow: ellipsis;
                padding-left: 0.4rem;
                &::after {
                    transform: scaleY(.5);
                    height: 1px;
                    content: '';
                    border-bottom: 1px solid #ccc;
                    display: block;
                }
                .title {
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                    -webkit-box-orient: vertical;
                    white-space: normal;
                    margin: 0.2rem;
                }
                .subtitle {
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    -webkit-box-orient: vertical;
                    white-space: normal;
                    color: #999;
                    font-size: 0.7rem;
                    margin: 0.2rem;
                }
            }
            &::before {
                font-size: 1rem;
                position: absolute;
                right: 8px;
                line-height: 2rem;
                color: #1BB5F1;
                text-align: right;
            }
            p {
                min-width: 1.1rem;
                min-height: 1.1rem;
                width: 1.1rem;
                height: 1.1rem;
                border-radius: 4px;
                border: 1px solid #ccc;
                box-sizing: border-box;
                overflow: hidden;
                align-items: center;
                margin: 0 0.5rem;
                justify-content: center;
                display: flex;
                &.acitive {
                    color: #ffffff;
                    background: #1BB5F1;
                    border: 1px solid #1BB5F1;
                }
                &.disable {
                    background: #eee;
                }
            }
        }
    }
}

组件源码：
https://github.com/AntJavascript/widgetUI/tree/master/radioGroup