elementui源码学习之仿写一个el-switch

本篇文章记录仿写一个el-switch组件细节，从而有助于大家更好理解饿了么ui对应组件具体工作细节。本文是elementui源码学习仿写系列的又一篇文章，后续空闲了会不断更新并仿写其他组件。源码在github上，大家可以拉下来，npm start运行跑起来，结合注释有助于更好的理解。github仓库地址如下：https://github.com/shuirongsh...

switch组件思考

组件功能作用

switch组件一般是表示开关状态或者两种状态之间的切换，如点击开启网站的夜间模式，或关闭夜间模式。如下图vue官网首页就有这样的操作功能：

vue官网链接地址：https://cn.vuejs.org/

组件的结构

switch组件的结构还是比较简单的，主要分为两部分：

switch组件切换小圆点按钮
switch组件切换容器

组件的实现思路

基本的switch切换布局结构

在实现switch组件的时候，switch组件切换容器 可以直接画一个div去表示，那么 switch组件切换小圆点按钮 我们也需要画一个div吗？其实不用的。

我们可以使用伪元素先画出一个切换小圆点按钮（结合定位）
然后需要定义一个标识布尔值，用于更改切换组件开启关闭状态
当状态变化的时候，去更改切换小圆点按钮在左侧或在右侧的位置（通过class），即实现了切换功能
再加上过渡效果，这样的话，switch组件的切换（开启关闭）就会很丝滑了

开启关闭switch组件的说明文字功能注意事项

如下图：

关于开启时候文字在左侧，关闭时候文字在右侧，也开始可以通过弹性盒样式控制 justifyContent:flex-start / flex-end;，当然动态padding也要加上，详情见代码
若将文字加入切换框内部，那么就需要让切换框背景容器dom的宽度自适应，即根据内容文字的多少来控制，所以要提到width: fit-content;属性（使用fit-content属性，让宽度随着内容文字多少自适应）

关于 fit-content 详情见官方文档：https://developer.mozilla.org...

给伪元素加上hover效果的写法

给伪元素加悬浮效果是先hover再::after（不要搞反了）

正确写法：.target:hover::after { background-color: red; }

错误写法!!!：.target::after:hover { background-color: red; }

这里举一个例子代码效果图，复制粘贴即可使用，如下：





    
    
    
    Document

关于封装的mySwitch组件的其他的东西，结合笔者的注释，就可以清晰的理解了。这个组件主要还是样式的动态控制。

另，笔者封装的组件暂不搭配el-form的校验使用，后续写到表单校验时，会补上并更新github上的代码仓库中

当然部分写法效果，笔者的方案和官方的还是略有不同，毕竟思路略有不同，也建议读者自己尝试仿写封装哦

封装的组件

效果图

笔者的gif录屏软件不太好，道友朋友们有没有不错的gif录制软件推荐一下 ^_^

复制粘贴即可使用哦

使用代码

封装代码

参考注释，建议自己封装适合自己公司业务的switch组件

注意true-value和false-value是官方自带的搭配v-model属性，其实这里不用也行，大家参考一下antd的组件便可明了。详见：https://cn.vuejs.org/guide/es...