init
This commit is contained in:
@@ -0,0 +1,636 @@
|
||||
import { w as withInstall } from "../badge/index2.js";
|
||||
import { defineComponent, ref, onMounted, openBlock, createBlock, Teleport, renderSlot, onUpdated, useSlots, useAttrs, inject, shallowRef, reactive, toRefs, computed, onBeforeUnmount, watch, provide, createElementBlock, Fragment, createVNode, unref, mergeProps, withCtx, normalizeClass, normalizeStyle, createCommentVNode, cloneVNode, h, nextTick } from "vue";
|
||||
import { u as useWindowSize, a as useResizeObserver, o as onClickOutside, b as useThrottleFn } from "../_chunks/@vueuse/index.js";
|
||||
var index = /* @__PURE__ */ (() => ".layui-dropdown{position:relative;display:inline-block}.layui-dropdown-content{position:absolute;z-index:99999;background-color:#fff;box-sizing:border-box;border:1px solid #e4e7ed;border-radius:2px;box-shadow:0 2px 12px #0000001a}.layui-dropdown-content>.layui-dropdown-menu{border-radius:var(--global-border-radius);margin:5px 0}.layui-dropdown-content .layui-menu{position:relative;background-color:#fff}.layui-dropdown-content .layui-menu li,.layui-dropdown-content .layui-menu-body-title a{padding:5px 15px}.layui-dropdown-content .layui-menu li{position:relative;display:flex;margin:1px 0;line-height:26px;color:#000c;font-size:14px;white-space:nowrap;cursor:pointer}.layui-dropdown-content .layui-menu li:hover{background-color:var(--global-neutral-color-2)}.layui-dropdown-content .layui-menu-body-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layui-dropdown-menu-prefix{margin-right:8px}.layui-dropdown-menu-suffix{margin-left:15px}.layui-dropdown-content .layui-menu li.layui-disabled:hover{background-color:inherit}\n")();
|
||||
const dropdownInjectionKey = Symbol("dropdownInjectKey");
|
||||
const __default__$1 = {
|
||||
name: "TeleportWrapper"
|
||||
};
|
||||
const _sfc_main$1 = defineComponent({
|
||||
...__default__$1,
|
||||
props: {
|
||||
to: { default: "" },
|
||||
disabled: { type: Boolean, default: false }
|
||||
},
|
||||
setup(__props) {
|
||||
const props = __props;
|
||||
const target = ref(null);
|
||||
onMounted(() => {
|
||||
const observer = new MutationObserver((mutationList, observer2) => {
|
||||
for (const mutation of mutationList) {
|
||||
if (mutation.type !== "childList")
|
||||
continue;
|
||||
const el = document.querySelector(props.to);
|
||||
if (!el)
|
||||
continue;
|
||||
target.value = el;
|
||||
observer2.disconnect();
|
||||
break;
|
||||
}
|
||||
});
|
||||
observer.observe(document, { childList: true, subtree: true });
|
||||
return () => observer.disconnect();
|
||||
});
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createBlock(Teleport, {
|
||||
to: target.value,
|
||||
disabled: !target.value || __props.disabled
|
||||
}, [
|
||||
renderSlot(_ctx.$slots, "default")
|
||||
], 8, ["to", "disabled"]);
|
||||
};
|
||||
}
|
||||
});
|
||||
const isScrollElement = (element) => {
|
||||
return element.scrollHeight > element.offsetHeight || element.scrollWidth > element.offsetWidth;
|
||||
};
|
||||
const getScrollElements = (container) => {
|
||||
var _a;
|
||||
const scrollElements = [];
|
||||
let element = container;
|
||||
while (element && element !== document.documentElement) {
|
||||
if (isScrollElement(element)) {
|
||||
scrollElements.push(element);
|
||||
}
|
||||
element = (_a = element.parentElement) != null ? _a : void 0;
|
||||
}
|
||||
return scrollElements;
|
||||
};
|
||||
const isElement = (vn) => {
|
||||
return Boolean(vn && vn.shapeFlag & 1);
|
||||
};
|
||||
const isComponent = (vn, type) => {
|
||||
return Boolean(vn && vn.shapeFlag & 6);
|
||||
};
|
||||
const isArrayChildren = (vn, children) => {
|
||||
return Boolean(vn && vn.shapeFlag & 16);
|
||||
};
|
||||
const getChildrenArray = (vn) => {
|
||||
if (isArrayChildren(vn, vn.children)) {
|
||||
return vn.children;
|
||||
}
|
||||
if (Array.isArray(vn)) {
|
||||
return vn;
|
||||
}
|
||||
return void 0;
|
||||
};
|
||||
const getFirstElementFromVNode = (vn) => {
|
||||
var _a, _b;
|
||||
if (isElement(vn)) {
|
||||
return vn.el;
|
||||
}
|
||||
if (isComponent(vn)) {
|
||||
if (((_a = vn.el) == null ? void 0 : _a.nodeType) === 1) {
|
||||
return vn.el;
|
||||
}
|
||||
if ((_b = vn.component) == null ? void 0 : _b.subTree) {
|
||||
const ele = getFirstElementFromVNode(vn.component.subTree);
|
||||
if (ele)
|
||||
return ele;
|
||||
}
|
||||
} else {
|
||||
const children = getChildrenArray(vn);
|
||||
return getFirstElementFromChildren(children);
|
||||
}
|
||||
return void 0;
|
||||
};
|
||||
const getFirstElementFromChildren = (children) => {
|
||||
if (children && children.length > 0) {
|
||||
for (const child of children) {
|
||||
const element = getFirstElementFromVNode(child);
|
||||
if (element)
|
||||
return element;
|
||||
}
|
||||
}
|
||||
return void 0;
|
||||
};
|
||||
const useFirstElement = () => {
|
||||
const children = {};
|
||||
const firstElement = ref();
|
||||
const getFirstElement = () => {
|
||||
const element = getFirstElementFromChildren(children.value);
|
||||
if (element !== firstElement.value) {
|
||||
firstElement.value = element;
|
||||
}
|
||||
};
|
||||
onMounted(() => getFirstElement());
|
||||
onUpdated(() => getFirstElement());
|
||||
return {
|
||||
children,
|
||||
firstElement
|
||||
};
|
||||
};
|
||||
const transformPlacement = (placement) => {
|
||||
const shouldTransform = placement.includes("-");
|
||||
const placementMap = {
|
||||
top: "start",
|
||||
left: "start",
|
||||
bottom: "end",
|
||||
right: "end"
|
||||
};
|
||||
if (shouldTransform) {
|
||||
const separated = placement.split("-");
|
||||
return `${separated[0]}-${placementMap[separated[1]] || separated[1]}`;
|
||||
}
|
||||
return placement;
|
||||
};
|
||||
var RenderFunction = defineComponent({
|
||||
name: "RenderFunction",
|
||||
props: {
|
||||
renderFunc: {
|
||||
type: Function,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
setup(props, ctx) {
|
||||
return () => {
|
||||
if (typeof props.renderFunc !== "function") {
|
||||
return null;
|
||||
}
|
||||
return props.renderFunc(ctx.attrs);
|
||||
};
|
||||
}
|
||||
});
|
||||
const __default__ = {
|
||||
name: "LayDropdown",
|
||||
inheritAttrs: false
|
||||
};
|
||||
const _sfc_main = defineComponent({
|
||||
...__default__,
|
||||
props: {
|
||||
visible: { type: Boolean, default: false },
|
||||
trigger: { default: "click" },
|
||||
placement: { default: "bottom-start" },
|
||||
disabled: { type: Boolean, default: false },
|
||||
autoFitPosition: { type: Boolean, default: true },
|
||||
autoFitWidth: { type: Boolean, default: false },
|
||||
autoFitMinWidth: { type: Boolean, default: true },
|
||||
updateAtScroll: { type: Boolean, default: false },
|
||||
autoFixPosition: { type: Boolean, default: true },
|
||||
clickToClose: { type: Boolean, default: true },
|
||||
blurToClose: { type: Boolean, default: true },
|
||||
clickOutsideToClose: { type: Boolean, default: true },
|
||||
contentOffset: { default: 2 },
|
||||
mouseEnterDelay: { default: 150 },
|
||||
mouseLeaveDelay: { default: 150 },
|
||||
focusDelay: { default: 150 },
|
||||
alignPoint: { type: Boolean, default: false },
|
||||
contentClass: null,
|
||||
contentStyle: null,
|
||||
popupContainer: { default: "body" }
|
||||
},
|
||||
emits: ["show", "hide"],
|
||||
setup(__props, { expose, emit }) {
|
||||
const props = __props;
|
||||
const slots = useSlots();
|
||||
const attrs = useAttrs();
|
||||
const childrenRefs = /* @__PURE__ */ new Set();
|
||||
const dropdownCtx = inject(dropdownInjectionKey, void 0);
|
||||
const { children, firstElement: dropdownRef } = useFirstElement();
|
||||
const contentRef = shallowRef();
|
||||
const contentStyle = ref({});
|
||||
const { width: windowWidth, height: windowHeight } = useWindowSize();
|
||||
const mousePosition = reactive({
|
||||
x: 0,
|
||||
y: 0
|
||||
});
|
||||
const { x: mouseLeft, y: mouseTop } = toRefs(mousePosition);
|
||||
const openState = ref(false);
|
||||
let scrollElements;
|
||||
const containerRef = computed(() => {
|
||||
var _a;
|
||||
return props.popupContainer ? (_a = document.querySelector(props.popupContainer)) != null ? _a : document.body : dropdownRef.value;
|
||||
});
|
||||
const triggerMethods = computed(() => [].concat(props.trigger));
|
||||
const computedPlacement = computed(() => {
|
||||
return transformPlacement(props.placement);
|
||||
});
|
||||
let delayTimer = 0;
|
||||
const cleanDelayTimer = () => {
|
||||
if (delayTimer) {
|
||||
window.clearTimeout(delayTimer);
|
||||
delayTimer = 0;
|
||||
}
|
||||
};
|
||||
const show = (delay) => {
|
||||
if (props.disabled == false) {
|
||||
changeVisible(true, delay);
|
||||
emit("show");
|
||||
}
|
||||
};
|
||||
const hide = (delay) => {
|
||||
changeVisible(false, delay);
|
||||
emit("hide");
|
||||
};
|
||||
const toggle = () => {
|
||||
if (props.disabled == false)
|
||||
if (openState.value) {
|
||||
hide();
|
||||
} else {
|
||||
show();
|
||||
}
|
||||
};
|
||||
const changeVisible = (visible, delay) => {
|
||||
if (visible === openState.value && delayTimer === 0) {
|
||||
return;
|
||||
}
|
||||
const update = () => {
|
||||
openState.value = visible;
|
||||
nextTick(() => {
|
||||
updateContentStyle();
|
||||
});
|
||||
};
|
||||
if (delay) {
|
||||
cleanDelayTimer();
|
||||
if (visible !== openState.value) {
|
||||
delayTimer = window.setTimeout(update, delay);
|
||||
}
|
||||
} else {
|
||||
update();
|
||||
}
|
||||
};
|
||||
const getElementScrollRect = (element, containerRect) => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
return {
|
||||
top: rect.top,
|
||||
bottom: rect.bottom,
|
||||
left: rect.left,
|
||||
right: rect.right,
|
||||
width: rect.width,
|
||||
height: rect.height,
|
||||
scrollTop: rect.top - containerRect.top,
|
||||
scrollBottom: rect.bottom - containerRect.top,
|
||||
scrollLeft: rect.left - containerRect.left,
|
||||
scrollRight: rect.right - containerRect.left
|
||||
};
|
||||
};
|
||||
const getTriggerRect = () => {
|
||||
return {
|
||||
top: mouseTop.value,
|
||||
bottom: mouseTop.value,
|
||||
left: mouseLeft.value,
|
||||
right: mouseLeft.value,
|
||||
scrollTop: mouseTop.value,
|
||||
scrollBottom: mouseTop.value,
|
||||
scrollLeft: mouseLeft.value,
|
||||
scrollRight: mouseLeft.value,
|
||||
width: 0,
|
||||
height: 0
|
||||
};
|
||||
};
|
||||
const updateContentStyle = () => {
|
||||
if (!containerRef.value || !dropdownRef.value || !contentRef.value) {
|
||||
return;
|
||||
}
|
||||
const containerRect = containerRef.value.getBoundingClientRect();
|
||||
const triggerRect = props.alignPoint ? getTriggerRect() : getElementScrollRect(dropdownRef.value, containerRect);
|
||||
const contentRect = getElementScrollRect(contentRef.value, containerRect);
|
||||
const { style } = getContentStyle(computedPlacement.value, triggerRect, contentRect);
|
||||
if (props.autoFitMinWidth) {
|
||||
style.minWidth = `${triggerRect.width}px`;
|
||||
}
|
||||
if (props.autoFitWidth) {
|
||||
style.width = `${triggerRect.width}px`;
|
||||
}
|
||||
contentStyle.value = style;
|
||||
if (props.autoFitPosition) {
|
||||
nextTick(() => {
|
||||
const triggerRect2 = props.alignPoint ? getTriggerRect() : getElementScrollRect(dropdownRef.value, containerRect);
|
||||
const contentRect2 = getElementScrollRect(contentRef.value, containerRect);
|
||||
let { top, left } = style;
|
||||
top = Number(top.toString().replace("px", ""));
|
||||
left = Number(left.toString().replace("px", ""));
|
||||
const { top: fitTop, left: fitLeft } = getFitPlacement(top, left, computedPlacement.value, triggerRect2, contentRect2);
|
||||
style.top = `${fitTop}px`;
|
||||
style.left = `${fitLeft}px`;
|
||||
contentStyle.value = {
|
||||
...style
|
||||
};
|
||||
});
|
||||
}
|
||||
};
|
||||
const updateMousePosition = (e) => {
|
||||
if (props.alignPoint) {
|
||||
const { pageX, pageY } = e;
|
||||
mousePosition.x = pageX;
|
||||
mousePosition.y = pageY;
|
||||
}
|
||||
};
|
||||
const getContentStyle = (placement, triggerRect, contentRect, {
|
||||
customStyle = {}
|
||||
} = {}) => {
|
||||
let { top, left } = getContentOffset(placement, triggerRect, contentRect);
|
||||
const style = {
|
||||
top: `${top}px`,
|
||||
left: `${left}px`,
|
||||
...customStyle
|
||||
};
|
||||
return {
|
||||
style
|
||||
};
|
||||
};
|
||||
const getPosition = (placement) => {
|
||||
if (["top", "top-start", "top-end"].includes(placement)) {
|
||||
return "top";
|
||||
}
|
||||
if (["bottom", "bottom-start", "bottom-end"].includes(placement)) {
|
||||
return "bottom";
|
||||
}
|
||||
if (["left", "left-start", "left-end"].includes(placement)) {
|
||||
return "left";
|
||||
}
|
||||
if (["right", "right-start", "right-end"].includes(placement)) {
|
||||
return "right";
|
||||
}
|
||||
return "bottom";
|
||||
};
|
||||
const getFitPlacement = (top, left, placement, triggerRect, contentRect) => {
|
||||
const position = getPosition(placement);
|
||||
if (["top", "bottom"].includes(position)) {
|
||||
if (contentRect.bottom > windowHeight.value) {
|
||||
top = triggerRect.scrollTop - contentRect.height - props.contentOffset;
|
||||
}
|
||||
if (contentRect.top < 0) {
|
||||
top = triggerRect.scrollBottom + props.contentOffset;
|
||||
}
|
||||
if (contentRect.left < 0) {
|
||||
left = left + (0 - contentRect.left);
|
||||
}
|
||||
if (contentRect.right > windowWidth.value) {
|
||||
left = left - (contentRect.right - windowWidth.value);
|
||||
}
|
||||
}
|
||||
if (["left", "right"].includes(position)) {
|
||||
if (contentRect.bottom > windowHeight.value) {
|
||||
top = top - (contentRect.bottom - windowHeight.value);
|
||||
}
|
||||
if (contentRect.top < 0) {
|
||||
top = top + (0 - contentRect.top);
|
||||
}
|
||||
if (contentRect.left < 0) {
|
||||
left = triggerRect.scrollRight + props.contentOffset;
|
||||
}
|
||||
if (contentRect.right > windowWidth.value) {
|
||||
left = triggerRect.scrollLeft - contentRect.width - props.contentOffset;
|
||||
}
|
||||
}
|
||||
return {
|
||||
top,
|
||||
left
|
||||
};
|
||||
};
|
||||
const getContentOffset = (placement, triggerRect, contentRect) => {
|
||||
switch (placement) {
|
||||
case "top":
|
||||
return {
|
||||
top: triggerRect.scrollTop - contentRect.height - props.contentOffset,
|
||||
left: triggerRect.scrollLeft + Math.round((triggerRect.width - contentRect.width) / 2)
|
||||
};
|
||||
case "top-start":
|
||||
return {
|
||||
top: triggerRect.scrollTop - contentRect.height - props.contentOffset,
|
||||
left: triggerRect.scrollLeft
|
||||
};
|
||||
case "top-end":
|
||||
return {
|
||||
top: triggerRect.scrollTop - contentRect.height - props.contentOffset,
|
||||
left: triggerRect.scrollRight - contentRect.width
|
||||
};
|
||||
case "bottom":
|
||||
return {
|
||||
top: triggerRect.scrollBottom + props.contentOffset,
|
||||
left: triggerRect.scrollLeft + Math.round((triggerRect.width - contentRect.width) / 2)
|
||||
};
|
||||
case "bottom-start":
|
||||
return {
|
||||
top: triggerRect.scrollBottom + props.contentOffset,
|
||||
left: triggerRect.scrollLeft
|
||||
};
|
||||
case "bottom-end":
|
||||
return {
|
||||
top: triggerRect.scrollBottom + props.contentOffset,
|
||||
left: triggerRect.scrollRight - contentRect.width
|
||||
};
|
||||
case "right":
|
||||
return {
|
||||
top: triggerRect.scrollTop + Math.round((triggerRect.height - contentRect.height) / 2),
|
||||
left: triggerRect.scrollRight + props.contentOffset
|
||||
};
|
||||
case "right-start":
|
||||
return {
|
||||
top: triggerRect.scrollTop,
|
||||
left: triggerRect.scrollRight + props.contentOffset
|
||||
};
|
||||
case "right-end":
|
||||
return {
|
||||
top: triggerRect.scrollBottom - contentRect.height,
|
||||
left: triggerRect.scrollRight + props.contentOffset
|
||||
};
|
||||
case "left":
|
||||
return {
|
||||
top: triggerRect.scrollTop + Math.round((triggerRect.height - contentRect.height) / 2),
|
||||
left: triggerRect.scrollLeft - contentRect.width - props.contentOffset
|
||||
};
|
||||
case "left-start":
|
||||
return {
|
||||
top: triggerRect.scrollTop,
|
||||
left: triggerRect.scrollLeft - contentRect.width - props.contentOffset
|
||||
};
|
||||
case "left-end":
|
||||
return {
|
||||
top: triggerRect.scrollBottom - contentRect.height,
|
||||
left: triggerRect.scrollLeft - contentRect.width - props.contentOffset
|
||||
};
|
||||
default:
|
||||
return {
|
||||
left: 0,
|
||||
top: 0
|
||||
};
|
||||
}
|
||||
};
|
||||
const handleScroll = useThrottleFn(() => {
|
||||
if (openState.value) {
|
||||
updateContentStyle();
|
||||
}
|
||||
}, 10);
|
||||
const handleClick = (e) => {
|
||||
if (props.disabled || openState.value && !props.clickToClose) {
|
||||
return;
|
||||
}
|
||||
if (triggerMethods.value.includes("click")) {
|
||||
updateMousePosition(e);
|
||||
toggle();
|
||||
}
|
||||
};
|
||||
const handleContextMenuClick = (e) => {
|
||||
if (props.disabled || openState.value && !props.clickToClose) {
|
||||
return;
|
||||
}
|
||||
if (triggerMethods.value.includes("contextMenu")) {
|
||||
e.preventDefault();
|
||||
if (props.alignPoint) {
|
||||
hide();
|
||||
}
|
||||
updateMousePosition(e);
|
||||
toggle();
|
||||
}
|
||||
};
|
||||
const handleMouseEnter = (e) => {
|
||||
if (props.disabled || !triggerMethods.value.includes("hover")) {
|
||||
return;
|
||||
}
|
||||
show(props.mouseEnterDelay);
|
||||
};
|
||||
const handleMouseEnterWithContext = (e) => {
|
||||
if (!props.popupContainer) {
|
||||
return;
|
||||
}
|
||||
dropdownCtx == null ? void 0 : dropdownCtx.onMouseenter(e);
|
||||
handleMouseEnter();
|
||||
};
|
||||
const handleMouseLeave = (e) => {
|
||||
if (props.disabled || !triggerMethods.value.includes("hover")) {
|
||||
return;
|
||||
}
|
||||
hide(props.mouseLeaveDelay);
|
||||
};
|
||||
const handleMouseLeaveWithContext = (e) => {
|
||||
if (!props.popupContainer) {
|
||||
return;
|
||||
}
|
||||
dropdownCtx == null ? void 0 : dropdownCtx.onMouseleave(e);
|
||||
handleMouseLeave();
|
||||
};
|
||||
const handleFocusin = () => {
|
||||
if (props.disabled || !triggerMethods.value.includes("focus")) {
|
||||
return;
|
||||
}
|
||||
show(props.focusDelay);
|
||||
};
|
||||
const handleFocusout = () => {
|
||||
if (props.disabled || !triggerMethods.value.includes("focus")) {
|
||||
return;
|
||||
}
|
||||
if (!props.blurToClose) {
|
||||
return;
|
||||
}
|
||||
hide();
|
||||
};
|
||||
const handleContextHide = () => {
|
||||
hide();
|
||||
dropdownCtx == null ? void 0 : dropdownCtx.hide();
|
||||
};
|
||||
const addChildRef = (ref2) => {
|
||||
childrenRefs.add(ref2);
|
||||
dropdownCtx == null ? void 0 : dropdownCtx.addChildRef(ref2);
|
||||
};
|
||||
const removeChildRef = (ref2) => {
|
||||
childrenRefs.delete(ref2);
|
||||
dropdownCtx == null ? void 0 : dropdownCtx.removeChildRef(ref2);
|
||||
};
|
||||
dropdownCtx == null ? void 0 : dropdownCtx.addChildRef(contentRef);
|
||||
const { stop: removeContentResizeObserver } = useResizeObserver(contentRef, () => {
|
||||
if (openState.value && props.autoFixPosition) {
|
||||
updateContentStyle();
|
||||
}
|
||||
});
|
||||
const { stop: removeTriggerResizeObserver } = useResizeObserver(dropdownRef, () => {
|
||||
if (openState.value && props.autoFixPosition) {
|
||||
updateContentStyle();
|
||||
}
|
||||
});
|
||||
onClickOutside(dropdownRef, (e) => {
|
||||
var _a, _b, _c;
|
||||
if (!props.clickOutsideToClose || !openState.value || ((_a = dropdownRef.value) == null ? void 0 : _a.contains(e.target)) || ((_b = contentRef.value) == null ? void 0 : _b.contains(e.target))) {
|
||||
return;
|
||||
}
|
||||
for (const item of childrenRefs) {
|
||||
if ((_c = item.value) == null ? void 0 : _c.contains(e.target)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
hide();
|
||||
});
|
||||
const onlyChildRenderFunc = () => {
|
||||
const slotContent = slots.default ? slots.default() : [];
|
||||
const transformedSlotContent = slotContent.map((vnode) => cloneVNode(vnode, {
|
||||
onClick: handleClick,
|
||||
onContextmenu: handleContextMenuClick,
|
||||
onMouseenter: handleMouseEnter,
|
||||
onMouseleave: handleMouseLeave,
|
||||
onFocusin: handleFocusin,
|
||||
onFocusout: handleFocusout,
|
||||
...attrs
|
||||
}, true));
|
||||
children.value = transformedSlotContent;
|
||||
return h(Fragment, children.value);
|
||||
};
|
||||
onMounted(() => {
|
||||
if (props.updateAtScroll) {
|
||||
scrollElements = getScrollElements(dropdownRef.value);
|
||||
for (const item of scrollElements) {
|
||||
item.addEventListener("scroll", handleScroll);
|
||||
}
|
||||
}
|
||||
window.addEventListener("resize", handleScroll);
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
dropdownCtx == null ? void 0 : dropdownCtx.removeChildRef(contentRef);
|
||||
if (scrollElements) {
|
||||
for (const item of scrollElements) {
|
||||
item.removeEventListener("scroll", handleScroll);
|
||||
}
|
||||
scrollElements = void 0;
|
||||
}
|
||||
removeContentResizeObserver();
|
||||
removeTriggerResizeObserver();
|
||||
window.removeEventListener("resize", handleScroll);
|
||||
});
|
||||
watch(() => props.visible, (newVal, oldVal) => {
|
||||
openState.value = newVal;
|
||||
}, { immediate: true });
|
||||
provide(dropdownInjectionKey, reactive({
|
||||
onMouseenter: handleMouseEnterWithContext,
|
||||
onMouseleave: handleMouseLeaveWithContext,
|
||||
addChildRef,
|
||||
removeChildRef,
|
||||
hide: handleContextHide
|
||||
}));
|
||||
provide("openState", openState);
|
||||
expose({ show, hide, toggle });
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock(Fragment, null, [
|
||||
createVNode(unref(RenderFunction), mergeProps({ renderFunc: onlyChildRenderFunc }, _ctx.$attrs), null, 16),
|
||||
createVNode(_sfc_main$1, {
|
||||
to: __props.popupContainer,
|
||||
disabled: __props.disabled
|
||||
}, {
|
||||
default: withCtx(() => {
|
||||
var _a;
|
||||
return [
|
||||
openState.value ? (openBlock(), createElementBlock("div", {
|
||||
key: 0,
|
||||
ref_key: "contentRef",
|
||||
ref: contentRef,
|
||||
class: normalizeClass([
|
||||
"layui-dropdown-content",
|
||||
"layui-anim",
|
||||
"layui-anim-upbit",
|
||||
props.contentClass
|
||||
]),
|
||||
style: normalizeStyle([contentStyle.value, (_a = props.contentStyle) != null ? _a : ""]),
|
||||
onMouseenter: handleMouseEnterWithContext,
|
||||
onMouseleave: handleMouseLeaveWithContext
|
||||
}, [
|
||||
renderSlot(_ctx.$slots, "content")
|
||||
], 38)) : createCommentVNode("", true)
|
||||
];
|
||||
}),
|
||||
_: 3
|
||||
}, 8, ["to", "disabled"])
|
||||
], 64);
|
||||
};
|
||||
}
|
||||
});
|
||||
const component = withInstall(_sfc_main);
|
||||
export { RenderFunction as R, _sfc_main as _, component as c, dropdownInjectionKey as d };
|
||||
@@ -0,0 +1,153 @@
|
||||
import{r as c,o as g,j as y,h as s,g as t,i as n,v as a}from"./.pnpm.8fb36023.js";const _={class:"markdown-body"},m=n("p",{class:"describe-plugin"},"\u6700\u57FA\u7840\u7684\u5361\u7247\u5BB9\u5668\uFF0C\u53EF\u627F\u8F7D\u6587\u5B57\u3001\u5217\u8868\u3001\u56FE\u7247\u3001\u6BB5\u843D\uFF0C\u5E38\u7528\u4E8E\u540E\u53F0\u6982\u89C8\u9875\u9762\u3002",-1),v=n("p",null,[a("\u4F7F\u7528 "),n("code",null,"lay-card"),a(" \u6807\u7B7E, \u521B\u5EFA\u5361\u7247\u7EC4\u4EF6")],-1),h=n("pre",null,[n("code",{"v-pre":""},[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("card-container"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("lay-card")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("\u6807\u9898"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
\u5185\u5BB9
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("lay-card")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
|
||||
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),a(`
|
||||
|
||||
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
`),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
|
||||
`),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("style")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[a(`
|
||||
`),n("span",{class:"token selector"},".card-container"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
`),n("span",{class:"token property"},"background"),n("span",{class:"token punctuation"},":"),a(" whitesmoke"),n("span",{class:"token punctuation"},";"),a(`
|
||||
`),n("span",{class:"token property"},"padding"),n("span",{class:"token punctuation"},":"),a(" 20px"),n("span",{class:"token punctuation"},";"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("style")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`)])],-1),f={class:"card-container"},w=n("pre",null,[n("code",{"v-pre":""},[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("card-container"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("lay-card")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-slot:"),a("title")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
\u6807\u9898
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-slot:"),a("body")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
\u5185\u5BB9
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-slot:"),a("footer")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
\u5E95\u90E8
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("lay-card")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
|
||||
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),a(`
|
||||
|
||||
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
`),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
|
||||
`),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("style")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[a(`
|
||||
`),n("span",{class:"token selector"},".card-container"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
`),n("span",{class:"token property"},"background"),n("span",{class:"token punctuation"},":"),a(" whitesmoke"),n("span",{class:"token punctuation"},";"),a(`
|
||||
`),n("span",{class:"token property"},"padding"),n("span",{class:"token punctuation"},":"),a(" 20px"),n("span",{class:"token punctuation"},";"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("style")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`)])],-1),x={class:"card-container"},b=n("pre",null,[n("code",{"v-pre":""},[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("card-container"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("lay-card")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
\u5185\u5BB9
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("lay-card")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
|
||||
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),a(`
|
||||
|
||||
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
`),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
|
||||
`),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("style")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[a(`
|
||||
`),n("span",{class:"token selector"},".card-container"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
`),n("span",{class:"token property"},"background"),n("span",{class:"token punctuation"},":"),a(" whitesmoke"),n("span",{class:"token punctuation"},";"),a(`
|
||||
`),n("span",{class:"token property"},"padding"),n("span",{class:"token punctuation"},":"),a(" 20px"),n("span",{class:"token punctuation"},";"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("style")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`)])],-1),C={class:"card-container"},q=n("pre",null,[n("code",{"v-pre":""},[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("card-container"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("lay-card")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-slot:"),a("title")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
\u6807\u9898
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-slot:"),a("extra")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
\u66F4\u591A
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-slot:"),a("body")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
\u5185\u5BB9
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("lay-card")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
|
||||
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),a(`
|
||||
|
||||
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
`),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
|
||||
`),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("style")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[a(`
|
||||
`),n("span",{class:"token selector"},".card-container"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
`),n("span",{class:"token property"},"background"),n("span",{class:"token punctuation"},":"),a(" whitesmoke"),n("span",{class:"token punctuation"},";"),a(`
|
||||
`),n("span",{class:"token property"},"padding"),n("span",{class:"token punctuation"},":"),a(" 20px"),n("span",{class:"token punctuation"},";"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("style")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`)])],-1),j={class:"card-container"},N=n("p",null,"\u901A\u8FC7 shadow \u5C5E\u6027\u8BBE\u7F6E\u5361\u7247\u9634\u5F71\u51FA\u73B0\u7684\u65F6\u673A\u3002 \u8BE5\u5C5E\u6027\u7684\u503C\u53EF\u4EE5\u662F\uFF1Aalways\u3001hover\u6216never\u3002",-1),B=n("pre",null,[n("code",{"v-pre":""},[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("card-container"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("lay-card")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
\u5185\u5BB9
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("lay-card")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("lay-card")]),a(),n("span",{class:"token attr-name"},"shadow"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("hover"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
\u5185\u5BB9
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("lay-card")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("lay-card")]),a(),n("span",{class:"token attr-name"},"shadow"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("never"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
\u5185\u5BB9
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("lay-card")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
|
||||
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),a(`
|
||||
|
||||
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
`),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
|
||||
`),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("style")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[a(`
|
||||
`),n("span",{class:"token selector"},".card-container"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
`),n("span",{class:"token property"},"background"),n("span",{class:"token punctuation"},":"),a(" whitesmoke"),n("span",{class:"token punctuation"},";"),a(`
|
||||
`),n("span",{class:"token property"},"padding"),n("span",{class:"token punctuation"},":"),a(" 20px"),n("span",{class:"token punctuation"},";"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("style")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`)])],-1),V={class:"card-container"},z=n("table",null,[n("thead",null,[n("tr",null,[n("th",null,"\u5C5E\u6027"),n("th",null,"\u63CF\u8FF0"),n("th",null,"\u7C7B\u578B"),n("th",null,"\u53EF\u9009\u503C"),n("th",null,"\u53EF\u9009\u503C")])]),n("tbody",null,[n("tr",null,[n("td",null,"title"),n("td",null,"\u6807\u9898"),n("td",null,[n("code",null,"string")]),n("td",null,"\u2013"),n("td",null,"\u2013")]),n("tr",null,[n("td",null,"shadow"),n("td",null,"\u9634\u5F71"),n("td",null,[n("code",null,"string")]),n("td",null,[n("code",null,"always")]),n("td",null,[n("code",null,"always"),a(),n("code",null,"hover"),a(),n("code",null,"never")])])])],-1),E=n("table",null,[n("thead",null,[n("tr",null,[n("th",null,"\u63D2\u69FD"),n("th",null,"\u63CF\u8FF0"),n("th",null,"\u53EF\u9009\u503C"),n("th",null,"\u7248\u672C")])]),n("tbody",null,[n("tr",null,[n("td",null,"default"),n("td",null,"\u9ED8\u8BA4\u63D2\u69FD"),n("td",null,"\u2013"),n("td",null,"\u2013")]),n("tr",null,[n("td",null,"header"),n("td",null,"\u5934\u90E8\u63D2\u69FD"),n("td",null,"\u2013"),n("td",null,"\u2013")]),n("tr",null,[n("td",null,"body"),n("td",null,"\u5185\u5BB9\u63D2\u69FD"),n("td",null,"\u2013"),n("td",null,"\u2013")]),n("tr",null,[n("td",null,"extra"),n("td",null,"\u6269\u5C55\u63D2\u69FD"),n("td",null,"\u2013"),n("td",null,"\u2013")]),n("tr",null,[n("td",null,"footer"),n("td",null,"\u6269\u5C55\u63D2\u69FD"),n("td",null,"\u2013"),n("td",null,[n("code",null,"1.4.3")])])])],-1),I={style:{display:"flex","justify-content":"space-between","margin-top":"20px"}},G={},H={__name:"card",setup(T,{expose:i}){return i({frontmatter:{}}),(A,D)=>{const r=c("lay-anchor"),o=c("lay-field"),e=c("lay-card"),p=c("lay-code"),l=c("lay-table-box"),d=c("lay-contributor"),u=c("lay-icon"),k=c("router-link");return g(),y("div",_,[s(r,{anchors:"\u57FA\u672C\u4ECB\u7ECD,\u57FA\u7840\u4F7F\u7528,\u5361\u7247\u63D2\u69FD,\u7B80\u5355\u4F7F\u7528,\u4F7F\u7528\u63D2\u69FD,\u8FB9\u6846\u9634\u5F71,Card \u5C5E\u6027,Card \u63D2\u69FD",currIndex:-1,show:!0}),s(o,{id:"\u57FA\u672C\u4ECB\u7ECD",title:"\u57FA\u672C\u4ECB\u7ECD",style:{"margin-top":"21px","margin-bottom":"20px"}}),m,s(o,{id:"\u57FA\u7840\u4F7F\u7528",title:"\u57FA\u7840\u4F7F\u7528",style:{"margin-top":"21px","margin-bottom":"20px"}}),s(p,null,{description:t(()=>[v]),code:t(()=>[h]),default:t(()=>[n("div",f,[s(e,{title:"\u6807\u9898"},{default:t(()=>[a(" \u5185\u5BB9 ")]),_:1})])]),_:1}),s(o,{id:"\u5361\u7247\u63D2\u69FD",title:"\u5361\u7247\u63D2\u69FD",style:{"margin-top":"21px","margin-bottom":"20px"}}),s(p,null,{code:t(()=>[w]),default:t(()=>[n("div",x,[s(e,null,{title:t(()=>[a(" \u6807\u9898 ")]),body:t(()=>[a(" \u5185\u5BB9 ")]),footer:t(()=>[a(" \u5E95\u90E8 ")]),_:1})])]),_:1}),s(o,{id:"\u7B80\u5355\u4F7F\u7528",title:"\u7B80\u5355\u4F7F\u7528",style:{"margin-top":"21px","margin-bottom":"20px"}}),s(p,null,{code:t(()=>[b]),default:t(()=>[n("div",C,[s(e,null,{default:t(()=>[a(" \u5185\u5BB9 ")]),_:1})])]),_:1}),s(o,{id:"\u4F7F\u7528\u63D2\u69FD",title:"\u4F7F\u7528\u63D2\u69FD",style:{"margin-top":"21px","margin-bottom":"20px"}}),s(p,null,{code:t(()=>[q]),default:t(()=>[n("div",j,[s(e,null,{title:t(()=>[a(" \u6807\u9898 ")]),extra:t(()=>[a(" \u66F4\u591A ")]),body:t(()=>[a(" \u5185\u5BB9 ")]),_:1})])]),_:1}),s(o,{id:"\u8FB9\u6846\u9634\u5F71",title:"\u8FB9\u6846\u9634\u5F71",style:{"margin-top":"21px","margin-bottom":"20px"}}),s(p,null,{description:t(()=>[N]),code:t(()=>[B]),default:t(()=>[n("div",V,[s(e,null,{default:t(()=>[a(" \u5185\u5BB9 ")]),_:1}),s(e,{shadow:"hover"},{default:t(()=>[a(" \u5185\u5BB9 ")]),_:1}),s(e,{shadow:"never"},{default:t(()=>[a(" \u5185\u5BB9 ")]),_:1})])]),_:1}),s(o,{id:"Card \u5C5E\u6027",title:"Card \u5C5E\u6027",style:{"margin-top":"21px","margin-bottom":"20px"}}),s(l,null,{default:t(()=>[z]),_:1}),s(o,{id:"Card \u63D2\u69FD",title:"Card \u63D2\u69FD",style:{"margin-top":"21px","margin-bottom":"20px"}}),s(l,null,{default:t(()=>[E]),_:1}),s(d,{"file-path":"card"}),n("div",I,[n("div",null,[s(k,{to:"/zh-CN/components/panel",class:"lay-link",style:{display:""}},{default:t(()=>[s(u,{type:"layui-icon-left"}),a("\u9762\u677F")]),_:1})]),n("div",null,[s(k,{to:"/zh-CN/components/skeleton",class:"lay-link",style:{display:""}},{default:t(()=>[a("\u9AA8\u67B6 "),s(u,{type:"layui-icon-right"})]),_:1})])])])}}};export{H as default,G as frontmatter};
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,97 @@
|
||||
<script lang="ts">
|
||||
import { computed, inject } from "vue";
|
||||
import { RadioSize } from "./interface";
|
||||
export default {
|
||||
name: "LayRadio",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import "./index.less";
|
||||
|
||||
export interface RadioProps {
|
||||
name?: string;
|
||||
size?: RadioSize;
|
||||
disabled?: boolean;
|
||||
modelValue?: string | boolean | number;
|
||||
value?: string | boolean | number;
|
||||
label?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<RadioProps>(), {
|
||||
size: "md",
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:modelValue", "change"]);
|
||||
|
||||
const radioGroup: any = inject("radioGroup", {});
|
||||
|
||||
const isGroup = computed(() => {
|
||||
return radioGroup != undefined && radioGroup?.name === "LayRadioGroup";
|
||||
});
|
||||
|
||||
const naiveName = computed(() => {
|
||||
if (radioGroup.naiveName) {
|
||||
return radioGroup.naiveName;
|
||||
} else {
|
||||
return props.name;
|
||||
}
|
||||
});
|
||||
|
||||
const isChecked = computed({
|
||||
get() {
|
||||
if (isGroup.value) {
|
||||
return radioGroup.modelValue.value === props.value;
|
||||
} else {
|
||||
return props.modelValue === props.value;
|
||||
}
|
||||
},
|
||||
set(val) {
|
||||
if (isGroup.value) {
|
||||
radioGroup.modelValue.value = props.value;
|
||||
} else {
|
||||
if (val) {
|
||||
emit("change", props.value);
|
||||
emit("update:modelValue", props.value);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const handleClick = function () {
|
||||
if (!ifDisabled.value) {
|
||||
isChecked.value = !isChecked.value;
|
||||
}
|
||||
};
|
||||
const ifDisabled = computed(() => {
|
||||
if (props.disabled) {
|
||||
return true;
|
||||
}
|
||||
if (radioGroup.hasOwnProperty("disabled") && radioGroup.disabled.value) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="layui-radio" :size="size">
|
||||
<input type="radio" :value="value" :name="naiveName" />
|
||||
<div
|
||||
class="layui-unselect layui-form-radio"
|
||||
:class="{
|
||||
'layui-form-radioed': isChecked,
|
||||
'layui-radio-disabled layui-disabled': ifDisabled,
|
||||
}"
|
||||
@click.stop="handleClick"
|
||||
>
|
||||
<i v-if="isChecked" class="layui-anim layui-icon layui-anim-scaleSpring"
|
||||
></i
|
||||
>
|
||||
<i v-else class="layui-icon layui-form-radioed"></i>
|
||||
<span>
|
||||
<slot>{{ label }}</slot>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
@@ -0,0 +1,61 @@
|
||||
::: title 夜间模式
|
||||
:::
|
||||
|
||||
::: describe 默认情况下, 网站主题为日间模式。
|
||||
:::
|
||||
|
||||
::: describe 若启用夜间模式, 使用 "全局配置" 组件配合 theme 属性, 设置为 dark 值。
|
||||
:::
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<lay-config-provider :theme="theme">
|
||||
<App />
|
||||
</lay-config-provider>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const theme = ref('dark')
|
||||
</script>
|
||||
```
|
||||
|
||||
::: title 选项配置
|
||||
:::
|
||||
|
||||
::: describe 若内置的夜间模式不满足要求时, 可通过 dark-partial 属性进行偏好设置。
|
||||
:::
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<lay-config-provider :theme="theme" :dark-partial="darkPartial">
|
||||
<App />
|
||||
</lay-config-provider>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const theme = ref('dark')
|
||||
|
||||
const darkPartial = {
|
||||
brightness: 100,
|
||||
contrast: 90,
|
||||
grayscale: 0,
|
||||
darkSchemeBackgroundColor: "black";
|
||||
darkSchemeTextColor: "white";
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
::: title Dark Partial 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| ----------- | -------- | ------- | --------- | ---------------------------------- |
|
||||
| brightness | 亮度 | `number` | `100` | `0 - 100` |
|
||||
| contrast | 对比度 | `number` | `100` | `0 - 100` |
|
||||
| grayscale | 灰度值 | `number` | `0` | `0 - 100` |
|
||||
| darkSchemeBackgroundColor | 背景颜色 | `string` | -- | -- |
|
||||
| darkSchemeTextColor | 前景颜色 | `string` | -- | -- |
|
||||
|
||||
:::
|
||||
Binary file not shown.
@@ -0,0 +1,127 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-color-picker` 标签, 创建颜色选择器。
|
||||
|
||||
<template>
|
||||
<lay-color-picker v-model="color"></lay-color-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from "vue";
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const color = ref("#009688");
|
||||
|
||||
return {
|
||||
color
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 禁止选择
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-color-picker` 标签, 创建颜色选择器。
|
||||
|
||||
<template>
|
||||
<lay-color-picker v-model="color" :disabled="true"></lay-color-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from "vue";
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const color = ref("#009688");
|
||||
|
||||
return {
|
||||
color
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 预设颜色
|
||||
:::
|
||||
|
||||
::: demo 通过 `preset` 属性, 预设可选的颜色列表。
|
||||
|
||||
<template>
|
||||
<lay-color-picker v-model="color1" :preset="preset1"></lay-color-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from "vue";
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const color1 = ref("#FFB800");
|
||||
|
||||
const preset1 = ref(["#009688", "#1e9fff", "#ffb800", "#ff5722", "#5fb878"])
|
||||
|
||||
return {
|
||||
color1,
|
||||
preset1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 取色器
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-color-picker v-model="color" eyeDropper></lay-color-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from "vue";
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const color = ref("#009688");
|
||||
|
||||
return {
|
||||
color
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Icon Picker 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| | | | | |
|
||||
| ---------- | -------- | --- |--- |--- |
|
||||
| v-model | 选中色 | -- |-- |-- |
|
||||
| preset | 预设颜色 | -- |-- |-- |
|
||||
| eyeDropper | 取色器 | `boolean` |-- |-- |
|
||||
| disabled | 禁用 | `boolean` |-- |-- |
|
||||
| contentStyle | 内容自定义样式 | `StyleValue` | -- | -- |
|
||||
| contentClass | 内容自定义Class | `string` `Array<string \| object>` `object` | -- | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor colorPicker
|
||||
:::
|
||||
|
||||
::: previousNext colorPicker
|
||||
:::
|
||||
@@ -0,0 +1,661 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "TableRow",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Recordable } from "../../types";
|
||||
import { LayIcon } from "@layui/icons-vue";
|
||||
import { computed, ref, StyleValue, useSlots, WritableComputedRef } from "vue";
|
||||
import LayCheckbox from "../checkbox/index.vue";
|
||||
import LayTooltip from "../tooltip/index.vue";
|
||||
import LayRadio from "../radio/index.vue";
|
||||
|
||||
export interface TableRowProps {
|
||||
index: number;
|
||||
indentSize: number;
|
||||
currentIndentSize: number;
|
||||
expandSpace: boolean;
|
||||
expandIndex: number;
|
||||
selectedKeys: Recordable[];
|
||||
selectedKey: string;
|
||||
tableColumnKeys: Recordable[];
|
||||
childrenColumnName?: string;
|
||||
columns: Recordable[];
|
||||
checkbox?: boolean;
|
||||
cellClassName: string | Function;
|
||||
cellStyle: string | Function;
|
||||
rowClassName: string | Function;
|
||||
rowStyle: string | Function;
|
||||
id: string;
|
||||
data: any;
|
||||
spanMethod: Function;
|
||||
defaultExpandAll: boolean;
|
||||
expandKeys: Recordable[];
|
||||
getCheckboxProps: Function;
|
||||
getRadioProps: Function;
|
||||
}
|
||||
|
||||
const slot = useSlots();
|
||||
|
||||
const emit = defineEmits([
|
||||
"row",
|
||||
"row-double",
|
||||
"row-contextmenu",
|
||||
"update:expandKeys",
|
||||
"update:selectedKeys",
|
||||
"update:selectedKey",
|
||||
]);
|
||||
|
||||
const props = withDefaults(defineProps<TableRowProps>(), {
|
||||
checkbox: false,
|
||||
childrenColumnName: "children",
|
||||
cellStyle: "",
|
||||
cellClassName: "",
|
||||
});
|
||||
|
||||
const tableExpandAll = ref(props.defaultExpandAll);
|
||||
|
||||
const tableExpandKeys: WritableComputedRef<Recordable[]> = computed({
|
||||
get() {
|
||||
return [...props.expandKeys];
|
||||
},
|
||||
set(val) {
|
||||
emit("update:expandKeys", val);
|
||||
},
|
||||
});
|
||||
|
||||
const tableSelectedKeys: WritableComputedRef<Recordable[]> = computed({
|
||||
get() {
|
||||
return [...props.selectedKeys];
|
||||
},
|
||||
set(val) {
|
||||
emit("update:selectedKeys", val);
|
||||
},
|
||||
});
|
||||
|
||||
const tableSelectedKey: WritableComputedRef<string> = computed({
|
||||
get() {
|
||||
return props.selectedKey;
|
||||
},
|
||||
set(val) {
|
||||
emit("update:selectedKey", val);
|
||||
},
|
||||
});
|
||||
|
||||
const isExpand: WritableComputedRef<any> = computed({
|
||||
get() {
|
||||
return tableExpandAll.value
|
||||
? true
|
||||
: tableExpandKeys.value.includes(props.data[props.id]);
|
||||
},
|
||||
set(val) {
|
||||
let newTableExpandKeys = [...tableExpandKeys.value];
|
||||
if (!val) {
|
||||
newTableExpandKeys.splice(
|
||||
newTableExpandKeys.indexOf(props.data[props.id]),
|
||||
1
|
||||
);
|
||||
} else {
|
||||
newTableExpandKeys.push(props.data[props.id]);
|
||||
}
|
||||
tableExpandAll.value = false;
|
||||
tableExpandKeys.value = newTableExpandKeys;
|
||||
},
|
||||
});
|
||||
|
||||
const slotsData = ref<string[]>([]);
|
||||
|
||||
props.columns.map((value: any) => {
|
||||
if (value.customSlot) {
|
||||
slotsData.value.push(value.customSlot);
|
||||
}
|
||||
});
|
||||
|
||||
const rowClick = function (data: any, evt: MouseEvent) {
|
||||
emit("row", data, evt);
|
||||
};
|
||||
|
||||
const rowDoubleClick = function (data: any, evt: MouseEvent) {
|
||||
emit("row-double", data, evt);
|
||||
};
|
||||
|
||||
const rowContextmenu = function (data: any, evt: MouseEvent) {
|
||||
emit("row-contextmenu", data, evt);
|
||||
};
|
||||
|
||||
const expandIconType = computed(() => {
|
||||
return isExpand.value ? "layui-icon-subtraction" : "layui-icon-addition";
|
||||
});
|
||||
|
||||
const handleExpand = () => {
|
||||
isExpand.value = !isExpand.value;
|
||||
};
|
||||
|
||||
const renderCellStyle = (
|
||||
row: any,
|
||||
column: any,
|
||||
rowIndex: number,
|
||||
columnIndex: number
|
||||
) => {
|
||||
if (typeof props.cellStyle === "string") {
|
||||
return props.cellStyle;
|
||||
}
|
||||
return props.cellStyle(row, column, rowIndex, columnIndex);
|
||||
};
|
||||
|
||||
const renderCellClassName = (
|
||||
row: any,
|
||||
column: any,
|
||||
rowIndex: number,
|
||||
columnIndex: number
|
||||
) => {
|
||||
if (typeof props.cellClassName === "string") {
|
||||
return props.cellClassName;
|
||||
}
|
||||
return props.cellClassName(row, column, rowIndex, columnIndex);
|
||||
};
|
||||
|
||||
const renderRowStyle = (data: any, index: number) => {
|
||||
if (typeof props.rowStyle === "string") {
|
||||
return props.rowStyle;
|
||||
}
|
||||
return props.rowStyle(data, index);
|
||||
};
|
||||
|
||||
const renderRowClassName = (data: any, index: number) => {
|
||||
if (typeof props.rowClassName === "string") {
|
||||
return props.rowClassName;
|
||||
}
|
||||
return props.rowClassName(data, index);
|
||||
};
|
||||
|
||||
const childrenIndentSize = computed(
|
||||
() => props.currentIndentSize + props.indentSize
|
||||
);
|
||||
|
||||
const renderFixedStyle = (column: any, columnIndex: number) => {
|
||||
if (column.fixed) {
|
||||
if (column.fixed == "left") {
|
||||
var left = 0;
|
||||
for (var i = 0; i < columnIndex; i++) {
|
||||
if (
|
||||
props.columns[i].fixed &&
|
||||
props.columns[i].fixed == "left" &&
|
||||
props.tableColumnKeys.includes(props.columns[i].key)
|
||||
) {
|
||||
left = left + Number(props.columns[i]?.width?.replace("px", ""));
|
||||
}
|
||||
}
|
||||
return { left: `${left}px` } as StyleValue;
|
||||
} else {
|
||||
var right = 0;
|
||||
for (var i = columnIndex + 1; i < props.columns.length; i++) {
|
||||
if (
|
||||
props.columns[i].fixed &&
|
||||
props.columns[i].fixed == "right" &&
|
||||
props.tableColumnKeys.includes(props.columns[i].key)
|
||||
) {
|
||||
right = right + Number(props.columns[i]?.width?.replace("px", ""));
|
||||
}
|
||||
}
|
||||
return { right: `${right}px` } as StyleValue;
|
||||
}
|
||||
} else {
|
||||
var isLast = true;
|
||||
for (var i = columnIndex + 1; i < props.columns.length; i++) {
|
||||
if (
|
||||
props.columns[i].fixed == undefined &&
|
||||
props.tableColumnKeys.includes(props.columns[i].key)
|
||||
) {
|
||||
isLast = false;
|
||||
}
|
||||
}
|
||||
return isLast ? ({ "border-right": "none" } as StyleValue) : {};
|
||||
}
|
||||
return {} as StyleValue;
|
||||
};
|
||||
|
||||
const renderFixedClassName = (column: any, columnIndex: number) => {
|
||||
if (column.fixed) {
|
||||
if (column.fixed == "left") {
|
||||
var left = true;
|
||||
for (var i = columnIndex + 1; i < props.columns.length; i++) {
|
||||
if (
|
||||
props.columns[i].fixed &&
|
||||
props.columns[i].fixed == "left" &&
|
||||
props.tableColumnKeys.includes(props.columns[i].key)
|
||||
) {
|
||||
left = false;
|
||||
}
|
||||
}
|
||||
return left ? `layui-table-fixed-left-last` : "";
|
||||
} else {
|
||||
var right = true;
|
||||
for (var i = 0; i < columnIndex; i++) {
|
||||
if (
|
||||
props.columns[i].fixed &&
|
||||
props.columns[i].fixed == "right" &&
|
||||
props.tableColumnKeys.includes(props.columns[i].key)
|
||||
) {
|
||||
right = false;
|
||||
}
|
||||
}
|
||||
return right ? `layui-table-fixed-right-first` : "";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const spanMethodAttr = (
|
||||
row: any,
|
||||
column: any,
|
||||
rowIndex: number,
|
||||
columnIndex: number
|
||||
) => {
|
||||
const attrs = props.spanMethod(row, column, rowIndex, columnIndex);
|
||||
if (attrs instanceof Array) {
|
||||
return { rowspan: attrs[0], colspan: attrs[1] };
|
||||
} else if (attrs instanceof Object) {
|
||||
return attrs;
|
||||
} else {
|
||||
return { rowspan: 1, colspan: 1 };
|
||||
}
|
||||
};
|
||||
|
||||
const isAutoShow = (
|
||||
row: any,
|
||||
column: any,
|
||||
rowIndex: number,
|
||||
columnIndex: number
|
||||
) => {
|
||||
const attrs = spanMethodAttr(row, column, rowIndex, columnIndex);
|
||||
if (attrs.colspan == 0 && attrs.rowspan == 0) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
const checkboxProps = props.getCheckboxProps(props.data, props.index);
|
||||
const radioProps = props.getRadioProps(props.data, props.index);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<tr
|
||||
:style="[renderRowStyle(data, index)]"
|
||||
:class="[renderRowClassName(data, index)]"
|
||||
@click.stop="rowClick(data, $event)"
|
||||
@dblclick.stop="rowDoubleClick(data, $event)"
|
||||
@contextmenu.stop="rowContextmenu(data, $event)"
|
||||
>
|
||||
<template v-for="(column, columnIndex) in columns" :key="columnIndex">
|
||||
<template v-if="tableColumnKeys.includes(column.key)">
|
||||
<template v-if="column.type">
|
||||
<template v-if="column.type == 'radio'">
|
||||
<td
|
||||
class="layui-table-cell layui-table-cell-radio"
|
||||
v-if="isAutoShow(data, column, index, columnIndex)"
|
||||
:colspan="
|
||||
spanMethodAttr(data, column, index, columnIndex).colspan
|
||||
"
|
||||
:rowspan="
|
||||
spanMethodAttr(data, column, index, columnIndex).rowspan
|
||||
"
|
||||
:style="[
|
||||
{
|
||||
textAlign: column.align,
|
||||
whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
|
||||
},
|
||||
renderFixedStyle(column, columnIndex),
|
||||
renderCellStyle(data, column, index, columnIndex),
|
||||
]"
|
||||
:class="[
|
||||
renderFixedClassName(column, columnIndex),
|
||||
renderCellClassName(data, column, index, columnIndex),
|
||||
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
v-if="expandSpace && columnIndex === expandIndex"
|
||||
:style="{ 'margin-right': currentIndentSize + 'px' }"
|
||||
></span>
|
||||
|
||||
<span
|
||||
v-if="
|
||||
expandSpace &&
|
||||
!data[childrenColumnName] &&
|
||||
!slot.expand &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon-spaced"
|
||||
></span>
|
||||
|
||||
<lay-icon
|
||||
v-if="
|
||||
(slot.expand || data[childrenColumnName]) &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon"
|
||||
:type="expandIconType"
|
||||
@click="handleExpand"
|
||||
></lay-icon>
|
||||
|
||||
<lay-radio
|
||||
v-model="tableSelectedKey"
|
||||
v-bind="radioProps"
|
||||
:value="data[id]"
|
||||
/>
|
||||
</td>
|
||||
</template>
|
||||
|
||||
<template v-if="column.type == 'checkbox'">
|
||||
<td
|
||||
class="layui-table-cell layui-table-cell-checkbox"
|
||||
v-if="isAutoShow(data, column, index, columnIndex)"
|
||||
:colspan="
|
||||
spanMethodAttr(data, column, index, columnIndex).colspan
|
||||
"
|
||||
:rowspan="
|
||||
spanMethodAttr(data, column, index, columnIndex).rowspan
|
||||
"
|
||||
:style="[
|
||||
{
|
||||
textAlign: column.align,
|
||||
whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
|
||||
},
|
||||
renderFixedStyle(column, columnIndex),
|
||||
renderCellStyle(data, column, index, columnIndex),
|
||||
]"
|
||||
:class="[
|
||||
renderFixedClassName(column, columnIndex),
|
||||
renderCellClassName(data, column, index, columnIndex),
|
||||
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
v-if="expandSpace && columnIndex === expandIndex"
|
||||
:style="{ 'margin-right': currentIndentSize + 'px' }"
|
||||
></span>
|
||||
|
||||
<span
|
||||
v-if="
|
||||
expandSpace &&
|
||||
!data[childrenColumnName] &&
|
||||
!slot.expand &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon-spaced"
|
||||
></span>
|
||||
|
||||
<lay-icon
|
||||
v-if="
|
||||
(slot.expand || data[childrenColumnName]) &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon"
|
||||
:type="expandIconType"
|
||||
@click="handleExpand"
|
||||
></lay-icon>
|
||||
|
||||
<lay-checkbox
|
||||
v-model="tableSelectedKeys"
|
||||
v-bind="checkboxProps"
|
||||
:value="data[id]"
|
||||
skin="primary"
|
||||
/>
|
||||
</td>
|
||||
</template>
|
||||
|
||||
<template v-if="column.type == 'number'">
|
||||
<td
|
||||
class="layui-table-cell layui-table-cell-number"
|
||||
v-if="isAutoShow(data, column, index, columnIndex)"
|
||||
:colspan="
|
||||
spanMethodAttr(data, column, index, columnIndex).colspan
|
||||
"
|
||||
:rowspan="
|
||||
spanMethodAttr(data, column, index, columnIndex).rowspan
|
||||
"
|
||||
:style="[
|
||||
{
|
||||
textAlign: column.align,
|
||||
whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
|
||||
},
|
||||
renderFixedStyle(column, columnIndex),
|
||||
renderCellStyle(data, column, index, columnIndex),
|
||||
]"
|
||||
:class="[
|
||||
renderFixedClassName(column, columnIndex),
|
||||
renderCellClassName(data, column, index, columnIndex),
|
||||
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
v-if="expandSpace && columnIndex === expandIndex"
|
||||
:style="{ 'margin-right': currentIndentSize + 'px' }"
|
||||
></span>
|
||||
|
||||
<span
|
||||
v-if="
|
||||
expandSpace &&
|
||||
!data[childrenColumnName] &&
|
||||
!slot.expand &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon-spaced"
|
||||
></span>
|
||||
|
||||
<lay-icon
|
||||
v-if="
|
||||
(slot.expand || data[childrenColumnName]) &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon"
|
||||
:type="expandIconType"
|
||||
@click="handleExpand"
|
||||
></lay-icon>
|
||||
|
||||
{{ index + 1 }}
|
||||
</td>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<template v-if="column.customSlot">
|
||||
<td
|
||||
class="layui-table-cell"
|
||||
v-if="isAutoShow(data, column, index, columnIndex)"
|
||||
:colspan="
|
||||
spanMethodAttr(data, column, index, columnIndex).colspan
|
||||
"
|
||||
:rowspan="
|
||||
spanMethodAttr(data, column, index, columnIndex).rowspan
|
||||
"
|
||||
:style="[
|
||||
{
|
||||
textAlign: column.align,
|
||||
whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
|
||||
},
|
||||
renderFixedStyle(column, columnIndex),
|
||||
renderCellStyle(data, column, index, columnIndex),
|
||||
]"
|
||||
:class="[
|
||||
renderFixedClassName(column, columnIndex),
|
||||
renderCellClassName(data, column, index, columnIndex),
|
||||
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
v-if="expandSpace && columnIndex === expandIndex"
|
||||
:style="{ 'margin-right': currentIndentSize + 'px' }"
|
||||
></span>
|
||||
|
||||
<span
|
||||
v-if="
|
||||
expandSpace &&
|
||||
!data[childrenColumnName] &&
|
||||
!slot.expand &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon-spaced"
|
||||
></span>
|
||||
|
||||
<lay-icon
|
||||
v-if="
|
||||
(slot.expand || data[childrenColumnName]) &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon"
|
||||
:type="expandIconType"
|
||||
@click="handleExpand"
|
||||
></lay-icon>
|
||||
|
||||
<lay-tooltip v-if="column.ellipsisTooltip" :isAutoShow="true">
|
||||
<slot
|
||||
:name="column.customSlot"
|
||||
:data="data"
|
||||
:column="column"
|
||||
></slot>
|
||||
<template #content>
|
||||
<slot
|
||||
:name="column.customSlot"
|
||||
:data="data"
|
||||
:column="column"
|
||||
></slot>
|
||||
</template>
|
||||
</lay-tooltip>
|
||||
<slot
|
||||
v-else
|
||||
:name="column.customSlot"
|
||||
:data="data"
|
||||
:column="column"
|
||||
></slot>
|
||||
</td>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<td
|
||||
class="layui-table-cell"
|
||||
v-if="isAutoShow(data, column, index, columnIndex)"
|
||||
:colspan="
|
||||
spanMethodAttr(data, column, index, columnIndex).colspan
|
||||
"
|
||||
:rowspan="
|
||||
spanMethodAttr(data, column, index, columnIndex).rowspan
|
||||
"
|
||||
:style="[
|
||||
{
|
||||
textAlign: column.align,
|
||||
whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
|
||||
},
|
||||
renderFixedStyle(column, columnIndex),
|
||||
renderCellStyle(data, column, index, columnIndex),
|
||||
]"
|
||||
:class="[
|
||||
renderFixedClassName(column, columnIndex),
|
||||
renderCellClassName(data, column, index, columnIndex),
|
||||
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
v-if="expandSpace && columnIndex === expandIndex"
|
||||
:style="{ 'margin-right': currentIndentSize + 'px' }"
|
||||
></span>
|
||||
|
||||
<span
|
||||
v-if="
|
||||
expandSpace &&
|
||||
!data[childrenColumnName] &&
|
||||
!slot.expand &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon-spaced"
|
||||
></span>
|
||||
|
||||
<lay-icon
|
||||
v-if="
|
||||
(slot.expand || data[childrenColumnName]) &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon"
|
||||
:type="expandIconType"
|
||||
@click="handleExpand"
|
||||
></lay-icon>
|
||||
|
||||
<lay-tooltip
|
||||
v-if="column.ellipsisTooltip"
|
||||
:content="data[column.key]"
|
||||
:isAutoShow="true"
|
||||
>
|
||||
{{ data[column.key] }}
|
||||
</lay-tooltip>
|
||||
<span v-else> {{ data[column.key] }} </span>
|
||||
</td>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</tr>
|
||||
|
||||
<tr class="layui-table-cell-expand" v-if="slot.expand && isExpand">
|
||||
<td class="layui-table-cell" :colspan="columns.length">
|
||||
<slot name="expand" :data="data"></slot>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<template v-if="data[childrenColumnName] && isExpand">
|
||||
<template
|
||||
v-for="(children, childrenIndex) in data[childrenColumnName]"
|
||||
:key="childrenIndex"
|
||||
>
|
||||
<table-row
|
||||
:id="id"
|
||||
:data="children"
|
||||
:index="childrenIndex"
|
||||
:columns="columns"
|
||||
:indent-size="indentSize"
|
||||
:current-indent-size="childrenIndentSize"
|
||||
:checkbox="checkbox"
|
||||
:tableColumnKeys="tableColumnKeys"
|
||||
:expandSpace="expandSpace"
|
||||
:expandIndex="expandIndex"
|
||||
:cellStyle="cellStyle"
|
||||
:cellClassName="cellClassName"
|
||||
:rowStyle="rowStyle"
|
||||
:rowClassName="rowClassName"
|
||||
:spanMethod="spanMethod"
|
||||
:defaultExpandAll="defaultExpandAll"
|
||||
:getCheckboxProps="getCheckboxProps"
|
||||
:getRadioProps="getRadioProps"
|
||||
@row="rowClick"
|
||||
@row-double="rowDoubleClick"
|
||||
@row-contextmenu="rowContextmenu"
|
||||
v-model:expandKeys="tableExpandKeys"
|
||||
v-model:selectedKeys="tableSelectedKeys"
|
||||
v-model:selectedKey="tableSelectedKey"
|
||||
>
|
||||
<template
|
||||
v-for="name in slotsData"
|
||||
#[name]="slotProp: { data: any, column: any }"
|
||||
>
|
||||
<slot
|
||||
:name="name"
|
||||
:data="slotProp.data"
|
||||
:column="slotProp.column"
|
||||
></slot>
|
||||
</template>
|
||||
<template
|
||||
v-if="slot.expand"
|
||||
#expand="slotProp: { data: any, column: any }"
|
||||
>
|
||||
<slot
|
||||
name="expand"
|
||||
:data="slotProp.data"
|
||||
:column="slotProp.column"
|
||||
></slot>
|
||||
</template>
|
||||
</table-row>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user