@ued_fpi/data-visual/dist/es/wgms/src/common/select-panel.vue.mjs

<br /> <br /> <div style="text-align:center"> <b style="font-size:30px">@ued_fpi/data-visual</b> <p>基于Vite4+TypeScript的Vue3大屏组件库开发框架</p> <img style="display:inline" src="https://img.shields.io/npm/v/@ued_fpi/data-visual" />

import { ElScrollbar } from 'element-plus/es';
import 'element-plus/es/components/base/style/css';
import 'element-plus/es/components/scrollbar/style/css';
import { defineComponent, reactive, watch, onMounted, onUnmounted, toRefs, openBlock, createElementBlock, createElementVNode, normalizeClass, normalizeStyle, withModifiers, withDirectives, toDisplayString, unref, vShow, createCommentVNode, createVNode, Transition, withCtx, Fragment, renderList } from 'vue';

const _hoisted_1 = { class: "dv-wgms-container-select" };
const _hoisted_2 = ["onClick"];
const _hoisted_3 = ["onClick"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "select-panel",
  props: {
    /**
     * 配置项用于生成表格
     */
    option: {
      type: Array,
      default: () => {
        return [];
      }
    },
    /**
     * 默认选择index
     */
    defaultSelect: {
      type: Number,
      default: void 0
    },
    /**
     * 默认选择 defaultValue 优先级    defaultSelect>defaultValue
     */
    defaultValue: {
      type: [Number, String],
      default: void 0
    },
    boxStyle: {
      type: Object,
      default: void 0
    },
    labelStyle: {
      type: Object,
      default: void 0
    },
    selectBoxStyle: {
      type: Object,
      default: void 0
    },
    selectItemStyle: {
      type: Object,
      default: void 0
    },
    placeholder: {
      type: String,
      default: ""
    },
    /**
     * 箭头类型
     */
    arrow: {
      type: String,
      default: "box"
    },
    /**
     * 箭头大小比例
     */
    arrowScale: {
      type: Number,
      default: 1
    },
    /**
     * 是否显示背景
     */
    isShowBack: {
      type: Boolean,
      default: false
    }
  },
  emits: ["change"],
  setup(__props, { emit }) {
    const props = __props;
    const data = reactive({
      isShowOption: false,
      label: "--",
      activeIndex: 0,
      width: "65px",
      id: `optionList${Math.random()}`
    });
    watch(() => props.option, (val) => {
      if (val && val.length) {
        if (props.defaultSelect === -1) {
          data.activeIndex = props.defaultSelect;
        } else if (typeof props.defaultSelect === "number") {
          const currData = val[props.defaultSelect];
          data.label = currData.label;
          data.activeIndex = props.defaultSelect;
        } else {
          const index = props.defaultValue === void 0 ? 0 : val.findIndex((item) => item.value === props.defaultValue);
          data.label = val[~index ? index : 0].label;
          data.activeIndex = ~index ? index : 0;
        }
      }
    }, { deep: true, immediate: true });
    watch(() => props.defaultValue, (val) => {
      const index = val === void 0 ? 0 : props.option.findIndex((item) => item.value === val);
      data.label = props.option[~index ? index : 0].label;
      data.activeIndex = ~index ? index : 0;
    });
    let listener;
    onMounted(() => {
      listener = document.addEventListener("mouseup", (e) => {
        const pop = document.getElementById(data.id);
        if (data.isShowOption && pop) {
          if (!pop.contains(e.target)) {
            setTimeout(() => {
              data.isShowOption = false;
            });
          }
        }
      });
    });
    onUnmounted(() => {
      listener && listener.removeEventListener();
    });
    const clickSelect = () => {
      data.isShowOption = !data.isShowOption;
    };
    const clickCurrItem = (item, index) => {
      data.activeIndex = index;
      data.isShowOption = false;
      data.label = item.label;
      emit("change", item, index);
    };
    const { isShowOption, label, activeIndex, id } = toRefs(data);
    return (_ctx, _cache) => {
      const _component_el_scrollbar = ElScrollbar;
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createElementVNode("div", {
          class: normalizeClass(["select-box", [__props.isShowBack ? "select-box-father" : ""]]),
          style: normalizeStyle(__props.boxStyle),
          onClick: withModifiers(clickSelect, ["stop"])
        }, [
          createElementVNode("div", {
            class: "label",
            style: normalizeStyle(__props.labelStyle)
          }, [
            withDirectives(createElementVNode("span", null, toDisplayString(unref(label)), 513), [
              [vShow, unref(activeIndex) !== -1]
            ]),
            withDirectives(createElementVNode("span", { class: "placeholder" }, toDisplayString(__props.placeholder), 513), [
              [vShow, unref(activeIndex) === -1]
            ])
          ], 4),
          __props.arrow === "box" ? (openBlock(), createElementBlock("div", {
            key: 0,
            class: normalizeClass(["arrow-white tran05", unref(isShowOption) ? "ro-180" : ""])
          }, null, 2)) : createCommentVNode("", true),
          __props.arrow === "line" ? (openBlock(), createElementBlock("div", {
            key: 1,
            class: normalizeClass(["arrow-line tran05", unref(isShowOption) ? "arrow-line-ro" : ""])
          }, null, 2)) : createCommentVNode("", true)
        ], 14, _hoisted_2),
        createVNode(Transition, { name: "height-to-down" }, {
          default: withCtx(() => [
            withDirectives(createVNode(_component_el_scrollbar, {
              id: unref(id),
              class: "option-list",
              style: normalizeStyle(__props.selectBoxStyle)
            }, {
              default: withCtx(() => [
                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.option, (item, index) => {
                  return openBlock(), createElementBlock("div", {
                    key: index,
                    class: normalizeClass(["select-item", [unref(activeIndex) === index ? "select-item-check" : ""]]),
                    style: normalizeStyle(__props.selectItemStyle),
                    onClick: ($event) => clickCurrItem(item, index)
                  }, toDisplayString(item.selectLabel || item.label), 15, _hoisted_3);
                }), 128))
              ]),
              _: 1
            }, 8, ["id", "style"]), [
              [vShow, unref(isShowOption)]
            ])
          ]),
          _: 1
        })
      ]);
    };
  }
});

export { _sfc_main as default };