vue 封装 switch组件，纯css手写，需修改样式可自制

<template>
  <div class="myswipper">
    <div class="switch-text" v-if="options">
      <span v-if="showstatus">{{options.show}}</span>
      <span v-else>{{options.hide}}</span>
    </div>
    <input type="checkbox" 
      :checked="checked"
      :disabled="disabled"
      @change="changeSwitch" />
  </div>
</template>
<script>
export default {
  components: {
  },
  computed: {
  },
  model:{
    prop: 'checked',
    event: 'change'
  },
  data() {
    return{
      
    }
  },
  watch: {
  },
  methods: {
    changeSwitch(e){
      console.log(e)
      this.$emit('change',e.target.checked)
    }
  },
  props: {
    checked:{
      type:Boolean,
      default:false
    },
    disabled:{
      type:Boolean,
      default:false
    },
    options:{
      type:Object
    }
  },
  destroyed() {
  },
}
</script>
<style lang='less' scoped>
.myswipper{
  display: flex;
  align-items: center;
  input[type=checkbox] {
    width: 1.04rem;
    height: .64rem;
    -webkit-appearance: none;
    background-color: transparent;
    border: 0;
    outline: 0 !important;
    color: #d8d8d8;
    position: relative;
    transition: all .3s ease;
  } 
  input[type=checkbox]:before{
    content: "";
    display:block;
    width: 1.04rem;
    height: .64rem;
    border: 1px solid #ddd;
    background-color: #fff;
    box-sizing:border-box;  
    border-radius: .64rem;
    position: absolute;
  }
  input[type=checkbox]:after{
    content: "";
    display:block;
    width: .6rem;
    height: .6rem;
    left:1px;
    top:1px;
    border: 1px solid #fff;
    background-color: #fff;
    box-sizing:border-box;  
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
    border-radius: 50%;
    position: absolute;
    transition: all .3s ease;
  }
  input[type=checkbox]:disabled:before{
    content: "";
    display:block;
    width: 1.04rem;
    height: .64rem;
    border: 1px solid #999;
    background-color: #999;
    box-sizing:border-box;  
    border-radius: .64rem;
    position: absolute;
  }
  input[type=checkbox]:disabled:after{
    content: "";
    display:block;
    width: .6rem;
    height: .6rem;
    left:1px;
    top:1px;
    border: 1px solid #fff;
    background-color: #fff;
    box-sizing:border-box;  
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
    border-radius: 50%;
    position: absolute;
  }
  input[type=checkbox]:checked:before{
    content: "";
    display:block;
    width: 1.04rem;
    height: .64rem;
    border: 1px solid #ddd;
    background-color: #D2A47E;
    box-sizing:border-box;  
    border-radius: .64rem;
    position: absolute;
  }
  input[type=checkbox]:checked:after{
    content: "";
    display:block;
    width: .6rem;
    height: .6rem;
    left:100%;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    border: 1px solid #fff;
    background-color: #fff;
    box-sizing:border-box;  
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
    border-radius: 50%;
    position: absolute;
  }
  .switch-text{
    margin-right: 5px;
  }
}
</style>

使用方法

<zl-switch v-model="show" @change="change"></zl-switch>

更多详细知识介绍请访问我的个人主页