birdpaper-ui/es/select/src/option.vue2.js

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

import { defineComponent, ref, useSlots, reactive, computed, watch, inject } from "vue";
import { SelectOption, selectInjectionKey } from "./type.js";
const _sfc_main = defineComponent({
  name: "Option",
  props: {
    /** 选项的值 */
    value: { type: [String, Number], default: "" },
    /** 选项文本内容 */
    label: { type: String, default: "" },
    /** 是否禁用 Disabled or not */
    disabled: { type: Boolean, default: false }
  },
  setup(props) {
    const name = "bp-option";
    const ctx = ref();
    const slot = useSlots();
    const option = reactive(new SelectOption());
    const init = () => {
      var _a;
      ctx.value = inject(selectInjectionKey, null);
      option.label = props.label || ((_a = slot.default) == null ? void 0 : _a.call(slot)[0].children);
      option.value = props.value;
    };
    const clsName = computed(() => {
      let cls = [`${name}-item`];
      if (ctx.value.currentSelect.value === props.value)
        cls.push(`${name}-active`);
      if (props.disabled)
        cls.push(`${name}-disabled`);
      return cls;
    });
    const handleClick = () => {
      var _a;
      if (props.disabled)
        return;
      (_a = ctx.value) == null ? void 0 : _a.onSelect(option.value, { ...option });
    };
    watch(
      () => props,
      () => {
        init();
      },
      {
        immediate: true
      }
    );
    return {
      name,
      clsName,
      handleClick
    };
  }
});
export {
  _sfc_main as default
};