@cmstops/pro-compo
Version:
[物料平台文档中心](https://arco.design/docs/material/guide)
154 lines (153 loc) • 5.33 kB
JavaScript
import { defineComponent, ref, watch, onMounted, openBlock, createElementBlock, createElementVNode, withDirectives, createVNode, unref, withModifiers, withCtx, createTextVNode, vShow, renderSlot } from "vue";
import { Button } from "@arco-design/web-vue";
import { IconCaretDown } from "@arco-design/web-vue/es/icon";
import usePopper from "../../hooks/usePopper.js";
const _hoisted_1 = { class: "filter-view-container" };
const _hoisted_2 = { class: "more-btn" };
const _hoisted_3 = { class: "right-prefix" };
const _hoisted_4 = { class: "filter-content" };
const _hoisted_5 = { class: "right" };
const _hoisted_6 = {
ref: "tempNode",
style: { "display": "none" }
};
const _sfc_main = defineComponent({
__name: "FilterGroup",
setup(__props, { expose: __expose }) {
const getRect = (el) => {
if (!el || !el.getClientRects())
return { right: 0, width: 0 };
const [{ right, width }] = el.getClientRects();
return {
right,
width
};
};
const moreBtnRef = ref();
const dpPannelRef = ref();
const { initPopper, show, visible, hide } = usePopper(dpPannelRef, moreBtnRef);
const filterItemsRef = ref();
const windowWidth = ref(0);
const filterWidth = ref(0);
const filterBorder = ref(0);
const initWidth = () => {
var _a, _b;
windowWidth.value = ((_a = document.body) == null ? void 0 : _a.clientWidth) || 0;
if (filterItemsRef.value) {
filterWidth.value = filterItemsRef.value.clientWidth || 0;
filterBorder.value = (_b = getRect(filterItemsRef.value)) == null ? void 0 : _b.right;
}
};
const initDocWidthListener = () => window.onresize = () => initWidth();
const hideElementList = ref([]);
const inNode = (el) => {
var _a, _b;
hideElementList.value.push({ width: getRect(el).width, el });
(_a = filterItemsRef.value) == null ? void 0 : _a.removeChild(el);
(_b = dpPannelRef.value) == null ? void 0 : _b.appendChild(el);
};
const outNode = () => {
var _a, _b;
if (!hideElementList.value.length || !filterItemsRef.value)
return;
const popEl = hideElementList.value.pop();
if (!popEl)
return;
const { width, el } = popEl;
el.style.width = `${width}px`;
(_a = dpPannelRef.value) == null ? void 0 : _a.removeChild(el);
(_b = filterItemsRef.value) == null ? void 0 : _b.appendChild(el);
hideElementList.value.splice(-1, 0);
};
const checkOverflow = () => {
if (!filterItemsRef.value)
return -1;
const elements = Array.from(filterItemsRef.value.childNodes);
let rightBorder = 0;
elements.forEach((item) => {
var _a;
if (!((_a = item.className) == null ? void 0 : _a.includes("filter-item-view")))
return;
const { right } = getRect(item);
if (right <= filterBorder.value) {
rightBorder = right;
return;
}
inNode(item);
});
return rightBorder;
};
const refreshPanel = () => {
const border = checkOverflow();
if (hideElementList.value.length && border !== -1) {
const spaceWidth = filterBorder.value - border;
const { width } = hideElementList.value[hideElementList.value.length - 1];
if (spaceWidth > width + 20) {
outNode();
}
}
};
watch(
() => windowWidth.value,
() => refreshPanel()
);
onMounted(() => {
initDocWidthListener();
initPopper();
initWidth();
setTimeout(() => {
refreshPanel();
});
});
__expose({
refreshPanel
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createElementVNode("div", {
ref_key: "moreBtnRef",
ref: moreBtnRef
}, [
withDirectives(createVNode(unref(Button), {
style: { marginRight: "10px" },
onClick: _cache[0] || (_cache[0] = withModifiers(() => unref(visible) ? unref(hide)() : unref(show)(), ["stop"]))
}, {
default: withCtx(() => [
createElementVNode("span", _hoisted_3, [
_cache[1] || (_cache[1] = createTextVNode(" \u66F4\u591A\u7B5B\u9009 ")),
createVNode(unref(IconCaretDown))
])
]),
_: 1
}, 512), [
[vShow, hideElementList.value.length]
])
], 512),
withDirectives(createElementVNode("div", {
id: "dpPannelRef",
ref_key: "dpPannelRef",
ref: dpPannelRef,
class: "filter-pannel"
}, null, 512), [
[vShow, unref(visible)]
])
]),
createElementVNode("div", _hoisted_4, [
createElementVNode("div", {
ref_key: "filterItemsRef",
ref: filterItemsRef,
class: "left"
}, [
renderSlot(_ctx.$slots, "left")
], 512),
createElementVNode("div", _hoisted_5, [
renderSlot(_ctx.$slots, "right")
])
]),
createElementVNode("div", _hoisted_6, null, 512)
]);
};
}
});
export { _sfc_main as default };