vue 自定义switch组件,样式美化

组件的使用

<vswitch :value="value" :FId="FId" :index="index" class="vswitch" :handle="false" @changeSwitch="changeSwitch"></vswitch>
//script  
data() {
    return {
      value:false,
      FId:'123’,
      index:0,
    }
},
methods:{
    changeSwitch(checked,id,index){
      console.log(index)
    }
}

switch

template

<template>
  <div class="weui-div" @click.stop="toggle">
    <span class="weui-switch" :class="{'weui-switch-on' : me_checked}" :value="value" ></span>
    <div v-if='!value' class="weui-div-2">未处理</div>
    <div v-if='value' class="weui-div-1">已处理</div>
  </div>
</template>

script

<script>
  export default {
    props: {
      value: {
        type: Boolean,
        default: true
      },