Vue 封装自定义勾选checkbox组件

[felix-cao]

一、 场景描述

如上图，是我们一个项目的应用场景， 显然，封装一个 checkbox 的可复用组件，是最好的处理方法。下面我就来实现这个组件

二、checkbox 样式实现

首先实现一个按钮 Html 部分

<label  class="swCheck isChecked">
  <span class="checkbox__label">全部</span>
  <span class="checkbox__input">
    <span class="checkbox__tick"><i class="el-icon-check"></i></span>
    <span class="checkbox__inner"></span>
    <input class="checkbox__original" type="checkbox"/>
  </span>
</label>

样式请阅读 jsfiddle 在线预览，需要说明的是：

• 使用 label 标签 <label> 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。
• 样式 swCheck 是相对定位， checkbox__input 是绝对定位
• 右下角三角形是纯 css 实现的。
• 勾选图标 <i class="el-icon-check"></i> 使用了 Element UI 的 icon 图标

三、点击事件

现在，我们要通过点击事件来实现勾选效果

JavaScript 部分：分别在 data 中添加isChecked 和 在 methods 中定义 onClick 方法

// other code
data () {
  return {
    isChecked: true
  }
},
methods: {
  onClick () {
    this.isChecked = !this.isChecked
  }
}
// other code

在模板的label中使用绑定样式 class, 在 input 中绑定click事件

<label class="swCheck" :class="{ isChecked: isChecked }">
  <span class="checkbox__label">全部</span>
  <span class="checkbox__input">
    <span class="checkbox__tick"><i class="el-icon-check"></i></span>
    <span class="checkbox__inner"></span>
    <input class="checkbox__original" type="checkbox" @click="onClick"/>
  </span>
</label>

完整的代码请阅读 jsfiddle 在线预览

四、关联数据及使用

现在我们要关联数据了

// other code
props: ['options'],
computed: {
  arr: function () {
    return this.options.map(item => {
      return {...item, key: `${item.label}---${item.value}`}
    })
  }
},
// other code
methods: {
  onClick (index) {
    this.isFresh = false
    this.arr[index].isChecked = !this.arr[index].isChecked
    this.isFresh = true
    this.$emit('on-change', this.arr)
  }
}
// other code

上面的代码需要注意的是

• isFresh，是一种vue hack的写法，目的是强制模板重新渲染
• $emit 方法将数据 arr 传递给事件 on-change

在模板中使用 v-for

<label  class="swCheck" :class="{ isChecked: !!item.isChecked }" :for="item.key" v-for="(item, index) in arr" :key="item.key">
  <span class="checkbox__label">{{item.label}}</span>
  <span class="checkbox__input">
    <span class="checkbox__tick"><i class="el-icon-check"></i></span>
    <span class="checkbox__inner"></span>
    <input class="checkbox__original" type="checkbox" @click="onClick(index)" :id="item.key"/>
  </span>
</label>

使用方法 在模板中绑定事件 on-change

<Checkbox :options="options" @on-change="onChange"/>

onChange，可以接收到传递过来的参数

// other code
components: {Checkbox},
data () {
  return {
    options: [
      { label: '全部', value: '', isChecked: true },
      { label: '微博', value: 'weibo', isChecked: true },
      { label: '微信', value: 'weixin', isChecked: true },
      { label: '论坛', value: 'form' },
      { label: '网站', value: 'webSite' },
      { label: 'Facebook', value: 'facebook' }
    ]
  }
},
methods: {
  onChange (options) {
    console.log('custom the event function', options)
  }
}

完整的代码请阅读 jsfiddle 在线预览

[mtt3366]

学习了