Vue组件开发系列之Switch组件

组件源码：

https://github.com/AntJavascript/widgetUI/tree/master/switch

Switch组件可以说是我们平时开发中使用频率最高的组件之一，

image

Switch组件结构代码：

<template>

    <div class="wt-switch">

      <label class="label-switch">

        <input type="checkbox" :disabled="isable" @click="Switch" :checked="checked">

        <div class="checkbox"></div>

      </label>

    </div>

</template>

js代码：

export default {

  props: {

    isable: { // 是否禁用

      type: Boolean,

      default: function () {

        return false;

      }

    },

    checked: {  // 是否默认打开

      type: Boolean,

      default: function () {

        return false;

      }

    }

  },

  methods: {

    Switch () { // 点击事件，告诉父组件，当前状态是打开还是关闭

    // 父组件需要注册 "switch" 事件

      this.$emit('switch', event.target.checked);

    }

  }

};

css代码：

.wt-switch .label-switch {

    display: inline-block;

    vertical-align: middle;

    width: 2.6rem;

    border-radius: 0.8rem;

    box-sizing: border-box;

    height: 1.7rem;

    position: relative;

    cursor: pointer;

    -ms-flex-item-align: center;

    -webkit-align-self: center;

    align-self: center;

    input[type="checkbox"] {

        display: none;

    }

    input[type="checkbox"]:checked + .checkbox {

        background: #4cd964;

    }

    input[type="checkbox"]:checked + .checkbox:after {

        transform: translateX(1.1rem);

    }

    .checkbox {

        width: 2.6rem;

        border-radius: 0.8rem;

        box-sizing: border-box;

        height: 1.7rem;

        background: #e5e5e5;

        z-index: 0;

        margin: 0;

        padding: 0;

        -webkit-appearance: none;

        -moz-appearance: none;

        -ms-appearance: none;

        appearance: none;

        border: none;

        cursor: pointer;

        position: relative;

        -webkit-transition-duration: 300ms;

        transition-duration: 300ms;

        &:before {

            content: ' ';

            position: absolute;

            left: 0.1rem;

            top: 0.1rem;

            width: 2.4rem;

            border-radius: 0.8rem;

            box-sizing: border-box;

            height: 1.4rem;

            z-index: 1;

            -webkit-transition-duration: 300ms;

            transition-duration: 300ms;

            -webkit-transform: scale(1);

            transform: scale(1);

        }

        &:after {

            content: ' ';

            height: 1.4rem;

            width: 1.4rem;

            border-radius: 1.4rem;

            background: #fff;

            position: absolute;

            z-index: 2;

            top: 0.1rem;

            left: 0.1rem;

            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);

            -webkit-transform: translateX(0px);

            transform: translateX(0px);

            -webkit-transition-duration: 300ms;

            transition-duration: 300ms;

        }

    }

}

组件源码：

https://github.com/AntJavascript/widgetUI/tree/master/switch