Switch组件

Switch组件，业务需求中经常遇到。我司的旧项目中，由于没有使用较为成熟点的组件库。自己实现了一个switch组件，但是实现的略微有些丑陋。

实现基本需求

https://jsfiddle.net/huang_ju...

这里，需要实现基础的切换功能和禁用功能。

```<template id="switch"> <div class="el-switch" @click="handleChange" :class="{'is-checked': value, 'is-disabled': disabled}"> <input type="checkbox" ref="input"> <span class="el-switch__content"> <span class="el-switch__button" :style="{transform}"></span> </span> </div> </template> ```

let ElSwitch = {
  name: 'ElSwitch',
  template: '#switch',

  props: {
    value: {
      type: [Boolean],
      default: false
    },
    disabled: {
      type: [Boolean],
      default: false
    }
  },

  computed: {
    transform() {
      return this.value ? `translate3d(20px, 0, 0)` : '';
    }
  },

  methods: {
    handleChange() {
      if (!this.disabled) {
        this.$emit('input', !this.value);
        this.$nextTick(() => {
          this.$refs.input.checked = this.value;
        });
      }
    }
  },

  mounted() {
    this.$refs.input.checked = this.value;
  }
};

这里需要注意一点，对于自定义的表单组件，Element绑定值到组件中，是用的v-model。而v-model只是一个语法糖，是以下这种的简化形式：

```<input v-model="something">

<input
v-bind:value="something"
v-on:input="something = $event.target.value">

<p>所以，为了当组件内部值发生改变的时候，可以将变化的值传出来，需要使用这句：</p>

this.$emit('input', value);

<p>更具体的，可以参考Vue文档：<a href="https://cn.vuejs.org/v2/guide/components.html#%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6%E7%9A%84%E8%A1%A8%E5%8D%95%E8%BE%93%E5%85%A5%E7%BB%84%E4%BB%B6" rel="nofollow noreferrer">使用自定义事件的表单输入组件</a></p>
<p>其次，我们在模板中加了一个 type：checkbox 的input。这不是摆设，当switch组件用在表单中的时候，可能会用到<code>form.name.checked</code>。所以，我们需要在值改变的时候，也改变input.chekced属性。<strong>这里存在一个时机问题吧，因为v-model绑定了值到组件中，组件中不能直接修改这个值为true来进行改变，需要触发input事件，所以，这里checked的改变需要等到下一次渲染的时候，再进行设置</strong>。</p>
<h2>自定义activeValue、背景色、宽度</h2>
<p><a href="https://jsfiddle.net/huang_jusheng/La5koerg/" rel="nofollow noreferrer">https://jsfiddle.net/huang_ju...</a></p>
<p>自定义activeValue的点在于，有些情况下，switch的值可能是0、1.不能确定就一定是true或者false</p>
<p>emm....实现了下，发现也没什么难点，主要关注下改变背景色这一段的代码吧，我觉得写着还是挺好的</p>

let ElSwitch = {
name: 'ElSwitch',
template: '#switch',

props: {
// ...
},

computed: {
checked() {
return this.value === this.activeValue;
},
// ...
},

methods: {
handleChange() {
//...
},

setBackgroundColor() {
  let newColor = this.checked ? this.activeColor : this.inactiveColor;
  this.$refs.content.style.borderColor = newColor;
  this.$refs.content.style.backgroundColor = newColor;
}

},

watch: {
checked() {
this.$refs.input.checked = this.value;
if (this.activeColor || this.inactiveColor) {
this.setBackgroundColor();
}
}
},

created() {
if (!~[this.activeValue, this.inactiveValue].indexOf(this.value)) {
this.$emit('input', this.inactiveValue);
}
},

mounted() {
this.$refs.input.checked = this.checked;
if (this.activeColor || this.inactiveColor) {
this.setBackgroundColor();
}
}
};

<p>改变背景颜色，是发生在<code>this.$emit('input'，value)</code>之后的，这有一个执行顺序的问题。如果在this.$nextTick中进行改变背景色也行，效果一样，只是handleChange的代码长一点。但这里通过监听computed属性（checked），来做响应式改变，代码，emm....，感觉是更加清晰了点吧。</p>
<h2>总结</h2>
<p>Switch插件的编写不是很难，可以关注两点：</p>
<ul>
<li>通过watch监听computed属性，作为初学者，这点以后可以关注一下</li>
<li>多巧用ref，获取节点、设置属性很方便</li>
</ul>

                
                                                
原文地址：https://segmentfault.com/a/1190000014253606