'!'

src/pagesAddress/Switch/switch.vue

@@ -0,0 +1,77 @@
+/* 
+  滑块组件
+*/
+<template>
+  <div
+    class="zy-switch"
+    @click="onChange"
+    :class="{
+      'switch-on': currentValue,
+      'switch-disabled': disabled
+    }"
+    :style="{'font-size': size + 'rpx'}"
+  >
+    <div class="zy-switch-item"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ZySwitch',
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: [Boolean, Number, String],
+      default: false
+    },
+    size: {
+      type: String,
+      default: '50'
+    },
+    trueValue: {
+      type: [Boolean, Number, String],
+      default: true
+    },
+    falseValue: {
+      type: [Boolean, Number, String],
+      default: false
+    }
+  },
+  watch: {
+    value (val) {
+      if (val === this.trueValue || val === this.falseValue) {
+        this.updateModel()
+      } else {
+        throw 'Value should be trueValue or falseValue'
+      }
+    }
+  },
+  data () {
+    return {
+      currentValue: this.value
+    }
+  },
+  methods: {
+    onChange () {
+      console.log('onchange')
+      if (this.disabled) return false
+      let checked = !this.currentValue
+      this.currentValue = checked
+      let value = checked ? this.trueValue : this.falseValue
+      this.$emit('input:value', value)
+
+      // this.$emit('on-change', value)
+    },
+    updateModel () {
+      this.currentValue = this.value === this.trueValue
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import './switch';
+</style>