<template>
  <div class="page">
    <div class="title">{{title}}</div>
    <el-switch
      v-model="value"
      :width="width"
      :disabled="disabled"
      @change="onChange"
      @focus="onfocus"
    ></el-switch>
  </div>
</template>

<script>
export default {
    name:"HmElementSwitch",
    props: {
        /**
         * 标题
         */
        title:{
            type:String,
            default:'开关：'
        },
        /**
         * 变量名
         */
        value:{
            type:Boolean,
            default: true,
        },
        /**
         * 组件宽度
         */
        width:{
            type: Number,
            default:40
        },
        /**
         * 是否禁用
         */
        disable:{
            type:Boolean
        }
    },
    watch: {
        val(val){
            this.value = val
        },
        value(val){
            this.$emit("getData",val)
            // this.value = val
        },

    },
    methods: {
        onChange: function (e){
            this.$emit("change",e)
        },
        onfocus:function(e){
            this.$emit("focus",e)
        }
    }
}
</script>

<style scoped>
    .page{
        width: 100%;
        display:flex;
        align-items: center;
        padding-left:5vw;
    }
</style>