lcoco/components/en-from/en-switch/en-switch.vue

<template>
  <view class="box">
    <view class="input-box">
      <view class="input-box-left" :style="{'letter-spacing':labelWidth}">
        {{ label }}
      </view>
      <switch  color="#3169FA" style="transform:scale(0.7)" :checked="true" @change="switchChange" />
    </view>
  </view>
</template>

<script>
export default {
  name: 'en-switch',
  props: {
    type: {
      type: String,
      default: 'text'
    },
    label: {
      type: String,
      default: '状态'
    },
    value: {
      default: ''
    },
    trueValue: {
      default: 1
    },
    falseValue: {
      default: '0'
    }
  },
  data() {
    return {
      inputValue: false,
      labelWidth:0
    }
  },
  components: {},
  mounted() {
    this.setLabelWidth()
    this.setValue()
  },
  watch: {
    'value': function () {
      this.inputValue = this.value
    }
  },
  methods: {
    setValue(){
      this.inputValue =this.value===this.trueValue
    },
    switchChange(e){
        if(e.detail.value){
          this.$emit('input', this.trueValue)
        }else {
          this.$emit('input', this.falseValue)
        }
    },
    setLabelWidth(){
      let differenceNum=4- this.label.length;
      if(differenceNum===2){
        this.labelWidth='2em'
      }else if(differenceNum===1){
        this.labelWidth='0.5em'
      }
    }

  }

}
</script>

<style lang="scss" scoped>
@import url("../../../static/css/en-common.css");
  .box{
    padding: 26rpx 0 24rpx 0;
    .input-box {
      display: flex;
      align-items: center;
      font-size: 32rpx;
      .input-box-left {
        color: #333333;
        width: 210rpx;
        //letter-spacing:1em;
      }

    }
  }

</style>