birdpaper-ui/es/checkbox/src/checkbox.vue2.js

一个通用的 vue3 UI组件库。A common vue3 UI component library.

import { defineComponent, computed } from "vue";
import { IconCheckLine, IconSubtractLine } from "birdpaper-icon";
const _sfc_main = defineComponent({
  name: "Checkbox",
  props: {
    /** 绑定值 Binding value */
    modelValue: { type: [Boolean, Array], default: false },
    /** 是否禁用 Disabled or not */
    disabled: { type: Boolean, default: false },
    /** 复选框的值 */
    value: { type: [String, Number] },
    /** 是否为不确定状态 */
    indeterminate: { type: Boolean, default: false }
  },
  components: { IconCheckLine, IconSubtractLine },
  emits: ["update:modelValue", "change"],
  setup(props, { emit }) {
    const name = "bp-checkbox";
    const cls = computed(() => {
      let clsName = [name];
      if (props.disabled) {
        clsName.push(`${name}-disabled`);
      }
      return clsName;
    });
    const isCheck = computed(() => {
      if (Array.isArray(props.modelValue)) {
        if (!props.value)
          return false;
        return props.modelValue.includes(props.value);
      }
      return props.modelValue;
    });
    const handleClick = () => {
      if (props.disabled)
        return;
      if (Array.isArray(props.modelValue)) {
        if (!props.value)
          return false;
        let arr = JSON.parse(JSON.stringify(props.modelValue));
        const index = arr.indexOf(props.value);
        index === -1 ? arr.push(props.value) : arr.splice(index, 1);
        emit("update:modelValue", arr);
        return emit("change", arr);
      }
      emit("update:modelValue", !props.modelValue);
      return emit("change", !props.modelValue);
    };
    return {
      cls,
      name,
      isCheck,
      handleClick
    };
  }
});
export {
  _sfc_main as default
};