Initial commit

src/components/jero/JSwitch.vue

@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <a-select
+      v-if="query"
+      style="width: 100%"
+      @change="handleSelectChange"
+      >
+      <a-select-option v-for="(item, index) in queryOption" :key="index" :value="item.value">
+        {{ item.text }}
+      </a-select-option>
+    </a-select>
+    <a-switch
+      v-else
+      v-model="checkStatus"
+      :disabled="disabled"
+      @change="handleChange"
+      v-bind="$attrs"
+      v-on="childListeners"/>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'JSwitch',
+  props: {
+    value: {
+      type: [String, Number],
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    options: {
+      type: Array,
+      required: false,
+      default: () => ['Y', 'N']
+    },
+    query: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data () {
+    return {
+      checkStatus: false
+    }
+  },
+  computed: {
+    queryOption () {
+      const arr = []
+      arr.push({ value: this.options[0], text: '是' })
+      arr.push({ value: this.options[1], text: '否' })
+      return arr
+    },
+    // 透传给下级组件的事件，需要排除本组件使用的change事件
+    childListeners () {
+      const result = Object.assign({},
+        this.$listeners
+      )
+      delete result.change
+      return result
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler (val) {
+        if (!this.query) {
+          if (!val) {
+            this.checkStatus = false
+            this.$emit('change', this.options[1])
+          } else {
+            this.checkStatus = this.options[0] + '' === val + ''
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    handleChange (checked) {
+      const flag = checked === false ? this.options[1] : this.options[0]
+      this.$emit('change', flag)
+    },
+    handleSelectChange (value) {
+      this.$emit('change', value)
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>