@cmstops/pro-compo
Version:
[物料平台文档中心](https://arco.design/docs/material/guide)
185 lines (184 loc) • 6.43 kB
JavaScript
import { defineComponent, ref, watch, onMounted, openBlock, createElementBlock, createElementVNode, renderSlot, withDirectives, createVNode, unref, withModifiers, withCtx, createTextVNode, vShow } from "vue";
import { Button } from "@arco-design/web-vue";
import { IconCaretDown } from "@arco-design/web-vue/es/icon";
import { createPopper } from "@popperjs/core";
const _hoisted_1 = { class: "filter-view-container" };
const _hoisted_2 = { class: "filter-search" };
const _hoisted_3 = { class: "more-btn" };
const _hoisted_4 = { class: "right-prefix" };
const _hoisted_5 = { class: "filter-content" };
const _hoisted_6 = { class: "right" };
const _hoisted_7 = {
ref: "tempNode",
style: { "display": "none" }
};
const _sfc_main = defineComponent({
__name: "FilterGroup",
setup(__props) {
const documentWidth = ref(0);
const overflowWidth = ref(0);
watch(
() => documentWidth.value,
(n) => checkOverflow()
);
watch(
() => overflowWidth.value,
(n) => setPannelItem()
);
const initDocWidthListener = function() {
window.onresize = (() => {
return () => {
documentWidth.value = document.body.clientWidth;
};
})();
};
const filterItemsRef = ref();
const moreBtnRef = ref();
const dpPannelRef = ref();
const initPopper = function() {
createPopper(moreBtnRef.value, dpPannelRef.value, {
placement: "bottom-start",
modifiers: [{ name: "offset", options: { offset: [-40, 10] } }]
});
};
const popperShowFlag = ref(false);
function showPopper() {
popperShowFlag.value = true;
window.onclick = hidePopper;
}
function hidePopper() {
popperShowFlag.value = false;
}
const itemNodeArr = ref([]);
const itemWidthArr = ref([]);
const itemArr = ref([]);
function checkOverflow() {
if (!filterItemsRef.value)
return;
const parent = filterItemsRef.value.parentNode;
if (!itemNodeArr.value.length) {
itemNodeArr.value = mapNodes(filterItemsRef.value.childNodes);
itemWidthArr.value = itemNodeArr.value.map((node) => node.clientWidth + 10);
itemArr.value = itemWidthArr.value.map((_, idx) => idx);
}
const parentWidth = parent.clientWidth;
const leftWidth = getArrWidth(itemWidthArr.value);
const rightWidth = parent.childNodes[parent.childNodes.length - 1].clientWidth;
overflowWidth.value = leftWidth + rightWidth - parentWidth;
}
function mapNodes(nodes) {
const nodeArr = [];
for (let i = 0; i < nodes.length; i++) {
const element = nodes[i];
nodeArr.push(element);
}
return nodeArr.filter((item) => item.clientWidth);
}
function getArrWidth(arr) {
return arr.reduce((prev, cur) => prev + cur, 0);
}
const pannelArray = ref("");
watch(
() => pannelArray.value,
(n, o) => refreshPannel(n, o)
);
function refreshPannel(newStr, oldStr) {
const nArr = newStr ? newStr.split(",") : [];
const oArr = oldStr ? oldStr.split(",") : [];
if (nArr.length && nArr.length > oArr.length) {
diff(nArr, oArr).forEach((index) => inNode(parseInt(index, 10)));
} else if (nArr.length >= 0 && nArr.length < oArr.length) {
diff(oArr, nArr).forEach((index) => outNode(parseInt(index, 10)));
}
}
const diff = (arr1, arr2) => {
const diff2 = [];
for (let i = 0; i < arr1.length; i++) {
const item = arr1[i];
if (!arr2.includes(item))
diff2.push(item);
}
return diff2;
};
function inNode(index) {
var _a, _b, _c;
const node = mapNodes((_a = filterItemsRef.value) == null ? void 0 : _a.childNodes)[index];
const temp = document.createElement("div");
temp.style.width = `${itemWidthArr.value[index]}px`;
temp.style.position = "absolute";
temp.style.left = `${50}px`;
(_b = filterItemsRef.value) == null ? void 0 : _b.replaceChild(temp, node);
(_c = dpPannelRef.value) == null ? void 0 : _c.appendChild(node);
}
function outNode(index) {
var _a;
const node = itemNodeArr.value[index];
(_a = filterItemsRef.value) == null ? void 0 : _a.replaceChild(
node,
mapNodes(filterItemsRef.value.childNodes)[index]
);
}
function setPannelItem() {
let inPannelNum = 0;
if (overflowWidth.value > 0) {
const avgWidth = 120;
inPannelNum = Math.ceil((overflowWidth.value + 200) / avgWidth);
}
pannelArray.value = itemArr.value.slice(0, inPannelNum).join(",");
}
onMounted(() => {
initDocWidthListener();
initPopper();
setTimeout(() => checkOverflow());
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
renderSlot(_ctx.$slots, "search")
]),
createElementVNode("div", _hoisted_3, [
createElementVNode("div", {
ref_key: "moreBtnRef",
ref: moreBtnRef
}, [
withDirectives(createVNode(unref(Button), {
onClick: withModifiers(showPopper, ["stop"])
}, {
default: withCtx(() => [
createElementVNode("span", _hoisted_4, [
_cache[0] || (_cache[0] = createTextVNode(" \u66F4\u591A\u7B5B\u9009 ")),
createVNode(unref(IconCaretDown))
])
]),
_: 1
}, 512), [
[vShow, pannelArray.value]
])
], 512),
withDirectives(createElementVNode("div", {
id: "dpPannelRef",
ref_key: "dpPannelRef",
ref: dpPannelRef,
class: "filter-pannel"
}, null, 512), [
[vShow, popperShowFlag.value]
])
]),
createElementVNode("div", _hoisted_5, [
createElementVNode("div", {
ref_key: "filterItemsRef",
ref: filterItemsRef,
class: "left"
}, [
renderSlot(_ctx.$slots, "left")
], 512),
createElementVNode("div", _hoisted_6, [
renderSlot(_ctx.$slots, "right")
])
]),
createElementVNode("div", _hoisted_7, null, 512)
]);
};
}
});
export { _sfc_main as default };