Switch组件

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

实现基本需求

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

```<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(() =&gt; {

          this.$refs.input.checked = this.value;

        });

      }

    }

  },

  mounted() {

    this.$refs.input.checked = this.value;

  }

};

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

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



<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

巴特西

Switch组件

实现基本需求

最新文章

热门文章