mt-ui-components-vue3
Version:
玛果添实UI组件库(Vue3)
261 lines • 10.4 kB
JavaScript
function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) {
const op = ops[i];
const fn = ops[i + 1];
i += 2;
if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
return undefined;
}
if (op === 'access' || op === 'optionalAccess') {
lastAccessLHS = value;
value = fn(value);
}
else if (op === 'call' || op === 'optionalCall') {
value = fn((...args) => value.call(lastAccessLHS, ...args));
lastAccessLHS = undefined;
}
} return value; }
/* Analyzed bindings: {
"bodyStyle": "props",
"cancelText": "props",
"okText": "props",
"showCancel": "props",
"showOk": "props",
"visible": "props",
"confirmLoading": "props",
"destroyOnClose": "props",
"onConfirm": "props",
"popoverProps": "setup-maybe-ref",
"ref": "setup-const",
"computed": "setup-const",
"updateStyle": "setup-maybe-ref",
"Button": "setup-maybe-ref",
"JPopover": "setup-maybe-ref",
"isPromise": "setup-maybe-ref",
"compute": "setup-maybe-ref",
"props": "setup-reactive-const",
"emit": "setup-const",
"myVisible": "setup-ref",
"loading": "setup-ref",
"modalName": "literal-const",
"modalWarpName": "literal-const",
"modalMaskDom": "setup-ref",
"bodyHasScrollbar": "setup-const",
"destroy": "setup-ref",
"showModal": "setup-const",
"hideModal": "setup-const",
"hideModalAll": "setup-const",
"createModal": "setup-const",
"visibleChange": "setup-const",
"cancel": "setup-const",
"confirm": "setup-const"
} */
import { defineComponent as _defineComponent } from 'vue';
import { renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, unref as _unref, withModifiers as _withModifiers, withCtx as _withCtx, createBlock as _createBlock, createElementVNode as _createElementVNode } from "vue";
const _hoisted_1 = { class: "popconfirm-modal-footer" };
import { popoverProps } from 'ant-design-vue/lib/popover';
import { ref, computed } from 'vue';
import { updateStyle } from '../util/document';
import { Button, Popover as JPopover } from '../components';
import { isPromise } from '../util/comm';
const modalName = 'popconfirm-modal-mask';
const modalWarpName = 'popconfirm-modal-warp';
const __sfc_main__ = _defineComponent({
props: {
...popoverProps(),
bodyStyle: {
type: [String, Object],
default: undefined,
},
cancelText: {
type: String,
default: '取消',
},
okText: {
type: String,
default: '确认',
},
showCancel: {
type: Boolean,
default: true,
},
showOk: {
type: Boolean,
default: true,
},
visible: {
type: Boolean,
default: undefined,
},
confirmLoading: {
type: Boolean,
default: false,
},
destroyOnClose: {
type: Boolean,
default: false,
},
onConfirm: Function,
},
emits: ["update:visible", "visibleChange", "confirm", "cancel"],
setup(__props, { emit }) {
const props = __props;
const myVisible = ref(false);
const loading = ref(false);
const modalMaskDom = ref();
const bodyHasScrollbar = () => {
return document.body.scrollHeight > document.body.clientHeight;
};
const destroy = computed(() => {
if (props.destroyOnClose !== false) {
return myVisible.value;
}
return true;
});
const showModal = () => {
const hasScrollbar = bodyHasScrollbar();
if (hasScrollbar) {
updateStyle(document.body, {
overflow: 'hidden',
width: 'calc(100% - 17px)',
});
}
};
const hideModal = () => {
// 获取最后一个隐藏
const modalDivs = document.querySelectorAll(`.${modalName}.hide`);
const hideModal = modalDivs.length ? modalDivs[modalDivs.length - 1] : null;
_optionalChain([modalMaskDom, 'access', _2 => _2.value, 'optionalAccess', _3 => _3.classList, 'optionalAccess', _4 => _4.replace, 'optionalCall', _5 => _5('show', 'close')]); // 关闭自身Mask遮罩
if (!hideModal) {
document.body.removeAttribute('style');
}
else {
hideModal.classList.replace('hide', 'show');
}
};
const hideModalAll = () => {
const modalDivs = document.querySelectorAll(`.${modalName}.show`);
modalDivs.forEach((node) => {
(node).classList.replace('show', 'hide');
});
};
const createModal = () => {
if (!modalMaskDom.value) {
const modalDiv = document.createElement('div');
const modalWarps = document.querySelectorAll(`.${modalWarpName}`);
modalMaskDom.value = modalDiv; // 创建mask遮罩
modalDiv.setAttribute('class', `${modalName} show`); // 添加class
// modalDiv.style.zIndex = `${zIndex}`
_optionalChain([modalWarps, 'access', _6 => _6[modalWarps.length - 1], 'optionalAccess', _7 => _7.insertAdjacentElement, 'call', _8 => _8('beforebegin', modalDiv)]);
}
else {
modalMaskDom.value.classList.replace('close', 'show'); // 替换class为show
}
showModal();
};
const visibleChange = (e) => {
myVisible.value = e;
if (e) {
setTimeout(() => {
// hideModalAll();
createModal();
}, 10);
}
else {
hideModal();
}
emit('update:visible', e);
emit('visibleChange', e);
};
const cancel = () => {
visibleChange(false);
loading.value = false;
emit('cancel');
};
const confirm = async (e) => {
loading.value = true;
const fn = _optionalChain([props, 'access', _9 => _9.onConfirm, 'optionalCall', _10 => _10(e)]);
if (isPromise(fn)) {
(fn)
.then(() => {
visibleChange(false);
})
.finally(() => {
console.log('finally');
loading.value = false;
})
.catch(() => {
console.log('catch');
loading.value = false;
});
}
else {
loading.value = false;
visibleChange(false);
}
};
return (_ctx, _cache) => {
return (_openBlock(), _createBlock(_unref(JPopover), {
trigger: "click",
visible: myVisible.value,
"overlay-class-name": modalWarpName,
placement: _ctx.placement || 'top',
"get-popup-container": _ctx.getPopupContainer,
onVisibleChange: () => { }
}, {
title: _withCtx(() => [
_renderSlot(_ctx.$slots, "title")
]),
content: _withCtx(() => [
(destroy.value)
? (_openBlock(), _createElementBlock("div", {
key: 0,
class: "popconfirm-modal-body",
style: _normalizeStyle(__props.bodyStyle)
}, [
_renderSlot(_ctx.$slots, "content")
], 4 /* STYLE */))
: _createCommentVNode("v-if", true),
_renderSlot(_ctx.$slots, "footer", {}, () => [
_createElementVNode("div", _hoisted_1, [
(__props.showCancel)
? (_openBlock(), _createBlock(_unref(Button), {
key: 0,
size: "small",
onClick: _withModifiers(cancel, ["stop"])
}, {
default: _withCtx(() => [
_createTextVNode(_toDisplayString(__props.cancelText), 1 /* TEXT */)
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["onClick"]))
: _createCommentVNode("v-if", true),
(__props.showOk)
? (_openBlock(), _createBlock(_unref(Button), {
key: 1,
size: "small",
type: "primary",
loading: loading.value,
onClick: _withModifiers(confirm, ["stop"])
}, {
default: _withCtx(() => [
_createTextVNode(_toDisplayString(__props.okText), 1 /* TEXT */)
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["loading", "onClick"]))
: _createCommentVNode("v-if", true)
])
])
]),
default: _withCtx(() => [
_createElementVNode("span", {
onClick: _cache[0] || (_cache[0] = () => visibleChange(true))
}, [
_renderSlot(_ctx.$slots, "default")
])
]),
_: 3 /* FORWARDED */
}, 8 /* PROPS */, ["visible", "placement", "get-popup-container"]));
};
}
});
export default __sfc_main__;