nutui/src/packages/checkbox/index.vue

<template>
  <view>
    <label :class="['nut-checkbox', 'nut-checkbox-size-' + currentSize]">
      <input
        type="checkbox"
        :name="name"
        :class="{ 'nut-checkbox-ani': isAnimated }"
        :disabled="isDisabled"
        :checked.prop="isChecked"
        :value="submittedValue"
        @change="changeEvt"
      />
      <span class="nut-checkbox-label" v-if="label">
        {{ label }}
      </span>
      <span class="nut-checkbox-label" v-else>
        <slot></slot>
      </span>
    </label>
  </view>
</template>
<script lang="ts">
import {
  reactive,
  ref,
  toRefs,
  watch,
  watchEffect,
  computed,
  getCurrentInstance,
  inject
} from 'vue';
import { createComponent } from '@/utils/create';
const { componentName, create } = createComponent('checkbox');

export default create({
  props: {
    name: {
      type: String
    },
    size: {
      type: [String, Number, Boolean],
      default: 'base'
    },
    label: {
      type: String,
      default: ''
    },
    modelValue: {
      required: true
    },
    trueValue: {
      default: true
    },
    falseValue: {
      default: false
    },
    submittedValue: {
      type: String,
      default: 'on' // HTML default
    },
    checked: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    animation: {
      type: Boolean,
      default: true
    }
  },
  components: {},
  setup(props, { emit }) {
    const parentGroup = inject('checkboxgroup', {
      parentNode: false,
      changeVal: val => {
        console.log();
      }
    });
    const parentProps = getCurrentInstance()?.parent?.props;

    const isChecked = computed(() => {
      if (parentGroup && parentGroup.parentNode) {
        const choosedVal = parentProps?.modelValue;
        const chooseFlag =
          (choosedVal as any).indexOf(props.label) == -1 ? false : true;
        return chooseFlag;
      } else {
        const isCheckedVal =
          props.modelValue == props.trueValue || props.checked;
        return isCheckedVal;
      }
    });
    // const isCheckedVal = props.modelValue == props.trueValue || props.checked;
    // const isChecked = ref(isCheckedVal);
    const isObject = obj => {
      return obj !== null && typeof obj === 'object';
    };

    // const looseEqual = (a, b) => {
    //   return (
    //     a == b ||
    //     (isObject(a) && isObject(b)
    //       ? JSON.stringify(a) === JSON.stringify(b)
    //       : false)
    //   );
    // };

    const isDisabled = computed(() => {
      if (parentGroup && parentGroup.parentNode) {
        return parentProps?.disabled;
      } else {
        return props.disabled;
      }
    });

    const currentSize = computed(() => {
      if (parentGroup && parentGroup.parentNode) {
        return parentProps?.size;
      } else {
        return props.size;
      }
    });

    const isAnimated = computed(() => {
      if (parentGroup && parentGroup.parentNode) {
        return parentProps?.animated;
      } else {
        return props.animation;
      }
    });

    const { label, name, submittedValue } = reactive(props);

    const setParentValue = checked => {
      // const { label } = props;
      // const { max, modelValue } = parentProps?.modelValue;
      const modelValue = parentProps?.modelValue;
      const value = (modelValue as any).slice();
      if (checked) {
        if (value.indexOf(label) === -1) {
          value.push(label);
          parentGroup?.changeVal(value);
        }
      } else {
        const index = value.indexOf(label);
        if (index !== -1) {
          value.splice(index, 1);
          parentGroup?.changeVal(value);
        }
      }
    };

    const changeEvt = (event: any) => {
      event?.stopPropagation();
      const isCheck: boolean = event.target.checked;
      if (isDisabled.value) {
        return false;
      }
      if (parentGroup.parentNode) {
        setParentValue(isCheck);
        return false;
      }
      emit('update:modelValue', isCheck);
      emit(
        'input',
        isCheck ? props.trueValue : props.falseValue,
        props.label,
        event
      );
      if (isChecked.value !== isCheck) {
        emit(
          'change',
          isCheck ? props.trueValue : props.falseValue,
          props.label,
          event
        );
      }
    };

    return {
      currentSize,
      label,
      name,
      isDisabled,
      submittedValue,
      isAnimated,
      isChecked,
      changeEvt
    };
  }
});
</script>

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