Vue组件开发系列之Checkbox组件

一个复选框组件

演示地址：
http://widget-ui.cn/Checkbox

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

微信截图_20190808203228.png

基本用法：

<wt-checkbox :dataSource="dataSource" @handle="handle"></wt-checkbox>

dataSource: [
        {
          title: '新日小卫士二代',
          disable: true,
          desc: '京东购新日小卫士二代一辆，收货后就发现后轮毂变形！公司厂承诺全图联保，官网查得邯郸市有很多保修点，实际一个都不存在！'
        },
        {
          title: '车子质量不合格',
          desc: '刚买的电车，发现车把有些不对称，店家车子装上电瓶就想给换，找个维修师傅简单调了下，今天家人骑车发现车把还是有些斜！车子不合格怎能出厂出售？以后不'
        },
        {
          title: '我买的骑士1号仪表台进水怎么回事？',
          desc: '刚买的骑士1号，在外面淋了一会雨，发现里面进水了，第二天打电话给销售商，回复说正常，没关系。我觉得这算正常吗？再普通的电动车仪表台也不会进水。'
        },
        {
          title: '风雅欧妮大灯高低调节',
          desc: '哪位大神能不能告诉一下风雅欧妮大灯怎么调节'
        }
      ]

组件结构：

<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;
                }
            }
        }
    }
}

演示地址：
http://widget-ui.cn/Checkbox

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