「站在上帝的角度」談談Element組件結構-Switch

這是我參與8月更文挑戰的第5天，活動詳情查看：8月更文挑戰

前言👋

• 用戶就是上帝，站在上帝的角度也就是站在使用者的角度去看待組件。
• 用過很多優秀的UI庫，用的時候美滋滋，輪到本身搭組件庫的時候每每會去參考別人的源碼。
• 看完源碼後恍然大悟 噢！原來能夠這樣寫，但內心不免會有疑惑別人是怎麼想出來這種解決思路的？🤳
• 這一系列文章主要是面向未理解或者有疑惑的同窗因此講的比較基礎，就讓咱們站在用戶的角度去思考結構，看看換一種思路去寫代碼是否是有變化？

關於Switch組件🥽

爲何咱們會用到switch

做爲用戶👨‍💼

• 想到選擇，大家會想到什麼，有的人第一時間會想到下拉框，而有的人第一時間會想到switch開關。
• 在我記事以來我遇到的第一個switch可能就是我那臺小小的iphone飛行模式的開關了，那時候還不是前端工程師，看到那個以後就以爲特別好看簡潔，以爲其餘的都low爆了。
• 相信不僅是我被switch簡約的風格給迷住，每每咱們在遇到只有兩個選項的問題時更多但願遇到的是開關而不是下拉框，好比一個表單屬性的（是、否）(成功、失敗)

做爲組件庫使用者👨‍💻

• 當咱們將組件庫的switch組件放到咱們的頁面咱們想要的效果是什麼？
  • 簡約
  • 能夠知足基本的切換需求
  • 能夠在基本的需求上進行定製增長功能（好比:顏色屬性 大小 是否添加文字 ）
• 在某一個方面來講，switch也能夠規避一個字段是否必填 必選,相信你們有遇到過這樣的需求，在製做表單時每每須要對某一個字段判斷'有沒有填寫' '是否爲空' 而後彈出一行紅色的提示說'此項不能爲空'，然而使用了switch則能夠避免用戶不選 選錯這種狀況發生也不用醜陋的紅色提示佔了頁面位置。

搭建組件⚒️

接下來可能用盡量少的代碼搭配element的源碼進行結構說明，配合element Switch源碼食用更加美味喔

基本架子🔨

• 要設計一個switch很是簡單，在看element源碼以前我也本身寫過一個switch，要想讓上圖的開關動起來其實只是中間白色那塊在一個綠色的容器裏面改變了定位位置而已然而當點擊了開關後背景從綠色會變成其餘顏色來給一種視覺上是動了起來。
• 總結起來總共也只有3個要點
  • 準備一個外部的容器
  • 準備一個內部的圓圈
  • 點擊時改變外部容器的顏色和內部圓圈的定位位置順帶加上億點點的過渡效果
  • 根據不一樣的狀態改變不一樣的input值從而實現雙向綁定

<template>
  <div class="el-switch">
    <input type="checkbox" class="el-switch__input">
    <span ref="core" class="el-switch__core">
    </span>
  </div>
</template>
複製代碼

• 以上就是element最簡單的switch結構，能夠看到外部是由一個div包裹住input和span
• 這個input就是方便咱們作雙向綁定接收，固然要把他隱藏掉咱們不但願他出如今頁面中，咱們只須要它的功能就行了

• 而後是接下來的span，在element中這個span就是外部的容器了,而後在這個容器中巧妙地運用了僞元素來製做一個白色的圈圈，上圖是該switch的基本樣式，運用了BEM的命名結構，若是不瞭解BEM的能夠看到我以前的一篇介紹，這裏主要就是將中間的僞元素作了定位處理讓它一開始的時候在最左邊。

雙向綁定🎶

• 固然如今的switch是沒有動效的，咱們要給組件傳入v-model綁定屬性

<template>
<l-switch v-model="value"></l-switch>
</template>
<script>
  export default {
    data () {
      return {
        value: false
      };
    }
  }
</script>
複製代碼

• 父組件用v-model進行傳值，v-model提供了一個value值和一個input方法,子組件props接收value數值並增長一個點擊事件改變父組件的input方法便可實現雙向綁定。
• 如今點擊switch是可讓value動態變化的，上述默認的是一個圓圈在最左邊表明未選中的狀況，新增一個圓圈在最右邊的class順便改變背景顏色,接下來只須要爲組件動態切換class就能夠了。

template

<div
    class="el-switch"
    :class="{ 'is-checked': checked }"
    @click="switchValue"
  >
    <input ref="input" type="checkbox" class="el-switch__input" :value="value">
    <span ref="core" class="el-switch__core">
    </span>
  </div>
  
script

export default {
   props:{
    value: {
      type: [Boolean, String, Number],
      default: false
    }
   },
   computed: {
     checked() {
       return this.value;
     },
   },
   methods:{
    switchValue() {
       this.handleChange();
     },
    handleChange() {
      this.$emit('input', !this.value);
    },
   }
};
複製代碼

• 至此一個最簡單switch就作好了

更多需求🧮

• 每每咱們不侷限於這一簡單的功能，還須要添加禁用，改變大小等功能
• 咱們只須要給子組件傳入不一樣的屬性，在子組件經過判斷該屬性值得不一樣來處理邏輯便可

寫在最後👋

• 總的來講switch組件相對於其餘複雜組件比較簡單，通常的處理邏輯就是父組件要想v-model一個值到子組件，子組件就必須設置一個value的props，而且使用$emit來改變父組件的input的事件，再相應的作些處理便可。
• 對於組件庫的搭建我也在慢慢的摸索，講的都是我本身得出來的分享因此說可能對於大佬來講會比較基礎，但我相信個人不斷輸出能夠幫助到一些有疑惑的同窗。
• 若是您以爲這篇文章有幫助到您的的話不妨🍉關注+點贊+收藏+評論+轉發🍉支持一下喲~~😛

往期精彩🌅

如何優雅的使用Vuepress編寫組件示例（上）👈

如何優雅的使用Vuepress編寫組件示例（下）👈

樣式命名有多難?淺談BEM命名規範⚡

「站在上帝的角度」談談Element組件結構-Radio