@huyuchen/visual
Version:
## 组件环境
91 lines (90 loc) • 3.35 kB
JavaScript
import { useAttrs as I, toRefs as V, useSlots as P, ref as u, computed as g, onMounted as j, openBlock as l, createElementBlock as a, createVNode as z, unref as _, mergeProps as B, createSlots as E, withCtx as f, renderSlot as m, renderList as M, nextTick as N, pushScopeId as H, popScopeId as L, createElementVNode as v } from "vue";
import { ElSelectV2 as U } from "element-plus";
import "element-plus/theme-chalk/el-select-v2.css";
import "./HuVirtualSelectPage.vue2.js";
import "./HuVirtualSelectPage.vue3.js";
import $ from "../_virtual/_plugin-vue_export-helper.js";
const h = (s) => (H("data-v-d5d80d41"), s = s(), L(), s), q = {
key: 0,
class: "hu_select_loading"
}, A = { key: 0 }, C = /* @__PURE__ */ h(() => /* @__PURE__ */ v("div", { class: "loader" }, null, -1)), R = /* @__PURE__ */ h(() => /* @__PURE__ */ v("span", null, "加载中", -1)), T = [
C,
R
], D = { key: 1 }, F = Object.assign({
name: "HuVirtualSelectPage"
// inheritAttrs: false,
}, {
__name: "HuVirtualSelectPage",
props: {
loading: {
// 加载loading的判断--避免重复加载
type: Boolean,
default: !1
},
pagesOptions: {
type: Object,
default: () => ({ current: "current", pageSize: "pageSize", total: "total" })
},
pages: {
type: Object,
default: () => ({
[pagesOptions.current]: 1,
[pagesOptions.pageSize]: 10,
[pagesOptions.total]: 0
})
// validator(value, pro) {
// console.log(Reflect.ownKeys(value), "value")
// return ["success", "warning", "danger"].includes(value)
// },
}
},
emits: ["pullUp"],
setup(s, { emit: S }) {
const O = S, t = s, r = I(), { options: b, props: y, ...G } = V(r), x = P(), p = u([]), i = g(() => t.pages[t.pagesOptions.total] >= (t.pages[t.pagesOptions.current] - 1) * t.pages[t.pagesOptions.pageSize]), c = g(() => {
const e = y || { value: "value", label: "label", options: "options", disabled: "disabled" }, o = u([{ [e.label]: "loading", [e.value]: "loading" }]);
return b.value.concat(o.value);
}), k = (e) => {
const o = e === c.value.length - 1;
return o && N(() => w()), o;
};
j(() => {
p.value = Object.keys(x).filter((e) => e !== "default");
});
const w = async () => {
const e = document.querySelector(".hu_select_loading");
e && new IntersectionObserver(
(n) => {
n[0].isIntersecting && !t.loading && i.value && O("pullUp");
},
{
root: null,
rootMargin: "0px 0px 0px 0px",
threshold: 0
}
).observe(e);
};
return (e, o) => (l(), a("div", null, [
z(_(U), B({ style: { width: "240px" } }, _(r), {
options: c.value,
"popper-class": "hu_select-v2-popper"
}), E({
default: f(({ item: n, index: d }) => [
k(d) ? (l(), a("div", q, [
i.value ? (l(), a("div", A, T)) : (l(), a("div", D, "到底了~"))
])) : m(e.$slots, "default", { key: 1 }, void 0, !0)
]),
_: 2
}, [
M(p.value, (n, d) => ({
name: n,
fn: f(() => [
m(e.$slots, n, {}, void 0, !0)
])
}))
]), 1040, ["options"])
]));
}
}), Z = /* @__PURE__ */ $(F, [["__scopeId", "data-v-d5d80d41"]]);
export {
Z as default
};