@fe6/water-pro
Version:
An enterprise-class UI design language and Vue-based implementation
235 lines (201 loc) • 7.26 kB
JavaScript
import { createVNode as _createVNode } from "vue";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { __awaiter } from "tslib";
import { defineComponent, computed, ref, watchEffect, unref, watch, onMounted, nextTick, onUnmounted } from 'vue';
import ASpin from '../../../spin/Spin';
import { useWindowSizeFn } from '../../../_util/hooks/use-window-size-fn';
import { ContainerScroll } from '../../../container-scroll';
import warning from '../../../_util/warning';
import { getSlot } from '../../../_util/props-util';
import PropTypes from '../../../_util/vue-types';
import { createModalContext } from '../hooks/use-modal-context';
export default defineComponent({
name: 'AModalProWrapper',
inheritAttrs: false,
props: {
loading: PropTypes.bool,
useWrapper: PropTypes.bool.def(true),
modalHeaderHeight: PropTypes.number.def(57),
modalFooterHeight: PropTypes.number.def(74),
minHeight: PropTypes.number.def(200),
height: PropTypes.number,
footerOffset: PropTypes.number.def(0),
visible: PropTypes.bool,
fullScreen: PropTypes.bool,
loadingTip: PropTypes.string,
bodyStyle: Object,
scrollStyle: Object
},
emits: ['height-change', 'ext-height'],
setup: function setup(props, _ref) {
var emit = _ref.emit;
var wrapperRef = ref(null);
var spinRef = ref(null);
var realHeightRef = ref(0);
var minRealHeightRef = ref(0);
var realHeight = 0;
var stopElResizeFn = function stopElResizeFn() {};
useWindowSizeFn(setModalHeight.bind(null, false));
createModalContext({
redoModalHeight: setModalHeight
});
var spinStyle = computed(function () {
return {
minHeight: "".concat(props.minHeight, "px"),
// padding 28
height: "".concat(unref(realHeightRef), "px")
};
});
watchEffect(function () {
props.useWrapper && setModalHeight();
});
watch(function () {
return props.fullScreen;
}, function (v) {
setModalHeight();
if (!v) {
realHeightRef.value = minRealHeightRef.value;
} else {
minRealHeightRef.value = realHeightRef.value;
}
});
onMounted(function () {
var modalHeaderHeight = props.modalHeaderHeight,
modalFooterHeight = props.modalFooterHeight;
emit('ext-height', modalHeaderHeight + modalFooterHeight); // listenElResize();
});
onUnmounted(function () {
stopElResizeFn && stopElResizeFn();
});
function scrollTop() {
return __awaiter(this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
nextTick(function () {
var _a, _b;
var wrapperRefDom = unref(wrapperRef);
if (!wrapperRefDom) {
return;
}
(_b = (_a = wrapperRefDom) === null || _a === void 0 ? void 0 : _a.scrollTo) === null || _b === void 0 ? void 0 : _b.call(_a, 0);
});
case 1:
case "end":
return _context.stop();
}
}
}, _callee);
}));
}
function setModalHeight() {
return __awaiter(this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
var wrapperRefDom, bodyDom, modalDom, modalRect, modalTop, maxHeight, spinEl;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
if (props.visible) {
_context2.next = 2;
break;
}
return _context2.abrupt("return");
case 2:
wrapperRefDom = unref(wrapperRef);
if (wrapperRefDom) {
_context2.next = 5;
break;
}
return _context2.abrupt("return");
case 5:
bodyDom = wrapperRefDom.$el.parentElement;
if (bodyDom) {
_context2.next = 8;
break;
}
return _context2.abrupt("return");
case 8:
bodyDom.style.padding = '0';
_context2.next = 11;
return nextTick();
case 11:
_context2.prev = 11;
modalDom = bodyDom.parentElement && bodyDom.parentElement.parentElement;
if (modalDom) {
_context2.next = 15;
break;
}
return _context2.abrupt("return");
case 15:
modalRect = getComputedStyle(modalDom).top;
modalTop = Number.parseInt(modalRect);
maxHeight = window.innerHeight - modalTop * 2 + (props.footerOffset || 0) - props.modalFooterHeight - props.modalHeaderHeight; // 距离顶部过进会出现滚动条
if (modalTop < 40) {
maxHeight -= 26;
}
_context2.next = 21;
return nextTick();
case 21:
spinEl = unref(spinRef);
if (spinEl) {
_context2.next = 24;
break;
}
return _context2.abrupt("return");
case 24:
_context2.next = 26;
return nextTick();
case 26:
// if (!realHeight) {
realHeight = spinEl.scrollHeight; // }
if (props.fullScreen) {
realHeightRef.value = window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight - 28;
} else {
realHeightRef.value = props.height ? props.height : realHeight > maxHeight ? maxHeight : realHeight;
}
emit('height-change', unref(realHeightRef));
_context2.next = 34;
break;
case 31:
_context2.prev = 31;
_context2.t0 = _context2["catch"](11);
warning(_context2.t0);
case 34:
case "end":
return _context2.stop();
}
}
}, _callee2, null, [[11, 31]]);
}));
}
return {
wrapperRef: wrapperRef,
spinRef: spinRef,
spinStyle: spinStyle,
scrollTop: scrollTop,
setModalHeight: setModalHeight
};
},
render: function render() {
var _this = this;
return _createVNode(ContainerScroll, {
"ref": "wrapperRef",
"style": this.scrollStyle
}, {
default: function _default() {
return [_createVNode(ASpin, {
"spinning": _this.loading,
"tip": _this.loadingTip
}, {
default: function _default() {
return [_createVNode("div", {
"ref": "spinRef",
"style": _this.spinStyle
}, [getSlot(_this)])];
}
})];
}
});
}
});