752 lines
24 KiB
JavaScript
752 lines
24 KiB
JavaScript
import {
|
|
tooltip_default
|
|
} from "./chunk-ULIXT2HE.js";
|
|
import {
|
|
getEventTargetNode,
|
|
updatePanelPlacement
|
|
} from "./chunk-PBZHTG65.js";
|
|
import {
|
|
getFuncText,
|
|
getLastZIndex,
|
|
nextZIndex
|
|
} from "./chunk-REHJGRQO.js";
|
|
import {
|
|
getSlotVNs
|
|
} from "./chunk-LXH6LNL6.js";
|
|
import {
|
|
defineVxeComponent,
|
|
warnLog
|
|
} from "./chunk-ML6NAHIO.js";
|
|
import {
|
|
createEvent,
|
|
getConfig,
|
|
getIcon,
|
|
globalEvents,
|
|
permission,
|
|
renderEmptyElement,
|
|
renderer,
|
|
require_xe_utils,
|
|
usePermission,
|
|
useSize
|
|
} from "./chunk-YJNUXQVJ.js";
|
|
import {
|
|
Teleport,
|
|
computed,
|
|
h,
|
|
inject,
|
|
nextTick,
|
|
onMounted,
|
|
onUnmounted,
|
|
reactive,
|
|
ref,
|
|
resolveComponent
|
|
} from "./chunk-AAHVYXXY.js";
|
|
import {
|
|
__toESM
|
|
} from "./chunk-V4OQ3NZ2.js";
|
|
|
|
// ../node_modules/.pnpm/vxe-pc-ui@4.10.22_vue@3.5.24_typescript@5.9.3_/node_modules/vxe-pc-ui/es/button/src/button.js
|
|
var import_xe_utils = __toESM(require_xe_utils());
|
|
var VxeButtonComponent = defineVxeComponent({
|
|
name: "VxeButton",
|
|
props: {
|
|
/**
|
|
* 按钮类型
|
|
*/
|
|
type: String,
|
|
mode: String,
|
|
className: [String, Function],
|
|
popupClassName: [String, Function],
|
|
/**
|
|
* 按钮尺寸
|
|
*/
|
|
size: {
|
|
type: String,
|
|
default: () => getConfig().button.size || getConfig().size
|
|
},
|
|
zIndex: Number,
|
|
/**
|
|
* 用来标识这一项
|
|
*/
|
|
name: [String, Number],
|
|
routerLink: Object,
|
|
/**
|
|
* 权限码
|
|
*/
|
|
permissionCode: [String, Number],
|
|
/**
|
|
* 按钮内容
|
|
*/
|
|
content: String,
|
|
/**
|
|
* 固定显示下拉面板的方向
|
|
*/
|
|
placement: String,
|
|
/**
|
|
* 按钮状态
|
|
*/
|
|
status: String,
|
|
/**
|
|
* 标题
|
|
*/
|
|
title: String,
|
|
/**
|
|
* 按钮的前缀图标，属于 prefix-icon 的简写
|
|
*/
|
|
icon: String,
|
|
iconRender: Object,
|
|
/**
|
|
* 按钮的前缀图标
|
|
*/
|
|
prefixIcon: String,
|
|
prefixRender: Object,
|
|
/**
|
|
* 按钮的后缀图标
|
|
*/
|
|
suffixIcon: String,
|
|
suffixRender: Object,
|
|
/**
|
|
* 圆角边框
|
|
*/
|
|
round: Boolean,
|
|
/**
|
|
* 圆角按钮
|
|
*/
|
|
circle: Boolean,
|
|
/**
|
|
* 是否禁用
|
|
*/
|
|
disabled: Boolean,
|
|
/**
|
|
* 是否加载中
|
|
*/
|
|
loading: Boolean,
|
|
trigger: {
|
|
type: String,
|
|
default: () => getConfig().button.trigger
|
|
},
|
|
align: String,
|
|
prefixTooltip: Object,
|
|
suffixTooltip: Object,
|
|
options: Array,
|
|
/**
|
|
* 在下拉面板关闭时销毁内容
|
|
*/
|
|
destroyOnClose: {
|
|
type: Boolean,
|
|
default: () => getConfig().button.destroyOnClose
|
|
},
|
|
/**
|
|
* 是否将弹框容器插入于 body 内
|
|
*/
|
|
transfer: {
|
|
type: Boolean,
|
|
default: null
|
|
}
|
|
},
|
|
emits: [
|
|
"click",
|
|
"mouseenter",
|
|
"mouseleave",
|
|
"dropdown-click",
|
|
"dropdownClick"
|
|
],
|
|
setup(props, context) {
|
|
const { slots, emit } = context;
|
|
const $xeModal = inject("$xeModal", null);
|
|
const $xeDrawer = inject("$xeDrawer", null);
|
|
const $xeTable = inject("$xeTable", null);
|
|
const $xeForm = inject("$xeForm", null);
|
|
const $xeButtonGroup = inject("$xeButtonGroup", null);
|
|
const xID = import_xe_utils.default.uniqueId();
|
|
const { computeSize } = useSize(props);
|
|
const { computePermissionInfo } = usePermission(props);
|
|
const reactData = reactive({
|
|
initialized: false,
|
|
visiblePanel: false,
|
|
isAniVisible: false,
|
|
isActivated: false,
|
|
panelIndex: 0,
|
|
panelStyle: {},
|
|
panelPlacement: ""
|
|
});
|
|
const internalData = {
|
|
showTime: void 0,
|
|
tooltipTimeout: void 0
|
|
};
|
|
const refElem = ref();
|
|
const refButton = ref();
|
|
const refBtnPanel = ref();
|
|
const refMaps = {
|
|
refElem
|
|
};
|
|
const $xeButton = {
|
|
xID,
|
|
props,
|
|
context,
|
|
reactData,
|
|
internalData,
|
|
getRefMaps: () => refMaps
|
|
};
|
|
let buttonMethods = {};
|
|
const computeBtnTransfer = computed(() => {
|
|
const { transfer } = props;
|
|
if (transfer === null) {
|
|
const globalTransfer = getConfig().button.transfer;
|
|
if (import_xe_utils.default.isBoolean(globalTransfer)) {
|
|
return globalTransfer;
|
|
}
|
|
if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
|
|
return true;
|
|
}
|
|
}
|
|
return transfer;
|
|
});
|
|
const computeBtnDisabled = computed(() => {
|
|
const { disabled } = props;
|
|
const permissionInfo = computePermissionInfo.value;
|
|
return disabled || permissionInfo.disabled;
|
|
});
|
|
const computeIsFormBtn = computed(() => {
|
|
const { type } = props;
|
|
if (type) {
|
|
return ["submit", "reset", "button"].indexOf(type) > -1;
|
|
}
|
|
return false;
|
|
});
|
|
const computeBtnMode = computed(() => {
|
|
const { type, mode } = props;
|
|
if (mode === "text" || type === "text" || $xeButtonGroup && $xeButtonGroup.props.mode === "text") {
|
|
return "text";
|
|
}
|
|
return "button";
|
|
});
|
|
const computeBtnStatus = computed(() => {
|
|
const { status } = props;
|
|
if (status) {
|
|
return status;
|
|
}
|
|
if ($xeButtonGroup) {
|
|
return $xeButtonGroup.props.status;
|
|
}
|
|
return "";
|
|
});
|
|
const computeBtnAlign = computed(() => {
|
|
const { align } = props;
|
|
if (align) {
|
|
return align;
|
|
}
|
|
if ($xeButtonGroup) {
|
|
return $xeButtonGroup.props.align;
|
|
}
|
|
return false;
|
|
});
|
|
const computeBtnRound = computed(() => {
|
|
const { round } = props;
|
|
if (round) {
|
|
return round;
|
|
}
|
|
if ($xeButtonGroup) {
|
|
return $xeButtonGroup.props.round;
|
|
}
|
|
return false;
|
|
});
|
|
const computeBtnCircle = computed(() => {
|
|
const { circle } = props;
|
|
if (circle) {
|
|
return circle;
|
|
}
|
|
if ($xeButtonGroup) {
|
|
return $xeButtonGroup.props.circle;
|
|
}
|
|
return false;
|
|
});
|
|
const computeDownBtnList = computed(() => {
|
|
const { options } = props;
|
|
if (options) {
|
|
return options.filter((item) => {
|
|
const { permissionCode } = item;
|
|
return !permissionCode || permission.checkVisible(permissionCode);
|
|
});
|
|
}
|
|
return [];
|
|
});
|
|
const computePrefixTipOpts = computed(() => {
|
|
return Object.assign({}, getConfig().button.prefixTooltip, props.prefixTooltip);
|
|
});
|
|
const computeSuffixTipOpts = computed(() => {
|
|
return Object.assign({}, getConfig().button.suffixTooltip, props.suffixTooltip);
|
|
});
|
|
const updateZindex = () => {
|
|
const { zIndex } = props;
|
|
if (zIndex) {
|
|
reactData.panelIndex = zIndex;
|
|
} else if (reactData.panelIndex < getLastZIndex()) {
|
|
reactData.panelIndex = nextZIndex();
|
|
}
|
|
};
|
|
const updatePlacement = () => {
|
|
const { placement } = props;
|
|
const { panelIndex } = reactData;
|
|
const targetElem = refButton.value;
|
|
const panelElem = refBtnPanel.value;
|
|
const btnTransfer = computeBtnTransfer.value;
|
|
const handleStyle = () => {
|
|
const ppObj = updatePanelPlacement(targetElem, panelElem, {
|
|
placement,
|
|
teleportTo: btnTransfer
|
|
});
|
|
const panelStyle = Object.assign(ppObj.style, {
|
|
zIndex: panelIndex
|
|
});
|
|
reactData.panelStyle = panelStyle;
|
|
reactData.panelPlacement = ppObj.placement;
|
|
};
|
|
handleStyle();
|
|
return nextTick().then(handleStyle);
|
|
};
|
|
const clickEvent = (evnt) => {
|
|
if ($xeButtonGroup) {
|
|
$xeButtonGroup.handleClick({ name: props.name }, evnt);
|
|
}
|
|
dispatchEvent("click", { $event: evnt }, evnt);
|
|
};
|
|
const downBtnClickEvent = (params, option) => {
|
|
const { $event } = params;
|
|
hidePanel();
|
|
dispatchEvent("dropdown-click", { name: option.name, option }, $event);
|
|
};
|
|
const mousedownDropdownEvent = (evnt) => {
|
|
const isLeftBtn = evnt.button === 0;
|
|
if (isLeftBtn) {
|
|
evnt.stopPropagation();
|
|
}
|
|
};
|
|
const clickDropdownEvent = (evnt) => {
|
|
const dropdownElem = evnt.currentTarget;
|
|
const panelElem = refBtnPanel.value;
|
|
const { flag, targetElem } = getEventTargetNode(evnt, dropdownElem, "vxe-button");
|
|
if (flag) {
|
|
if (panelElem) {
|
|
panelElem.dataset.active = "N";
|
|
}
|
|
reactData.visiblePanel = false;
|
|
setTimeout(() => {
|
|
if (!panelElem || panelElem.dataset.active !== "Y") {
|
|
reactData.isAniVisible = false;
|
|
}
|
|
}, 350);
|
|
dispatchEvent("dropdown-click", { name: targetElem.getAttribute("name"), option: null }, evnt);
|
|
}
|
|
};
|
|
const mouseenterDropdownEvent = () => {
|
|
const panelElem = refBtnPanel.value;
|
|
if (panelElem) {
|
|
panelElem.dataset.active = "Y";
|
|
reactData.isAniVisible = true;
|
|
setTimeout(() => {
|
|
if (panelElem.dataset.active === "Y") {
|
|
reactData.visiblePanel = true;
|
|
updateZindex();
|
|
updatePlacement();
|
|
setTimeout(() => {
|
|
if (reactData.visiblePanel) {
|
|
updatePlacement();
|
|
}
|
|
}, 50);
|
|
}
|
|
}, 20);
|
|
}
|
|
};
|
|
const mouseenterTargetEvent = (evnt) => {
|
|
const { loading } = props;
|
|
const btnDisabled = computeBtnDisabled.value;
|
|
if (!(btnDisabled || loading)) {
|
|
openPanel();
|
|
mouseenterEvent(evnt);
|
|
}
|
|
};
|
|
const mouseleaveTargetEvent = (evnt) => {
|
|
hidePanel();
|
|
mouseleaveEvent(evnt);
|
|
};
|
|
const mouseenterEvent = (evnt) => {
|
|
dispatchEvent("mouseenter", {}, evnt);
|
|
};
|
|
const mouseleaveEvent = (evnt) => {
|
|
dispatchEvent("mouseleave", {}, evnt);
|
|
};
|
|
const clickTargetEvent = (evnt) => {
|
|
const { loading, trigger } = props;
|
|
const btnDisabled = computeBtnDisabled.value;
|
|
if (!(btnDisabled || loading)) {
|
|
if (trigger === "click") {
|
|
if (reactData.visiblePanel) {
|
|
hidePanel();
|
|
} else {
|
|
openPanel();
|
|
}
|
|
}
|
|
clickEvent(evnt);
|
|
}
|
|
};
|
|
const openPanel = () => {
|
|
const { trigger } = props;
|
|
const panelElem = refBtnPanel.value;
|
|
if (panelElem) {
|
|
panelElem.dataset.active = "Y";
|
|
if (!reactData.initialized) {
|
|
reactData.initialized = true;
|
|
}
|
|
internalData.showTime = setTimeout(() => {
|
|
if (panelElem.dataset.active === "Y") {
|
|
mouseenterDropdownEvent();
|
|
} else {
|
|
reactData.isAniVisible = false;
|
|
}
|
|
}, trigger === "click" ? 50 : 250);
|
|
}
|
|
return nextTick();
|
|
};
|
|
const hidePanel = () => {
|
|
const panelElem = refBtnPanel.value;
|
|
clearTimeout(internalData.showTime);
|
|
if (panelElem) {
|
|
panelElem.dataset.active = "N";
|
|
setTimeout(() => {
|
|
if (panelElem.dataset.active !== "Y") {
|
|
reactData.visiblePanel = false;
|
|
setTimeout(() => {
|
|
if (panelElem.dataset.active !== "Y") {
|
|
reactData.isAniVisible = false;
|
|
}
|
|
}, 350);
|
|
}
|
|
}, 100);
|
|
} else {
|
|
reactData.isAniVisible = false;
|
|
reactData.visiblePanel = false;
|
|
}
|
|
return nextTick();
|
|
};
|
|
const mouseleaveDropdownEvent = () => {
|
|
hidePanel();
|
|
};
|
|
const renderTooltipIcon = (tipOpts, type) => {
|
|
return h(tooltip_default, {
|
|
useHTML: tipOpts.useHTML,
|
|
content: tipOpts.content,
|
|
enterable: tipOpts.enterable,
|
|
theme: tipOpts.theme
|
|
}, {
|
|
default() {
|
|
return h("span", {
|
|
class: `vxe-button--item vxe-button--tooltip-${type}-icon`
|
|
}, [
|
|
h("i", {
|
|
class: tipOpts.icon || getIcon().BUTTON_TOOLTIP_ICON
|
|
})
|
|
]);
|
|
}
|
|
});
|
|
};
|
|
const renderContent = () => {
|
|
const { content, suffixIcon, loading, prefixTooltip, suffixTooltip, suffixRender } = props;
|
|
const prefixIcon = props.prefixIcon || props.icon;
|
|
const prefixRender = props.prefixRender || props.iconRender;
|
|
const prefixTipOpts = computePrefixTipOpts.value;
|
|
const suffixTipOpts = computeSuffixTipOpts.value;
|
|
const prefixIconSlot = slots.prefix || slots.icon;
|
|
const suffixIconSlot = slots.suffix;
|
|
const defaultSlot = slots.default;
|
|
const contVNs = [];
|
|
if (prefixTooltip) {
|
|
contVNs.push(renderTooltipIcon(prefixTipOpts, "prefix"));
|
|
}
|
|
if (loading) {
|
|
contVNs.push(h("i", {
|
|
class: ["vxe-button--item vxe-button--loading-icon", getIcon().BUTTON_LOADING]
|
|
}));
|
|
} else if (prefixIconSlot) {
|
|
contVNs.push(h("span", {
|
|
class: "vxe-button--item vxe-button--custom-prefix-icon"
|
|
}, prefixIconSlot({})));
|
|
} else if (prefixRender) {
|
|
const compConf = renderer.get(prefixRender.name);
|
|
const pIconMethod = compConf ? compConf.renderButtonPrefix : null;
|
|
contVNs.push(h("span", {
|
|
class: ["vxe-button--item vxe-button--custom-prefix-icon"]
|
|
}, pIconMethod ? getSlotVNs(pIconMethod(prefixRender, { $button: $xeButton })) : []));
|
|
} else if (prefixIcon) {
|
|
contVNs.push(h("i", {
|
|
class: ["vxe-button--item vxe-button--prefix-icon", prefixIcon]
|
|
}));
|
|
}
|
|
if (defaultSlot) {
|
|
contVNs.push(h("span", {
|
|
class: "vxe-button--item vxe-button--content"
|
|
}, defaultSlot({})));
|
|
} else if (content) {
|
|
contVNs.push(h("span", {
|
|
class: "vxe-button--item vxe-button--content"
|
|
}, getFuncText(content)));
|
|
}
|
|
if (suffixIconSlot) {
|
|
contVNs.push(h("span", {
|
|
class: "vxe-button--item vxe-button--custom-suffix-icon"
|
|
}, suffixIconSlot({})));
|
|
} else if (suffixRender) {
|
|
const compConf = renderer.get(suffixRender.name);
|
|
const sIconMethod = compConf ? compConf.renderButtonSuffix : null;
|
|
contVNs.push(h("span", {
|
|
class: ["vxe-button--item vxe-button--custom-suffix-icon"]
|
|
}, sIconMethod ? getSlotVNs(sIconMethod(suffixRender, { $button: $xeButton })) : []));
|
|
} else if (suffixIcon) {
|
|
contVNs.push(h("i", {
|
|
class: ["vxe-button--item vxe-button--suffix-icon", suffixIcon]
|
|
}));
|
|
}
|
|
if (suffixTooltip) {
|
|
contVNs.push(renderTooltipIcon(suffixTipOpts, "suffix"));
|
|
}
|
|
return contVNs;
|
|
};
|
|
const dispatchEvent = (type, params, evnt) => {
|
|
emit(type, createEvent(evnt, { $button: $xeButton }, params));
|
|
};
|
|
buttonMethods = {
|
|
dispatchEvent,
|
|
openPanel,
|
|
closePanel: hidePanel,
|
|
focus() {
|
|
const btnElem = refButton.value;
|
|
if (btnElem) {
|
|
btnElem.focus();
|
|
}
|
|
return nextTick();
|
|
},
|
|
blur() {
|
|
const btnElem = refButton.value;
|
|
if (btnElem) {
|
|
btnElem.blur();
|
|
}
|
|
return nextTick();
|
|
}
|
|
};
|
|
const handleGlobalMousewheelEvent = (evnt) => {
|
|
const panelElem = refBtnPanel.value;
|
|
if (reactData.visiblePanel && !getEventTargetNode(evnt, panelElem).flag) {
|
|
hidePanel();
|
|
}
|
|
};
|
|
const handleGlobalMousedownEvent = (evnt) => {
|
|
const btnDisabled = computeBtnDisabled.value;
|
|
const { visiblePanel } = reactData;
|
|
if (!btnDisabled) {
|
|
const el = refElem.value;
|
|
const panelElem = refBtnPanel.value;
|
|
reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag;
|
|
if (visiblePanel && !reactData.isActivated) {
|
|
hidePanel();
|
|
}
|
|
}
|
|
};
|
|
const handleGlobalResizeEvent = () => {
|
|
const { visiblePanel } = reactData;
|
|
if (visiblePanel) {
|
|
updatePlacement();
|
|
}
|
|
};
|
|
Object.assign($xeButton, buttonMethods);
|
|
const renderVN = () => {
|
|
const { className, popupClassName, trigger, title, routerLink, type, destroyOnClose, name, loading } = props;
|
|
const { initialized, isAniVisible, visiblePanel } = reactData;
|
|
const isFormBtn = computeIsFormBtn.value;
|
|
const btnMode = computeBtnMode.value;
|
|
const btnStatus = computeBtnStatus.value;
|
|
const btnRound = computeBtnRound.value;
|
|
const btnAlign = computeBtnAlign.value;
|
|
const btnCircle = computeBtnCircle.value;
|
|
const btnTransfer = computeBtnTransfer.value;
|
|
const btnDisabled = computeBtnDisabled.value;
|
|
const permissionInfo = computePermissionInfo.value;
|
|
const downBtnList = computeDownBtnList.value;
|
|
const vSize = computeSize.value;
|
|
const dropdownsSlot = slots.dropdowns;
|
|
if (!permissionInfo.visible) {
|
|
return renderEmptyElement($xeButton);
|
|
}
|
|
if (dropdownsSlot || downBtnList.length) {
|
|
const btnOns = {};
|
|
const panelOns = {};
|
|
if (trigger === "hover") {
|
|
btnOns.onMouseenter = mouseenterTargetEvent;
|
|
btnOns.onMouseleave = mouseleaveTargetEvent;
|
|
panelOns.onMouseenter = mouseenterDropdownEvent;
|
|
panelOns.onMouseleave = mouseleaveDropdownEvent;
|
|
}
|
|
return h("div", {
|
|
ref: refElem,
|
|
class: ["vxe-button--dropdown", className ? import_xe_utils.default.isFunction(className) ? className({ $button: $xeButton }) : className : "", {
|
|
[`size--${vSize}`]: vSize,
|
|
"is--active": visiblePanel
|
|
}]
|
|
}, [
|
|
routerLink ? h(resolveComponent("router-link"), Object.assign({
|
|
ref: refButton,
|
|
class: ["vxe-button", "vxe-button--link", `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : "", className ? import_xe_utils.default.isFunction(className) ? className({ $button: $xeButton }) : className : "", {
|
|
[`size--${vSize}`]: vSize,
|
|
[`theme--${btnStatus}`]: btnStatus,
|
|
"is--round": btnRound,
|
|
"is--circle": btnCircle,
|
|
"is--disabled": btnDisabled || loading,
|
|
"is--loading": loading
|
|
}],
|
|
title,
|
|
name,
|
|
type: isFormBtn ? type : "button",
|
|
disabled: btnDisabled || loading,
|
|
to: routerLink,
|
|
onClick: clickTargetEvent
|
|
}, btnOns), {
|
|
default() {
|
|
return renderContent().concat([
|
|
h("i", {
|
|
class: `vxe-button--dropdown-arrow ${getIcon().BUTTON_DROPDOWN}`
|
|
})
|
|
]);
|
|
}
|
|
}) : h("button", Object.assign({
|
|
ref: refButton,
|
|
class: ["vxe-button", `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : "", className ? import_xe_utils.default.isFunction(className) ? className({ $button: $xeButton }) : className : "", {
|
|
[`size--${vSize}`]: vSize,
|
|
[`theme--${btnStatus}`]: btnStatus,
|
|
"is--round": btnRound,
|
|
"is--circle": btnCircle,
|
|
"is--disabled": btnDisabled || loading,
|
|
"is--loading": loading
|
|
}],
|
|
title,
|
|
name,
|
|
type: isFormBtn ? type : "button",
|
|
disabled: btnDisabled || loading,
|
|
onClick: clickTargetEvent
|
|
}, btnOns), renderContent().concat([
|
|
h("i", {
|
|
class: `vxe-button--dropdown-arrow ${getIcon().BUTTON_DROPDOWN}`
|
|
})
|
|
])),
|
|
h(Teleport, {
|
|
to: "body",
|
|
disabled: btnTransfer ? !initialized : true
|
|
}, [
|
|
h("div", Object.assign({ ref: refBtnPanel, class: ["vxe-button--dropdown-panel", popupClassName ? import_xe_utils.default.isFunction(popupClassName) ? popupClassName({ $button: $xeButton }) : popupClassName : "", {
|
|
[`size--${vSize}`]: vSize,
|
|
"is--transfer": btnTransfer,
|
|
"ani--leave": isAniVisible,
|
|
"ani--enter": visiblePanel
|
|
}], placement: reactData.panelPlacement, style: reactData.panelStyle }, panelOns), initialized && (visiblePanel || isAniVisible) ? [
|
|
dropdownsSlot ? h("div", {
|
|
class: "vxe-button--dropdown-wrapper",
|
|
onMousedown: mousedownDropdownEvent,
|
|
onClick: clickDropdownEvent
|
|
}, initialized && (destroyOnClose ? visiblePanel || isAniVisible : true) ? dropdownsSlot({}) : []) : h("div", {
|
|
class: "vxe-button--dropdown-wrapper"
|
|
}, initialized && (destroyOnClose ? visiblePanel || isAniVisible : true) ? downBtnList.map((option, i) => {
|
|
return h(VxeButtonComponent, {
|
|
key: i,
|
|
type: option.type,
|
|
mode: option.mode || btnMode,
|
|
className: option.className,
|
|
name: option.name,
|
|
routerLink: option.routerLink,
|
|
permissionCode: option.permissionCode,
|
|
title: option.title,
|
|
content: option.content,
|
|
status: option.status,
|
|
icon: option.icon,
|
|
round: import_xe_utils.default.isBoolean(option.round) ? option.round : btnMode === "text" ? false : btnRound,
|
|
circle: import_xe_utils.default.isBoolean(option.circle) ? option.circle : btnMode === "text" ? false : btnCircle,
|
|
disabled: option.disabled,
|
|
loading: option.loading,
|
|
align: option.align,
|
|
onClick(params) {
|
|
downBtnClickEvent(params, option);
|
|
}
|
|
});
|
|
}) : [])
|
|
] : [])
|
|
])
|
|
]);
|
|
}
|
|
if (routerLink) {
|
|
return h(resolveComponent("router-link"), {
|
|
ref: refButton,
|
|
class: ["vxe-button", "vxe-button--link", `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : "", className ? import_xe_utils.default.isFunction(className) ? className({ $button: $xeButton }) : className : "", {
|
|
[`size--${vSize}`]: vSize,
|
|
[`theme--${btnStatus}`]: btnStatus,
|
|
"is--round": btnRound,
|
|
"is--circle": btnCircle,
|
|
"is--disabled": btnDisabled || loading,
|
|
"is--loading": loading
|
|
}],
|
|
title,
|
|
name,
|
|
type: isFormBtn ? type : "button",
|
|
disabled: btnDisabled || loading,
|
|
to: routerLink,
|
|
onClick: clickEvent,
|
|
onMouseenter: mouseenterEvent,
|
|
onMouseleave: mouseleaveEvent
|
|
}, {
|
|
default() {
|
|
return renderContent();
|
|
}
|
|
});
|
|
}
|
|
return h("button", {
|
|
ref: refButton,
|
|
class: ["vxe-button", `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : "", className ? import_xe_utils.default.isFunction(className) ? className({ $button: $xeButton }) : className : "", {
|
|
[`size--${vSize}`]: vSize,
|
|
[`theme--${btnStatus}`]: btnStatus,
|
|
"is--round": btnRound,
|
|
"is--circle": btnCircle,
|
|
"is--disabled": btnDisabled || loading,
|
|
"is--loading": loading
|
|
}],
|
|
title,
|
|
name,
|
|
type: isFormBtn ? type : "button",
|
|
disabled: btnDisabled || loading,
|
|
onClick: clickEvent,
|
|
onMouseenter: mouseenterEvent,
|
|
onMouseleave: mouseleaveEvent
|
|
}, renderContent());
|
|
};
|
|
$xeButton.renderVN = renderVN;
|
|
onMounted(() => {
|
|
if (props.type === "text") {
|
|
warnLog("vxe.error.delProp", ["[button] type=text", "mode=text"]);
|
|
}
|
|
globalEvents.on($xeButton, "mousewheel", handleGlobalMousewheelEvent);
|
|
globalEvents.on($xeButton, "mousedown", handleGlobalMousedownEvent);
|
|
globalEvents.on($xeButton, "resize", handleGlobalResizeEvent);
|
|
});
|
|
onUnmounted(() => {
|
|
globalEvents.off($xeButton, "mousewheel");
|
|
globalEvents.off($xeButton, "mousedown");
|
|
globalEvents.off($xeButton, "resize");
|
|
});
|
|
return $xeButton;
|
|
},
|
|
render() {
|
|
return this.renderVN();
|
|
}
|
|
});
|
|
var button_default = VxeButtonComponent;
|
|
|
|
export {
|
|
button_default
|
|
};
|
|
//# sourceMappingURL=chunk-ZQ4HFSNQ.js.map
|