<template>
  <el-switch
    class="ps-switch"
    :id="id"
    v-model="inputValue"
    :disabled="disabled"
    :width="width"
    v-bind="$attrs"
    @change="operaChage"
  >
  </el-switch>
</template>

<script>
export default {
  name: "PsSwitch",
  props: {
    value: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    width: {
      type: Number,
      default: 40
    },

    id: { type: String, default: "" }
  },
  //处理v-model语法糖的emit事件
  model: {
    prop: 'value',
    event: 'handler'
  },
  watch: {
    value: {
      handler(val) {
        this.inputValue = val
      },
      immediate: true
    }
  },
  data() {
    return {
      inputValue: false,
    };
  },
  created() {

  },
  mounted() {
  },
  methods: {
    operaChage(e) {
      this.$emit('handler', this.inputValue)
      this.$emit("change", e);
    },
  },
};
</script>

<style></style>
