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

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

import { defineComponent, computed, ref } from "vue";
const _sfc_main = defineComponent({
  name: "Switch",
  props: {
    /** 绑定值 Binding value */
    modelValue: { type: [Boolean, Number, String], default: false },
    /** 是否禁用 Disabled or not */
    disabled: { type: Boolean, default: false },
    /** 开启时的值 */
    checkValue: { type: [Boolean, Number, String], default: true },
    /** 关闭时的值 */
    uncheckValue: { type: [Boolean, Number, String], default: false },
    /** 开启时的文本内容 */
    checkText: { type: String, default: "" },
    /** 关闭时的文本内容 */
    uncheckText: { type: String, default: "" },
    /** 触发改变前的回调，返回 false 则中断 */
    onBeforeOk: { type: Function, default: () => true }
  },
  emits: ["update:modelValue"],
  setup(props, { emit }) {
    const name = "bp-switch";
    const cls = computed(() => {
      let clsName = [name];
      if (props.disabled) {
        clsName.push(`${name}-disabled`);
      }
      return clsName;
    });
    const isCheck = computed(() => props.modelValue === props.checkValue);
    const loading = ref(false);
    const handleClick = async () => {
      if (props.disabled || loading.value)
        return;
      try {
        loading.value = true;
        const res = await props.onBeforeOk();
        if (!res)
          return;
        emit("update:modelValue", isCheck.value ? props.uncheckValue : props.checkValue);
      } catch (error) {
        console.log("[ Switch -onBeforeOk error]", error);
      } finally {
        loading.value = false;
      }
    };
    return {
      name,
      cls,
      isCheck,
      loading,
      handleClick
    };
  }
});
export {
  _sfc_main as default
};