@fe6/water-pro
Version:
An enterprise-class UI design language and Vue-based implementation
255 lines (207 loc) • 7.89 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _tslib = require("tslib");
var _Spin = _interopRequireDefault(require("../../../spin/Spin"));
var _useWindowSizeFn = require("../../../_util/hooks/use-window-size-fn");
var _containerScroll = require("../../../container-scroll");
var _warning = _interopRequireDefault(require("../../../_util/warning"));
var _propsUtil = require("../../../_util/props-util");
var _vueTypes = _interopRequireDefault(require("../../../_util/vue-types"));
var _useModalContext = require("../hooks/use-modal-context");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default2 = (0, _vue.defineComponent)({
name: 'AModalProWrapper',
inheritAttrs: false,
props: {
loading: _vueTypes.default.bool,
useWrapper: _vueTypes.default.bool.def(true),
modalHeaderHeight: _vueTypes.default.number.def(57),
modalFooterHeight: _vueTypes.default.number.def(74),
minHeight: _vueTypes.default.number.def(200),
height: _vueTypes.default.number,
footerOffset: _vueTypes.default.number.def(0),
visible: _vueTypes.default.bool,
fullScreen: _vueTypes.default.bool,
loadingTip: _vueTypes.default.string,
bodyStyle: Object,
scrollStyle: Object
},
emits: ['height-change', 'ext-height'],
setup: function setup(props, _ref) {
var emit = _ref.emit;
var wrapperRef = (0, _vue.ref)(null);
var spinRef = (0, _vue.ref)(null);
var realHeightRef = (0, _vue.ref)(0);
var minRealHeightRef = (0, _vue.ref)(0);
var realHeight = 0;
var stopElResizeFn = function stopElResizeFn() {};
(0, _useWindowSizeFn.useWindowSizeFn)(setModalHeight.bind(null, false));
(0, _useModalContext.createModalContext)({
redoModalHeight: setModalHeight
});
var spinStyle = (0, _vue.computed)(function () {
return {
minHeight: "".concat(props.minHeight, "px"),
// padding 28
height: "".concat((0, _vue.unref)(realHeightRef), "px")
};
});
(0, _vue.watchEffect)(function () {
props.useWrapper && setModalHeight();
});
(0, _vue.watch)(function () {
return props.fullScreen;
}, function (v) {
setModalHeight();
if (!v) {
realHeightRef.value = minRealHeightRef.value;
} else {
minRealHeightRef.value = realHeightRef.value;
}
});
(0, _vue.onMounted)(function () {
var modalHeaderHeight = props.modalHeaderHeight,
modalFooterHeight = props.modalFooterHeight;
emit('ext-height', modalHeaderHeight + modalFooterHeight); // listenElResize();
});
(0, _vue.onUnmounted)(function () {
stopElResizeFn && stopElResizeFn();
});
function scrollTop() {
return (0, _tslib.__awaiter)(this, void 0, void 0, /*#__PURE__*/_regenerator.default.mark(function _callee() {
return _regenerator.default.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
(0, _vue.nextTick)(function () {
var _a, _b;
var wrapperRefDom = (0, _vue.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 (0, _tslib.__awaiter)(this, void 0, void 0, /*#__PURE__*/_regenerator.default.mark(function _callee2() {
var wrapperRefDom, bodyDom, modalDom, modalRect, modalTop, maxHeight, spinEl;
return _regenerator.default.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 = (0, _vue.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 (0, _vue.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 (0, _vue.nextTick)();
case 21:
spinEl = (0, _vue.unref)(spinRef);
if (spinEl) {
_context2.next = 24;
break;
}
return _context2.abrupt("return");
case 24:
_context2.next = 26;
return (0, _vue.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', (0, _vue.unref)(realHeightRef));
_context2.next = 34;
break;
case 31:
_context2.prev = 31;
_context2.t0 = _context2["catch"](11);
(0, _warning.default)(_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 (0, _vue.createVNode)(_containerScroll.ContainerScroll, {
"ref": "wrapperRef",
"style": this.scrollStyle
}, {
default: function _default() {
return [(0, _vue.createVNode)(_Spin.default, {
"spinning": _this.loading,
"tip": _this.loadingTip
}, {
default: function _default() {
return [(0, _vue.createVNode)("div", {
"ref": "spinRef",
"style": _this.spinStyle
}, [(0, _propsUtil.getSlot)(_this)])];
}
})];
}
});
}
});
exports.default = _default2;