「站在上帝的角度」谈谈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