@huyuchen/visual/dist/es/HuVirtualSelect/HuVirtualSelect.vue.js

## 组件环境

import { useSlots as O, ref as a, computed as D, watch as E, openBlock as n, createElementBlock as u, withModifiers as K, withDirectives as w, createElementVNode as i, withKeys as j, unref as f, vModelText as q, createVNode as S, Transition as U, withCtx as b, createBlock as G, Teleport as J, normalizeStyle as y, normalizeClass as x, toDisplayString as R, vShow as z, createCommentVNode as m, renderSlot as A, pushScopeId as L, popScopeId as P } from "vue";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
import { RecycleScroller as I } from "vue-virtual-scroller";
import Q from "./clickoutside.js";
import "./HuVirtualSelect.vue2.js";
import W from "../_virtual/_plugin-vue_export-helper.js";
const h = (e) => (L("data-v-993b7aed"), e = e(), P(), e), X = ["placeholder"], Y = ["onClick"], Z = /* @__PURE__ */ h(() => /* @__PURE__ */ i("div", { class: "popper__arrow" }, null, -1)), ee = {
  key: 0,
  class: "empty"
}, te = /* @__PURE__ */ h(() => /* @__PURE__ */ i("div", { class: "popper__arrow" }, null, -1)), le = { key: 1 }, oe = ["onClick"], se = /* @__PURE__ */ h(() => /* @__PURE__ */ i("div", { class: "popper__arrow" }, null, -1)), ie = {
  key: 0,
  class: "empty"
}, pe = /* @__PURE__ */ h(() => /* @__PURE__ */ i("div", { class: "popper__arrow" }, null, -1)), ne = {
  name: "HuVirtualSelect"
}, re = Object.assign(ne, {
  props: {
    option: {
      type: Array,
      default: () => []
    },
    value: {
      required: !0
    },
    popperAppendToBody: {
      // 是否加到body上
      type: Boolean,
      default: !0
    },
    height: {
      // 下拉框框的高度
      type: [Number, String],
      default: 180
    },
    itemHeight: {
      type: [Number, String],
      default: 34
    },
    placeholder: {
      type: String,
      default: "请输入"
    },
    keyField: {
      type: String,
      default: "id"
    }
  },
  emits: ["focus", "blur", "change"],
  setup(e, { emit: V }) {
    const r = e;
    let F = Q;
    const B = O(), _ = V, s = a(!1), k = a(-1), C = a(null), d = a(null), c = a(null), g = a(""), v = D(() => !r.option || !r.option.length);
    E(s, (t) => {
      if (t) {
        const { top: o, left: l, width: p } = C.value.getBoundingClientRect();
        c.value = {
          left: r.popperAppendToBody ? l + "px" : "0px",
          top: r.popperAppendToBody ? o + 24 + "px" : "24px",
          width: (r.popperAppendToBody, p + "px"),
          height: r.height + "px"
        };
      }
    });
    const N = (t) => {
      s.value = !0, _("focus", t);
    }, $ = (t) => {
      _("blur", t);
    }, T = (t, o) => {
      k.value = t, g.value = o.label, s.value = !1, _("change", t, o);
    }, H = () => {
      console.warn("此处使用了el-puls的自定义指令：click-out-side"), s.value = !1;
    };
    return (t, o) => (n(), u("div", {
      class: "hu_select",
      onClick: o[2] || (o[2] = K((...l) => t.toggleMenu && t.toggleMenu(...l), ["stop"]))
    }, [
      w(i("input", {
        class: "hu_select_input",
        type: "text",
        ref_key: "referenceRef",
        ref: C,
        onFocus: N,
        onBlur: $,
        placeholder: e.placeholder,
        readonly: "",
        onKeydown: o[0] || (o[0] = j((l) => s.value = !1, ["tab"])),
        "onUpdate:modelValue": o[1] || (o[1] = (l) => g.value = l)
      }, null, 40, X), [
        [f(F), H, d.value],
        [q, g.value]
      ]),
      S(U, { name: "el-zoom-in-top" }, {
        default: b(() => [
          e.popperAppendToBody ? (n(), G(J, {
            key: 0,
            to: "body"
          }, [
            w(i("div", {
              class: "hl_popper",
              ref_key: "popperRef",
              ref: d,
              style: y(c.value || null)
            }, [
              S(f(I), {
                class: "scroller",
                items: e.option,
                "item-size": e.itemHeight,
                "key-field": e.keyField
              }, {
                default: b(({ item: l, index: p }) => [
                  i("div", {
                    class: x(["li", p === k.value ? "active-li" : ""]),
                    onClick: (M) => T(p, l)
                  }, R(l.label), 11, Y)
                ]),
                _: 1
              }, 8, ["items", "item-size", "key-field"]),
              Z
            ], 4), [
              [z, s.value && !v.value]
            ]),
            s.value && v.value ? (n(), u("div", {
              key: 0,
              class: "hl_popper",
              ref_key: "popperRef",
              ref: d,
              style: y(c.value || null)
            }, [
              f(B).empty ? m("", !0) : (n(), u("div", ee, "草率的无数据")),
              A(t.$slots, "empty", {}, void 0, !0),
              te
            ], 4)) : m("", !0)
          ])) : (n(), u("template", le, [
            w(i("div", {
              class: "hl_popper",
              ref_key: "popperRef",
              ref: d,
              style: y(c.value || null)
            }, [
              S(f(I), {
                class: "scroller",
                items: e.option,
                "item-size": e.itemHeight,
                "key-field": e.keyField
              }, {
                default: b(({ item: l, index: p }) => [
                  i("div", {
                    class: x(["li", p === k.value ? "active-li" : ""]),
                    onClick: (M) => T(p, l)
                  }, R(l.label), 11, oe)
                ]),
                _: 1
              }, 8, ["items", "item-size", "key-field"]),
              se
            ], 4), [
              [z, s.value && !v.value]
            ]),
            s.value && v.value ? (n(), u("div", {
              key: 0,
              class: "hl_popper",
              ref_key: "popperRef",
              ref: d,
              style: y(c.value || null)
            }, [
              f(B).empty ? m("", !0) : (n(), u("div", ie, "草率的无数据")),
              A(t.$slots, "empty", {}, void 0, !0),
              pe
            ], 4)) : m("", !0)
          ]))
        ]),
        _: 3
      })
    ]));
  }
}), ye = /* @__PURE__ */ W(re, [["__scopeId", "data-v-993b7aed"]]);
export {
  ye as default
};