crm-mobile/components/wk-form/wk-field-bool.vue

<template>
  <view class="wk-field wk-field-bool" @click.stop>
    <view v-if="_label" class="wk-field__label">
      <view v-if="field.isNull === 1" class="line" />
      {{ _label }}
    </view>
    <view class="wk-field__body">
      <switch
        :checked="checkedStatus"
        :disabled="field.disabled"
        color="#007AFF"
        class="switch-core"
        @change="handleChange" />
    </view>
  </view>
</template>

<script>
  import mixins from './mixins'
	
  export default {
    name: 'WkFieldBool',
    mixins: [mixins],
    data() {
      return {
        checkedStatus: false
      }
    },
    watch: {
      formValue: {
        handler() {
          this.checkedStatus = Boolean(Number(this.formValue))
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      handleChange() {
        console.log('bool change', this.checkedStatus)
        this.checkedStatus = !this.checkedStatus
        const val = this.checkedStatus ? '1' : '0'
        this.$emit('input', val)
        this.$emit('change', {
          index: this.index,
          field: this.field,
          value: val
        })
      }
    }
  }
</script>

<style scoped lang="scss">
	@import './wkField.scss';

	.wk-field-bool {
		@include left;
		.wk-field__body {
			min-height: unset;
			border: unset;
			padding: 10rpx 0;
			@include right;
			
			.switch-core {
				transform: translateX(10%) scale(0.8);
			}
		}
	}
</style>