新建一个Switch组件

  1 <template>
  2     <div>
  3         <span class="weui-switch" :class="{'weui-switch-on' : isChecked}" :value="value" @click="toggle" style="position:relative">
  4             <div v-if="isChecked && direction.length > 0" style="width:100%;height:100%;position:absolute;padding:0 5px;line-height:20px;color:#FFF;user-select:none">
  5                 {{direction[0]}}
  6             </div>
  7             <div v-if="!isChecked && direction.length > 0" style="width:100%;height:100%;position:absolute;padding:0 5px;right:2px;line-height:22px;color:#7A7A7A;text-align:right;user-select:none">
  8                 {{direction[1]}}
  9             </div>
 10         </span>
 11     </div>
 12 </template>
 13 <script>
 14     export default {
 15         name: 'switchComponent',
 16         props: {
 17           value: {
 18             type: Boolean,
 19             default: true
 20           },
 21           text: {
 22               type: String,
 23               default: ''
 24           }
 25         },
 26         data () {
 27             return {
 28                 isChecked: this.value
 29             }
 30         },
 31         computed: {
 32             direction () {
 33                 if (this.text) {
 34                     return this.text.split('|')
 35                 } else {
 36                     return []
 37                 }
 38             }
 39         },
 40         watch: {
 41           value (val) {
 42             this.isChecked = val
 43           },
 44           isChecked(val) {
 45             this.$emit('change', val);
 46           }
 47         },
 48         methods: {
 49           toggle() {
 50             this.isChecked = !this.isChecked;
 51           }
 52         }
 53     }    
 54 </script>
 55 <style>
 56     .weui-switch {
 57         display: block;
 58         position: relative;
 59         width: 52px;
 60         height: 24px;
 61         border: 1px solid #DFDFDF;
 62         outline: 0;
 63         border-radius: 16px;
 64         box-sizing: border-box;
 65         background-color: #DFDFDF;
 66         transition: background-color 0.1s, border 0.1s;
 67         cursor: pointer;
 68       }
 69       .weui-switch:before {
 70         content: " ";
 71         position: absolute;
 72         top: 0;
 73         left: 0;
 74         width: 50px;
 75         height: 22px;
 76         border-radius: 15px;
 77         background-color: #FDFDFD;
 78         transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
 79       }
 80       .weui-switch:after {
 81         content: " ";
 82         position: absolute;
 83         top: 0;
 84         left: 0;
 85         width: 22px;
 86         height: 22px;
 87         border-radius: 15px;
 88         background-color: #FFFFFF;
 89         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
 90         transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
 91       }
 92       .weui-switch-on {
 93         border-color: #6F6F6F;
 94         background-color: #1AAD19;
 95       }
 96       .weui-switch-on:before {
 97         border-color: #1AAD19;
 98         background-color: #409eff;
 99       }
100       .weui-switch-on:after {
101         transform: translateX(28px);
102       }
103 </style>

在父组件中引入

<template>
  <div>
    <switch v-model="value" text="on|off"></switch>
  </div>
  
</template>

<script>
import switch from './components/Switch'
export default {
  name: "App",
  components: {
    switch
  },
  data() {
    return {
        value:''
  },
  methods:{

  }
};
</script>

<style lang="less">

</style>

效果如下