LOLstyle-ui组件开发实战（五）—— Checkbox 组件

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

在Radio系列文章中，已经了解了封装radio和radio-group组件，而Checkbox组件为radio的多选框版本较为相似，学习起来很是容易。

1、认识Checkbox组件

1. 什么是Checkbox组件

Checkbox组件就是在一组备选项中进行多选

2. Checkbox组件框架及样式

在components下建立checkbox.vue文件

<template>
  <label class="lol-checkbox" :class="[ {'is-checked': isChecked}, {'is-disabled': isDisabled }, ]" > <span class="lol-checkbox_input"> <span class="lol-checkbox_inner"></span> <input type="checkbox" class="lol-checkbox_original" :name="name" v-model="model" :value="label" :disabled="isDisabled" > </span> <span class="lol-checkbox_label"> <slot></slot> <template v-if="!$slots.default"> {{label}} </template> </span> </label> </template>

<script> export default { name: 'lolCheckbox', } </script>

<style lang="scss" scoped> .lol-checkbox{ color: #E0CE9C; font-weight: 500; line-height: 1; font-size: 14px; position: relative; cursor: pointer; display: inline-block; white-space: nowrap; outline: none; user-select: none; margin-right: 30px; &:focus &:hover{ color: #E8DFCC; } .lol-checkbox_input{ white-space: nowrap; cursor: pointer; outline: none; display: inline-block; line-height: 1; position: relative; vertical-align: middle; .lol-checkbox_inner{ display: inline-block; box-sizing: border-box; position: relative; border: 2px solid #C59533; width: 14px; height: 14px; background-color: rgba(0,0,0,0); transform: rotate(45deg); &:after{ width: 5px; height: 5px; background-color: #E8DFCC; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(0); transition: transform .15s ease-in; } } .lol-checkbox_original{ opacity: 0; outline: none; position: absolute; z-index: -1; top: 0; left: 0; margin: 0; } } .lol-checkbox_label{ font-size: 14px; padding-left: 10px; } } .lol-checkbox.is-checked{ .lol-checkbox_input{ .lol-checkbox_inner{ border-color: #C79734; &:after{ transform: translate(-50%,-50%) scale(1); } } } .lol-checkbox_label{ color: #E8DFCC; } } .lol-checkbox.is-disabled { cursor: not-allowed; .lol-checkbox_input{ cursor: not-allowed; .lol-checkbox_inner{ cursor: not-allowed; border-color: #5C5B57; } } .lol-checkbox_label{ color: #5C5B57; } } </style>

复制代码

3. Checkbox组件注册

import Vue from 'vue'
import App from './App.vue'
// 引用字体图标
import './assets/fonts/iconfont.css'

// 导入button系列组件
import lolButton from './components/button.vue'
import lolButtonGroup from './components/button-group.vue'

// 导入Radio系列组件
import lolRadio from './components/radio.vue'
import lolRadioGroup from './components/radio-group.vue'

// 导入Checkbox组件
import lolCheckbox from './components/checkbox.vue'
 
Vue.config.productionTip = false
 
// 注册组件
Vue.component(lolButton.name, lolButton)
Vue.component(lolButtonGroup.name, lolButtonGroup)
Vue.component(lolRadio.name, lolRadio)
Vue.component(lolRadioGroup.name, lolRadioGroup)
Vue.component(lolCheckbox.name, lolCheckbox)
 
new Vue({
  render: h => h(App)
}).$mount('#app')

复制代码

4. Checkbox组件使用

<lol-checkbox label=1></lol-checkbox>
    <lol-checkbox label=2></lol-checkbox>
    <lol-checkbox label=3></lol-checkbox>
复制代码

2、Checkbox组件的双向绑定和选中断定

1. v-model双向绑定

model: {
      get () {
        return this.value
      },
      set (value) {
        this.$emit('input', value)
      }
},
复制代码

2. 选中断定

1. 计算选中model

isChecked () {
      return this.model
    },
复制代码

2. input绑定model

<input type="checkbox"
        v-model="model"
        :value="label">
复制代码

3. 动态绑定选中样式

<label class="lol-checkbox"
    :class="[ {'is-checked': isChecked}, ]"
  >
</label>
复制代码

3. 添加禁用属性

1. 父组件传值

<lol-checkbox disabled>Yes/No</lol-checkbox>
复制代码

2. 子组件接受

props: {
    disabled: {
          type: Boolean,
          default: false
        }
}
复制代码

3.动态绑定禁用样式

<label class="lol-checkbox"
    :class="[ {'is-disabled': disabled}, ]"
  >
</label>
复制代码

end

checkbox组件与radio组件相似，且常搭配checkbox-group组件一块儿使用，单一的checkbox组件较为简单。下一篇将介绍checkbox-group组件。

你的赞是我继续更文的动力！！

respect by myself