vxe-pc-ui
Version:
A vue based PC component library
746 lines (745 loc) • 22.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _ui = require("../../ui");
var _dom = require("../../ui/src/dom");
var _utils = require("../../ui/src/utils");
var _log = require("../../ui/src/log");
var _tooltip = _interopRequireDefault(require("../../tooltip/src/tooltip"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = (0, _vue.defineComponent)({
name: 'VxeButton',
props: {
/**
* 按钮类型
*/
type: String,
mode: String,
className: [String, Function],
popupClassName: [String, Function],
/**
* 按钮尺寸
*/
size: {
type: String,
default: () => (0, _ui.getConfig)().button.size || (0, _ui.getConfig)().size
},
/**
* 用来标识这一项
*/
name: [String, Number],
routerLink: Object,
/**
* 权限码
*/
permissionCode: [String, Number],
/**
* 按钮内容
*/
content: String,
/**
* 固定显示下拉面板的方向
*/
placement: String,
/**
* 按钮状态
*/
status: String,
/**
* 标题
*/
title: String,
/**
* 按钮的图标
*/
icon: String,
/**
* 圆角边框
*/
round: Boolean,
/**
* 圆角按钮
*/
circle: Boolean,
/**
* 是否禁用
*/
disabled: Boolean,
/**
* 是否加载中
*/
loading: Boolean,
trigger: {
type: String,
default: () => (0, _ui.getConfig)().button.trigger
},
align: String,
prefixTooltip: Object,
suffixTooltip: Object,
/**
* 在下拉面板关闭时销毁内容
*/
destroyOnClose: {
type: Boolean,
default: () => (0, _ui.getConfig)().button.destroyOnClose
},
/**
* 是否将弹框容器插入于 body 内
*/
transfer: {
type: Boolean,
default: null
}
},
emits: ['click', 'mouseenter', 'mouseleave', 'dropdown-click'],
setup(props, context) {
const {
slots,
emit
} = context;
const $xeModal = (0, _vue.inject)('$xeModal', null);
const $xeDrawer = (0, _vue.inject)('$xeDrawer', null);
const $xeTable = (0, _vue.inject)('$xeTable', null);
const $xeForm = (0, _vue.inject)('$xeForm', null);
const $xeButtonGroup = (0, _vue.inject)('$xeButtonGroup', null);
const xID = _xeUtils.default.uniqueId();
const {
computeSize
} = (0, _ui.useSize)(props);
const {
computePermissionInfo
} = (0, _ui.usePermission)(props);
const reactData = (0, _vue.reactive)({
initialized: false,
visiblePanel: false,
isAniVisible: false,
isActivated: false,
panelIndex: 0,
panelStyle: {},
panelPlacement: ''
});
const internalData = {
showTime: undefined,
tooltipTimeout: undefined
};
const refElem = (0, _vue.ref)();
const refButton = (0, _vue.ref)();
const refBtnPanel = (0, _vue.ref)();
const refMaps = {
refElem
};
const $xeButton = {
xID,
props,
context,
reactData,
internalData,
getRefMaps: () => refMaps
};
let buttonMethods = {};
const computeBtnTransfer = (0, _vue.computed)(() => {
const {
transfer
} = props;
if (transfer === null) {
const globalTransfer = (0, _ui.getConfig)().button.transfer;
if (_xeUtils.default.isBoolean(globalTransfer)) {
return globalTransfer;
}
if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
return true;
}
}
return transfer;
});
const computeBtnDisabled = (0, _vue.computed)(() => {
const {
disabled
} = props;
const permissionInfo = computePermissionInfo.value;
return disabled || permissionInfo.disabled;
});
const computeIsFormBtn = (0, _vue.computed)(() => {
const {
type
} = props;
if (type) {
return ['submit', 'reset', 'button'].indexOf(type) > -1;
}
return false;
});
const computeBtnMode = (0, _vue.computed)(() => {
const {
type,
mode
} = props;
if (mode === 'text' || type === 'text' || $xeButtonGroup && $xeButtonGroup.props.mode === 'text') {
return 'text';
}
return 'button';
});
const computeBtnStatus = (0, _vue.computed)(() => {
const {
status
} = props;
if (status) {
return status;
}
if ($xeButtonGroup) {
return $xeButtonGroup.props.status;
}
return '';
});
const computeBtnAlign = (0, _vue.computed)(() => {
const {
align
} = props;
if (align) {
return align;
}
if ($xeButtonGroup) {
return $xeButtonGroup.props.align;
}
return false;
});
const computeBtnRound = (0, _vue.computed)(() => {
const {
round
} = props;
if (round) {
return round;
}
if ($xeButtonGroup) {
return $xeButtonGroup.props.round;
}
return false;
});
const computeBtnCircle = (0, _vue.computed)(() => {
const {
circle
} = props;
if (circle) {
return circle;
}
if ($xeButtonGroup) {
return $xeButtonGroup.props.circle;
}
return false;
});
const computePrefixTipOpts = (0, _vue.computed)(() => {
return Object.assign({}, props.prefixTooltip);
});
const computeSuffixTipOpts = (0, _vue.computed)(() => {
return Object.assign({}, props.suffixTooltip);
});
const updateZindex = () => {
if (reactData.panelIndex < (0, _utils.getLastZIndex)()) {
reactData.panelIndex = (0, _utils.nextZIndex)();
}
};
const updatePlacement = () => {
return (0, _vue.nextTick)().then(() => {
const {
placement
} = props;
const {
panelIndex
} = reactData;
const targetElem = refButton.value;
const panelElem = refBtnPanel.value;
const btnTransfer = computeBtnTransfer.value;
if (panelElem && targetElem) {
const targetHeight = targetElem.offsetHeight;
const targetWidth = targetElem.offsetWidth;
const panelHeight = panelElem.offsetHeight;
const panelWidth = panelElem.offsetWidth;
const marginSize = 5;
const panelStyle = {
zIndex: panelIndex
};
const {
top,
left,
boundingTop,
visibleHeight,
visibleWidth
} = (0, _dom.getAbsolutePos)(targetElem);
let panelPlacement = 'bottom';
if (btnTransfer) {
let btnLeft = left + targetWidth - panelWidth;
let btnTop = top + targetHeight;
if (placement === 'top') {
panelPlacement = 'top';
btnTop = top - panelHeight;
} else if (!placement) {
// 如果下面不够放，则向上
if (boundingTop + targetHeight + panelHeight + marginSize > visibleHeight) {
panelPlacement = 'top';
btnTop = top - panelHeight;
}
// 如果上面不够放，则向下（优先）
if (btnTop < marginSize) {
panelPlacement = 'bottom';
btnTop = top + targetHeight;
}
}
// 如果溢出右边
if (btnLeft + panelWidth + marginSize > visibleWidth) {
btnLeft -= btnLeft + panelWidth + marginSize - visibleWidth;
}
// 如果溢出左边
if (btnLeft < marginSize) {
btnLeft = marginSize;
}
Object.assign(panelStyle, {
left: `${btnLeft}px`,
right: 'auto',
top: `${btnTop}px`,
minWidth: `${targetWidth}px`
});
} else {
if (placement === 'top') {
panelPlacement = 'top';
panelStyle.bottom = `${targetHeight}px`;
} else if (!placement) {
// 如果下面不够放，则向上
if (boundingTop + targetHeight + panelHeight > visibleHeight) {
// 如果上面不够放，则向下（优先）
if (boundingTop - targetHeight - panelHeight > marginSize) {
panelPlacement = 'top';
panelStyle.bottom = `${targetHeight}px`;
}
}
}
}
reactData.panelStyle = panelStyle;
reactData.panelPlacement = panelPlacement;
return (0, _vue.nextTick)();
}
});
};
const clickEvent = evnt => {
if ($xeButtonGroup) {
$xeButtonGroup.handleClick({
name: props.name
}, evnt);
}
dispatchEvent('click', {
$event: evnt
}, evnt);
};
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
} = (0, _dom.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'),
$event: evnt
}, 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 => {
closePanel();
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) {
closePanel();
} 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 (0, _vue.nextTick)();
};
const closePanel = () => {
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 (0, _vue.nextTick)();
};
const mouseleaveDropdownEvent = () => {
closePanel();
};
const renderTooltipIcon = (tipOpts, type) => {
return (0, _vue.h)(_tooltip.default, {
useHTML: tipOpts.useHTML,
content: tipOpts.content,
enterable: tipOpts.enterable,
theme: tipOpts.theme
}, {
default() {
return (0, _vue.h)('i', {
class: [`vxe-button--tooltip-${type}-icon`, tipOpts.icon || (0, _ui.getIcon)().BUTTON_TOOLTIP_ICON]
});
}
});
};
const renderContent = () => {
const {
content,
icon,
loading,
prefixTooltip,
suffixTooltip
} = props;
const prefixTipOpts = computePrefixTipOpts.value;
const suffixTipOpts = computeSuffixTipOpts.value;
const iconSlot = slots.icon;
const defaultSlot = slots.default;
const contVNs = [];
if (prefixTooltip) {
contVNs.push(renderTooltipIcon(prefixTipOpts, 'prefix'));
}
if (loading) {
contVNs.push((0, _vue.h)('i', {
class: ['vxe-button--loading-icon', (0, _ui.getIcon)().BUTTON_LOADING]
}));
} else if (iconSlot) {
contVNs.push((0, _vue.h)('span', {
class: 'vxe-button--custom-icon'
}, iconSlot({})));
} else if (icon) {
contVNs.push((0, _vue.h)('i', {
class: ['vxe-button--icon', icon]
}));
}
if (defaultSlot) {
contVNs.push((0, _vue.h)('span', {
class: 'vxe-button--content'
}, defaultSlot({})));
} else if (content) {
contVNs.push((0, _vue.h)('span', {
class: 'vxe-button--content'
}, (0, _utils.getFuncText)(content)));
}
if (suffixTooltip) {
contVNs.push(renderTooltipIcon(suffixTipOpts, 'suffix'));
}
return contVNs;
};
const dispatchEvent = (type, params, evnt) => {
emit(type, (0, _ui.createEvent)(evnt, {
$button: $xeButton
}, params));
};
buttonMethods = {
dispatchEvent,
openPanel,
closePanel,
focus() {
const btnElem = refButton.value;
if (btnElem) {
btnElem.focus();
}
return (0, _vue.nextTick)();
},
blur() {
const btnElem = refButton.value;
if (btnElem) {
btnElem.blur();
}
return (0, _vue.nextTick)();
}
};
const handleGlobalMousewheelEvent = evnt => {
const panelElem = refBtnPanel.value;
if (reactData.visiblePanel && !(0, _dom.getEventTargetNode)(evnt, panelElem).flag) {
closePanel();
}
};
const handleGlobalMousedownEvent = evnt => {
const btnDisabled = computeBtnDisabled.value;
const {
visiblePanel
} = reactData;
if (!btnDisabled) {
const el = refElem.value;
const panelElem = refBtnPanel.value;
reactData.isActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelElem).flag;
if (visiblePanel && !reactData.isActivated) {
closePanel();
}
}
};
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 vSize = computeSize.value;
const downsSlot = slots.dropdowns;
if (!permissionInfo.visible) {
return (0, _vue.createCommentVNode)();
}
if (downsSlot) {
const btnOns = {};
const panelOns = {};
if (trigger === 'hover') {
// hover 触发
btnOns.onMouseenter = mouseenterTargetEvent;
btnOns.onMouseleave = mouseleaveTargetEvent;
panelOns.onMouseenter = mouseenterDropdownEvent;
panelOns.onMouseleave = mouseleaveDropdownEvent;
}
return (0, _vue.h)('div', {
ref: refElem,
class: ['vxe-button--dropdown', className ? _xeUtils.default.isFunction(className) ? className({
$button: $xeButton
}) : className : '', {
[`size--${vSize}`]: vSize,
'is--active': visiblePanel
}]
}, [routerLink ? (0, _vue.h)((0, _vue.resolveComponent)('router-link'), Object.assign({
ref: refButton,
class: ['vxe-button', 'vxe-button--link', `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : '', className ? _xeUtils.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([(0, _vue.h)('i', {
class: `vxe-button--dropdown-arrow ${(0, _ui.getIcon)().BUTTON_DROPDOWN}`
})]);
}
}) : (0, _vue.h)('button', Object.assign({
ref: refButton,
class: ['vxe-button', `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : '', className ? _xeUtils.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([(0, _vue.h)('i', {
class: `vxe-button--dropdown-arrow ${(0, _ui.getIcon)().BUTTON_DROPDOWN}`
})])), (0, _vue.h)(_vue.Teleport, {
to: 'body',
disabled: btnTransfer ? !initialized : true
}, [(0, _vue.h)('div', Object.assign({
ref: refBtnPanel,
class: ['vxe-button--dropdown-panel', popupClassName ? _xeUtils.default.isFunction(popupClassName) ? popupClassName({
$button: $xeButton
}) : popupClassName : '', {
[`size--${vSize}`]: vSize,
'ani--leave': isAniVisible,
'ani--enter': visiblePanel
}],
placement: reactData.panelPlacement,
style: reactData.panelStyle
}, panelOns), initialized && (visiblePanel || isAniVisible) ? [(0, _vue.h)('div', {
class: 'vxe-button--dropdown-wrapper',
onMousedown: mousedownDropdownEvent,
onClick: clickDropdownEvent
}, destroyOnClose && !visiblePanel ? [] : downsSlot({}))] : [])])]);
}
if (routerLink) {
return (0, _vue.h)((0, _vue.resolveComponent)('router-link'), {
ref: refButton,
class: ['vxe-button', 'vxe-button--link', `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : '', className ? _xeUtils.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 (0, _vue.h)('button', {
ref: refButton,
class: ['vxe-button', `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : '', className ? _xeUtils.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;
(0, _vue.onMounted)(() => {
if (process.env.NODE_ENV === 'development') {
if (props.type === 'text') {
(0, _log.warnLog)('vxe.error.delProp', ['type=text', 'mode=text']);
}
}
_ui.globalEvents.on($xeButton, 'mousewheel', handleGlobalMousewheelEvent);
_ui.globalEvents.on($xeButton, 'mousedown', handleGlobalMousedownEvent);
});
(0, _vue.onUnmounted)(() => {
_ui.globalEvents.off($xeButton, 'mousewheel');
_ui.globalEvents.off($xeButton, 'mousedown');
});
return $xeButton;
},
render() {
return this.renderVN();
}
});