bkui-vue 0.0.3-beta.4 → 0.0.3-beta.6

package/lib/modal/index.js

@@ -36,7 +36,7 @@ __webpack_require__.d(__webpack_exports__, {
 ;// CONCATENATED MODULE: external "../shared"
 var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var y = x => () => x
-const external_shared_namespaceObject = x({ ["BKPopIndexManager"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.BKPopIndexManager, ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.PropTypes, ["dialogTypeUnion"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.dialogTypeUnion, ["renderDirectiveType"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.renderDirectiveType, ["withInstallProps"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.withInstallProps });
+const external_shared_namespaceObject = x({ ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.PropTypes, ["bkZIndexManager"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.bkZIndexManager, ["dialogTypeUnion"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.dialogTypeUnion, ["isElement"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.isElement, ["mask"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.mask, ["renderDirectiveType"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.renderDirectiveType, ["withInstallProps"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.withInstallProps });
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -85,7 +85,7 @@ function _defineProperty(obj, key, value) {
 ;// CONCATENATED MODULE: external "vue"
 var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_vue_y = x => () => x
-const external_vue_namespaceObject = external_vue_x({ ["Transition"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Transition, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent });
+const external_vue_namespaceObject = external_vue_x({ ["Transition"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Transition, ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["nextTick"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.nextTick, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch });
 ;// CONCATENATED MODULE: external "../config-provider"
 var external_config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_config_provider_y = x => () => x
@@ -155,7 +155,7 @@ var propsMixin = {
   // 是否显示在body内（即与id#app同级
   transfer: external_shared_namespaceObject.PropTypes.oneOfType([Boolean, String, HTMLElement]).def(false),
   // 弹出层z-index，实际显示的值会自动+1。为了抱证在遮罩上正常显示
-  zIndex: external_shared_namespaceObject.PropTypes.oneOfType([String, Number]).def('inherit'),
+  zIndex: external_shared_namespaceObject.PropTypes.oneOfType([String, Number]),
   // 内容区最大高度
   maxHeight: external_shared_namespaceObject.PropTypes.string,
   // 弹出方向
@@ -175,7 +175,9 @@ var propsMixin = {
   // 是否允许多个弹框同时存在
   multiInstance: external_shared_namespaceObject.PropTypes.bool.def(true),
   // info-box
-  infoType: external_shared_namespaceObject.PropTypes.infoType()
+  infoType: external_shared_namespaceObject.PropTypes.theme(),
+  left: external_shared_namespaceObject.PropTypes.string,
+  top: external_shared_namespaceObject.PropTypes.string
 };
 ;// CONCATENATED MODULE: ../../packages/modal/src/modal.tsx
 
@@ -215,106 +217,148 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
   name: 'Modal',
   props: _objectSpread({}, propsMixin),
   emits: ['quick-close', 'quickClose', 'hidden', 'shown', 'close'],
-  data: function data() {
-    return {
-      visible: false,
-      closeTimer: null,
-      bkPopIndexManager: null
-    };
-  },
-  computed: {
-    dialogWidth: function dialogWidth() {
-      return /^\d+\.?\d*$/.test("".concat(this.width)) ? "".concat(this.width, "px") : this.width;
-    },
-    dialogHeight: function dialogHeight() {
-      return /^\d+\.?\d*$/.test("".concat(this.height)) ? "".concat(this.height, "px") : this.height;
-    },
-    compStyle: function compStyle() {
-      return {
-        width: this.dialogWidth,
-        height: this.dialogHeight,
+  setup: function setup(props, ctx) {
+    var visible = (0,external_vue_namespaceObject.ref)(false);
+    var zIndex = (0,external_vue_namespaceObject.ref)(props.zIndex);
+    var refRoot = (0,external_vue_namespaceObject.ref)();
+    var refMask = (0,external_vue_namespaceObject.ref)();
+    var backgroundColor = (0,external_vue_namespaceObject.ref)('rgba(0,0,0,0.6)');
+    var closeTimer;
+    var dialogWidth = (0,external_vue_namespaceObject.computed)(function () {
+      return /^\d+\.?\d*$/.test("".concat(props.width)) ? "".concat(props.width, "px") : props.width;
+    });
+    var dialogHeight = (0,external_vue_namespaceObject.computed)(function () {
+      return /^\d+\.?\d*$/.test("".concat(props.height)) ? "".concat(props.height, "px") : props.height;
+    });
+    var compStyle = (0,external_vue_namespaceObject.computed)(function () {
+      return _defineProperty({
+        width: dialogWidth.value,
+        height: dialogHeight.value,
         minHeigth: "".concat(200, "px"),
-        display: this.visible ? 'inherit' : 'none',
-        zIndex: this.zIndex || 'inherit'
-      };
-    },
-    fullscreenStyle: function fullscreenStyle() {
+        display: visible.value ? 'inherit' : 'none',
+        zIndex: zIndex.value || 'inherit',
+        left: props.left,
+        top: props.top
+      }, props.direction, 0);
+    });
+    var enableTeleport = (0,external_vue_namespaceObject.ref)(!!props.transfer);
+    var teleportTo = (0,external_vue_namespaceObject.ref)('body');
+    var resolveTransfer = function resolveTransfer() {
+      if (props.transfer) {
+        if (typeof props.transfer === 'boolean') {
+          teleportTo.value = 'body';
+          return;
+        }
+        teleportTo.value = props.transfer;
+      }
+    };
+    resolveTransfer();
+    var _usePrefix = (0,external_config_provider_namespaceObject.usePrefix)(),
+      resolveClassName = _usePrefix.resolveClassName;
+    var resolveClosetModal = function resolveClosetModal() {
+      var _refRoot$value;
+      if (enableTeleport.value) {
+        if (typeof teleportTo.value === 'string') {
+          var target = document.querySelector(teleportTo.value);
+          target === null || target === void 0 ? void 0 : target.appendChild(refRoot.value);
+          return;
+        }
+        if ((0,external_shared_namespaceObject.isElement)(teleportTo.value)) {
+          teleportTo.value.appendChild(refRoot.value);
+          return;
+        }
+      }
+      var className = ".".concat(resolveClassName('modal-ctx'));
+      var parentNode = (_refRoot$value = refRoot.value) === null || _refRoot$value === void 0 || (_refRoot$value = _refRoot$value.parentElement) === null || _refRoot$value === void 0 ? void 0 : _refRoot$value.closest(className);
+      if (parentNode) {
+        enableTeleport.value = true;
+        teleportTo.value = 'body';
+        var _target = document.querySelector(teleportTo.value);
+        _target === null || _target === void 0 ? void 0 : _target.appendChild(refRoot.value);
+      }
+    };
+    var fullscreenStyle = (0,external_vue_namespaceObject.computed)(function () {
       return {
         width: "".concat(100, "%"),
         height: "".concat(100, "%")
       };
-    }
-  },
-  watch: {
-    isShow: {
-      handler: function handler(val) {
-        var _this = this;
-        if (val) {
-          // 避免is-show: false执行覆盖
-          this.closeTimer && clearTimeout(this.closeTimer);
-          this.closeTimer = null;
-          this.visible = val;
-        } else {
-          this.closeTimer = setTimeout(function () {
-            // 直接设为false会失去离开的动画效果，这里延迟设置
-            _this.$emit('hidden'); // 为false直接触发hidden事件，在上层有200ms的延时
-            _this.visible = val;
-          }, 250);
+    });
+    var closeModal = function closeModal() {
+      external_shared_namespaceObject.mask.hideMask({
+        el: refRoot.value,
+        mask: refMask.value,
+        showMask: props.showMask,
+        backgroundColor: backgroundColor.value
+      });
+      closeTimer = setTimeout(function () {
+        // 直接设为false会失去离开的动画效果，这里延迟设置
+        ctx.emit('hidden'); // 为false直接触发hidden事件，在上层有200ms的延时
+        if (enableTeleport.value) {
+          var _refRoot$value2;
+          (_refRoot$value2 = refRoot.value) === null || _refRoot$value2 === void 0 ? void 0 : _refRoot$value2.remove();
         }
-      },
-      immediate: true
-    },
-    // isShow 初始化为 true 的时候，防止直接展示
-    visible: {
-      handler: function handler(val) {
-        var _this2 = this;
-        if (val) {
-          this.$nextTick(function () {
-            // isShow初始化为true的时候，放在nextTick才能获取$el
-            var hideMaskStyle = {
-              'background-color': 'rgba(0,0,0,0)'
-            };
-            var appendStyle = _this2.showMask ? {} : hideMaskStyle;
-            _this2.bkPopIndexManager.show(_this2.$el, _this2.showMask, appendStyle, !!_this2.transfer, _this2.zIndex, function (_e) {
-              _this2.handleClickOutSide();
-            });
-            _this2.$emit('shown');
-          });
-        } else {
-          var _this$bkPopIndexManag, _this$bkPopIndexManag2, _this$bkPopIndexManag3;
-          (_this$bkPopIndexManag = this.bkPopIndexManager) === null || _this$bkPopIndexManag === void 0 ? void 0 : _this$bkPopIndexManag.removeLastEvent();
-          (_this$bkPopIndexManag2 = this.bkPopIndexManager) === null || _this$bkPopIndexManag2 === void 0 ? void 0 : _this$bkPopIndexManag2.hide(this.$el, !!this.transfer);
-          (_this$bkPopIndexManag3 = this.bkPopIndexManager) === null || _this$bkPopIndexManag3 === void 0 ? void 0 : _this$bkPopIndexManag3.destroy();
+      }, 250);
+    };
+    (0,external_vue_namespaceObject.watch)(function () {
+      return props.isShow;
+    }, function (val) {
+      if (val) {
+        closeTimer && clearTimeout(closeTimer);
+        closeTimer = null;
+        if (!props.zIndex) {
+          zIndex.value = external_shared_namespaceObject.bkZIndexManager.getModalNextIndex();
         }
-      },
+        visible.value = true;
+        (0,external_vue_namespaceObject.nextTick)(function () {
+          ctx.emit('shown');
+          resolveClosetModal();
+          external_shared_namespaceObject.mask.showMask({
+            el: refRoot.value,
+            mask: refMask.value,
+            showMask: props.showMask,
+            backgroundColor: backgroundColor.value
+          });
+        });
+        return;
+      }
+      visible.value = false;
+      closeModal();
+    }, {
       immediate: true
-    }
-  },
-  mounted: function mounted() {
-    var _this$$el;
-    var popConfig = _objectSpread(_objectSpread({}, this.$props), {
-      transfer: this.transfer === 'parent' ? (_this$$el = this.$el) === null || _this$$el === void 0 ? void 0 : _this$$el.parentElement : this.transfer
     });
-    this.bkPopIndexManager = new external_shared_namespaceObject.BKPopIndexManager(popConfig);
-  },
-  beforeUnmount: function beforeUnmount() {
-    if (this.visible) {
-      var _this$bkPopIndexManag4, _this$bkPopIndexManag5;
-      (_this$bkPopIndexManag4 = this.bkPopIndexManager) === null || _this$bkPopIndexManag4 === void 0 ? void 0 : _this$bkPopIndexManag4.hide(this.$el);
-      (_this$bkPopIndexManag5 = this.bkPopIndexManager) === null || _this$bkPopIndexManag5 === void 0 ? void 0 : _this$bkPopIndexManag5.destroy();
-    }
-  },
-  methods: {
-    handleClickOutSide: function handleClickOutSide() {
-      if (this.quickClose) {
-        this.$emit('close');
-        this.$emit('quick-close', this.$el);
-        this.$emit('quickClose', this.$el);
+    var handleBeforeClose = function handleBeforeClose(callbackFn) {
+      if (typeof props.beforeClose === 'function') {
+        if (props.beforeClose() !== true) {
+          return;
+        }
       }
-    }
+      callbackFn === null || callbackFn === void 0 ? void 0 : callbackFn();
+    };
+    var handleClickOutSide = function handleClickOutSide(e) {
+      e.stopImmediatePropagation();
+      e.stopPropagation();
+      e.preventDefault();
+      if (props.quickClose) {
+        handleBeforeClose(function () {
+          ctx.emit('close');
+          ctx.emit('quick-close');
+          ctx.emit('quickClose');
+        });
+      }
+    };
+    return {
+      visible: visible,
+      compStyle: compStyle,
+      fullscreenStyle: fullscreenStyle,
+      handleClickOutSide: handleClickOutSide,
+      refRoot: refRoot,
+      refMask: refMask,
+      showMask: props.showMask
+    };
   },
   render: function render() {
-    var _this$$slots$header,
+    var _this$extCls,
+      _this$$slots$header,
       _this$$slots$header2,
       _this$$slots,
       _this$$slots$default,
@@ -326,34 +370,47 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
       _this$$slots$close,
       _this$$slots$close2,
       _this$$slots4,
-      _this3 = this;
-    var _usePrefix = (0,external_config_provider_namespaceObject.usePrefix)(),
-      resolveClassName = _usePrefix.resolveClassName;
+      _this = this;
+    var _usePrefix2 = (0,external_config_provider_namespaceObject.usePrefix)(),
+      resolveClassName = _usePrefix2.resolveClassName;
     var maxHeight = this.maxHeight ? {
       maxHeight: this.maxHeight
     } : {};
     var bodyClass = "".concat(resolveClassName('modal-body'), " ").concat(this.animateType === 'slide' ? this.direction : '');
     return (0,external_vue_namespaceObject.createVNode)("div", {
-      "class": [resolveClassName('modal-wrapper'), this.extCls, this.size, this.fullscreen ? 'fullscreen' : ''],
+      "ref": "refRoot",
+      "class": [resolveClassName('modal-ctx'), this.visible ? '--show' : '--hide'],
+      "style": {
+        zIndex: this.compStyle.zIndex
+      }
+    }, [this.showMask ? (0,external_vue_namespaceObject.createVNode)("div", {
+      "ref": "refMask",
+      "class": [resolveClassName('modal-ctx-mask'), this.visible ? '--show' : '--hide'],
+      "onClick": this.handleClickOutSide,
+      "style": {
+        zIndex: this.compStyle.zIndex
+      }
+    }, null) : '', (0,external_vue_namespaceObject.createVNode)("div", {
+      "class": [resolveClassName('modal-wrapper'), (_this$extCls = this.extCls) !== null && _this$extCls !== void 0 ? _this$extCls : '', this.size, this.fullscreen ? 'fullscreen' : ''],
       "style": [this.compStyle, this.fullscreen ? this.fullscreenStyle : '']
     }, [(0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Transition, {
       "name": this.animateType
     }, {
       "default": function _default() {
-        return [_this3.isShow ? (0,external_vue_namespaceObject.createVNode)("div", {
+        return [_this.visible ? (0,external_vue_namespaceObject.createVNode)("div", {
           "class": bodyClass
         }, [(0,external_vue_namespaceObject.createVNode)("div", {
           "class": resolveClassName('modal-header')
-        }, [(_this$$slots$header = (_this$$slots$header2 = (_this$$slots = _this3.$slots).header) === null || _this$$slots$header2 === void 0 ? void 0 : _this$$slots$header2.call(_this$$slots)) !== null && _this$$slots$header !== void 0 ? _this$$slots$header : '']), (0,external_vue_namespaceObject.createVNode)("div", {
+        }, [(_this$$slots$header = (_this$$slots$header2 = (_this$$slots = _this.$slots).header) === null || _this$$slots$header2 === void 0 ? void 0 : _this$$slots$header2.call(_this$$slots)) !== null && _this$$slots$header !== void 0 ? _this$$slots$header : '']), (0,external_vue_namespaceObject.createVNode)("div", {
           "class": resolveClassName('modal-content'),
-          "style": [_this3.dialogType === 'show' ? 'padding-bottom: 20px' : '', _objectSpread({}, maxHeight)]
-        }, [(_this$$slots$default = (_this$$slots$default2 = (_this$$slots2 = _this3.$slots)["default"]) === null || _this$$slots$default2 === void 0 ? void 0 : _this$$slots$default2.call(_this$$slots2)) !== null && _this$$slots$default !== void 0 ? _this$$slots$default : '']), _this3.dialogType === 'show' ? '' : (0,external_vue_namespaceObject.createVNode)("div", {
+          "style": [_this.dialogType === 'show' ? 'padding-bottom: 20px' : '', _objectSpread({}, maxHeight)]
+        }, [(_this$$slots$default = (_this$$slots$default2 = (_this$$slots2 = _this.$slots)["default"]) === null || _this$$slots$default2 === void 0 ? void 0 : _this$$slots$default2.call(_this$$slots2)) !== null && _this$$slots$default !== void 0 ? _this$$slots$default : '']), _this.dialogType === 'show' ? '' : (0,external_vue_namespaceObject.createVNode)("div", {
           "class": resolveClassName('modal-footer')
-        }, [(_this$$slots$footer = (_this$$slots$footer2 = (_this$$slots3 = _this3.$slots).footer) === null || _this$$slots$footer2 === void 0 ? void 0 : _this$$slots$footer2.call(_this$$slots3)) !== null && _this$$slots$footer !== void 0 ? _this$$slots$footer : '']), _this3.closeIcon && (0,external_vue_namespaceObject.createVNode)("div", {
+        }, [(_this$$slots$footer = (_this$$slots$footer2 = (_this$$slots3 = _this.$slots).footer) === null || _this$$slots$footer2 === void 0 ? void 0 : _this$$slots$footer2.call(_this$$slots3)) !== null && _this$$slots$footer !== void 0 ? _this$$slots$footer : '']), _this.closeIcon && (0,external_vue_namespaceObject.createVNode)("div", {
           "class": resolveClassName('modal-close')
-        }, [(_this$$slots$close = (_this$$slots$close2 = (_this$$slots4 = _this3.$slots).close) === null || _this$$slots$close2 === void 0 ? void 0 : _this$$slots$close2.call(_this$$slots4)) !== null && _this$$slots$close !== void 0 ? _this$$slots$close : ''])]) : ''];
+        }, [(_this$$slots$close = (_this$$slots$close2 = (_this$$slots4 = _this.$slots).close) === null || _this$$slots$close2 === void 0 ? void 0 : _this$$slots$close2.call(_this$$slots4)) !== null && _this$$slots$close !== void 0 ? _this$$slots$close : ''])]) : ''];
       }
-    })]);
+    })])]);
   }
 }));
 ;// CONCATENATED MODULE: ../../packages/modal/src/index.ts

package/lib/modal/modal.css

@@ -1,42 +1,67 @@
-.bk-modal-wrapper.bk-info-wrapper {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper {
   width: 440px;
 }
-.bk-modal-wrapper.bk-info-wrapper.normal {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.normal {
   width: 440px;
 }
-.bk-modal-wrapper.bk-info-wrapper.small {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.small {
   width: 400px;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-body {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-body {
   border-radius: 2px;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-dialog-header {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header {
   padding: 24px 24px 0;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-dialog-header .bk-dialog-title {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
   height: 27px;
   margin: 15px 0 10px;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-content {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content {
   height: 100%;
   max-height: 100%;
   min-height: 100%;
   padding: 0 50px 10px;
   word-break: break-all;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-content .bk-info-sub-title {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content .bk-info-sub-title {
   margin-bottom: 10px;
   text-align: center;
   word-break: break-all;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-footer {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer {
   padding: 0 65px 33px;
   background-color: #fff;
   border-top: none;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-footer .bk-dialog-footer button {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-footer button {
   min-width: 88px;
 }
+.bk-modal-ctx {
+  pointer-events: auto;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+}
+.bk-modal-ctx.--show {
+  position: fixed;
+}
+.bk-modal-ctx.--hide {
+  display: none;
+}
+.bk-modal-ctx .bk-modal-ctx-mask {
+  display: none;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+.bk-modal-ctx .bk-modal-ctx-mask.--show {
+  position: fixed;
+  display: inherit;
+}
 .bk-modal-wrapper {
   position: absolute;
   top: 50%;
@@ -70,6 +95,7 @@
 }
 .bk-modal-wrapper .bk-modal-body {
   height: 100%;
+  width: 100%;
   background: #fff;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

package/lib/modal/modal.d.ts

@@ -54,9 +54,7 @@ declare const _default: import("vue").DefineComponent<{
     transfer: import("vue-types").VueTypeDef<string | boolean | HTMLElement> & {
         default: string | boolean | (() => HTMLElement);
     };
-    zIndex: import("vue-types").VueTypeDef<string | number> & {
-        default: string | number;
-    };
+    zIndex: import("vue-types").VueTypeDef<string | number>;
     maxHeight: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
@@ -83,19 +81,34 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-    infoType: import("vue-types").VueTypeDef<"loading" | "success" | "warning" | "danger">;
-}, unknown, {
-    visible: boolean;
-    closeTimer: any;
-    bkPopIndexManager: any;
-}, {
-    dialogWidth(): String | Number;
-    dialogHeight(): String | Number;
-    compStyle(): any;
-    fullscreenStyle(): any;
+    infoType: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary">;
+    left: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    top: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
 }, {
-    handleClickOutSide(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "shown" | "hidden" | "quick-close" | "quickClose")[], "close" | "shown" | "hidden" | "quick-close" | "quickClose", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    visible: import("vue").Ref<boolean>;
+    compStyle: import("vue").ComputedRef<{
+        [x: string]: string | number;
+        width: string | number;
+        height: string | number;
+        minHeigth: string;
+        display: string;
+        zIndex: string | number;
+        left: string;
+        top: string;
+    }>;
+    fullscreenStyle: import("vue").ComputedRef<{
+        width: string;
+        height: string;
+    }>;
+    handleClickOutSide: (e: MouseEvent) => void;
+    refRoot: import("vue").Ref<HTMLElement>;
+    refMask: import("vue").Ref<HTMLElement>;
+    showMask: boolean;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "shown" | "hidden" | "quick-close" | "quickClose")[], "close" | "shown" | "hidden" | "quick-close" | "quickClose", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     isShow: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -151,9 +164,7 @@ declare const _default: import("vue").DefineComponent<{
     transfer: import("vue-types").VueTypeDef<string | boolean | HTMLElement> & {
         default: string | boolean | (() => HTMLElement);
     };
-    zIndex: import("vue-types").VueTypeDef<string | number> & {
-        default: string | number;
-    };
+    zIndex: import("vue-types").VueTypeDef<string | number>;
     maxHeight: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
@@ -180,7 +191,13 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-    infoType: import("vue-types").VueTypeDef<"loading" | "success" | "warning" | "danger">;
+    infoType: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary">;
+    left: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    top: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
 }>> & {
     onClose?: (...args: any[]) => any;
     onShown?: (...args: any[]) => any;
@@ -193,19 +210,20 @@ declare const _default: import("vue").DefineComponent<{
     height: string | number;
     maxHeight: string;
     extCls: string | unknown[];
+    top: string;
+    left: string;
     isShow: boolean;
-    zIndex: string | number;
     draggable: boolean;
     transfer: string | boolean | HTMLElement;
-    showMask: boolean;
-    multiInstance: boolean;
     direction: string;
     renderDirective: "show" | "if";
     quickClose: boolean;
     scrollable: boolean;
+    showMask: boolean;
     closeIcon: boolean;
     escClose: boolean;
     fullscreen: boolean;
     animateType: string;
+    multiInstance: boolean;
 }, {}>;
 export default _default;

package/lib/modal/modal.less

@@ -1,6 +1,39 @@
 @import '../styles/themes/themes.less';
 @import '../info-box/info-box.less';
 
+.@{bk-prefix}-modal-ctx {
+  pointer-events: auto;
+  top: 0px;
+  left: 0px;
+
+  width: 100%;
+  height: 100%;
+
+  &.--show {
+    position: fixed;
+  }
+
+  &.--hide {
+    display: none;
+  }
+
+  .@{bk-prefix}-modal-ctx-mask {
+    display: none;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.6);
+
+    &.--show {
+      position: fixed;
+      display: inherit;
+    }
+  }
+}
+
+
+
 .@{bk-prefix}-modal-wrapper {
   position: absolute;
   top: 50%;
@@ -40,6 +73,7 @@
 
   .@{bk-prefix}-modal-body {
     height: 100%;
+    width: 100%;
     background: #fff;
     box-shadow: 0 4px 12px rgba(0,0,0,.15);
   }

package/lib/modal/modal.variable.css

@@ -124,45 +124,70 @@
   --search-select-message-color: var(--danger-color);
   --search-select-menu-border-color: var(--disable-color);
 }
-.bk-modal-wrapper.bk-info-wrapper {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper {
   width: 440px;
 }
-.bk-modal-wrapper.bk-info-wrapper.normal {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.normal {
   width: 440px;
 }
-.bk-modal-wrapper.bk-info-wrapper.small {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.small {
   width: 400px;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-body {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-body {
   border-radius: 2px;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-dialog-header {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header {
   padding: 24px 24px 0;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-dialog-header .bk-dialog-title {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
   height: 27px;
   margin: 15px 0 10px;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-content {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content {
   height: 100%;
   max-height: 100%;
   min-height: 100%;
   padding: 0 50px 10px;
   word-break: break-all;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-content .bk-info-sub-title {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content .bk-info-sub-title {
   margin-bottom: 10px;
   text-align: center;
   word-break: break-all;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-footer {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer {
   padding: 0 65px 33px;
   background-color: #fff;
   border-top: none;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-footer .bk-dialog-footer button {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-footer button {
   min-width: 88px;
 }
+.bk-modal-ctx {
+  pointer-events: auto;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+}
+.bk-modal-ctx.--show {
+  position: fixed;
+}
+.bk-modal-ctx.--hide {
+  display: none;
+}
+.bk-modal-ctx .bk-modal-ctx-mask {
+  display: none;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+.bk-modal-ctx .bk-modal-ctx-mask.--show {
+  position: fixed;
+  display: inherit;
+}
 .bk-modal-wrapper {
   position: absolute;
   top: 50%;
@@ -196,6 +221,7 @@
 }
 .bk-modal-wrapper .bk-modal-body {
   height: 100%;
+  width: 100%;
   background: #fff;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }