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