bkui-vue 0.0.2-beta.99 → 0.0.2-modal-refactor.2

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, ["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.theme()
+  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,119 @@ 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;
+      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);
+    });
+    (0,external_vue_namespaceObject.watch)(function () {
+      return props.isShow;
+    }, function (val) {
+      visible.value = val;
+      if (val) {
+        closeTimer && clearTimeout(closeTimer);
+        closeTimer = null;
+        if (!props.zIndex) {
+          zIndex.value = external_shared_namespaceObject.bkZIndexManager.getModalNextIndex();
         }
-      },
-      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');
+        (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
           });
-        } 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();
-        }
-      },
+        });
+        return;
+      }
+      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的延时
+      }, 250);
+    }, {
       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 handleClickOutSide = function handleClickOutSide(e) {
+      e.stopImmediatePropagation();
+      e.stopPropagation();
+      e.preventDefault();
+      if (props.quickClose) {
+        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 +341,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,164 +1,67 @@
-:root {
-  --bk-prefix: bk;
-  --popover-max-height: 216px;
-  --primary-color: #3a84ff;
-  --success-color: #2dcb56;
-  --warning-color: #ff9c01;
-  --danger-color: #ea3636;
-  --default-color: #63656e;
-  --gray-color: #979ba5;
-  --light-gray: #c4c6cc;
-  --white-color: white;
-  --whitesmoke-color: #fafbfd;
-  --disable-color: #dcdee5;
-  --font-size-base: 12px;
-  --font-size-medium: 14px;
-  --font-size-large: 16px;
-  --line-height-base: 16px;
-  --line-height-medium: 16px;
-  --line-height-large: 18px;
-  --component-size-small: 26px;
-  --component-size-base: 32px;
-  --component-size-large: 40px;
-  --border-width-base: 1px;
-  --border-style-base: solid;
-  --border-radius-base: 2px;
-  --border-style-color: var(--light-gray);
-  --input-disabled-bg: #fafbfd;
-  --input-disabled-border: var(--disable-color);
-  --input-height-base: var(--component-size-base);
-  --input-color: var(--default-color);
-  --input-bg: white;
-  --input-border-color: var(--light-gray);
-  --input-broder-radius: 3px;
-  --input-shadow-color: #a3c5fd;
-  --input-horizontal-padding: 10px;
-  --input-block-color: #f5f7fa;
-  --input-block-hover-color: #eaebf0;
-  --input-icon-size: var(--font-size-medium);
-  --input-maxlength-color: #979ba5;
-  --button-primary-hover-color: #5594fa;
-  --button-danger-hover-color: #ff5656;
-  --button-success-hover-color: #45e35f;
-  --button-warning-hover-color: #ffb848;
-  --button-default-hover-border-color: #979ba5;
-  --button-primary-active-color: #2c77f4;
-  --button-danger-active-color: #db2626;
-  --button-success-active-color: #1ab943;
-  --button-warning-active-color: #eb9000;
-  --button-selected-bg-color: #e1ecff;
-  --button-disabled-selected-bg-color: #f0f1f5;
-  --radio-font-color: #63656e;
-  --radio-active-color: #3a84ff;
-  --radio-hover-border-color: #979ba5;
-  --radio-disabled-border: #dcdee5;
-  --radio-disabled-font-color: #c4c6cc;
-  --radio-disabled-checked-bg: #a3c5fd;
-  --radio-button-checked-bg: #e1ecff;
-  --radio-button-disabled-checked-bg: #fafbfd;
-  --checkbox-disabled-checked-bg: #a3c5fd;
-  --fixed-navbar-background: #fff;
-  --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
-  --switch-default-color: #fff;
-  --switch-grey-color: #c4c6cc;
-  --breadcrumb-black-color: #979ba5;
-  --breadcrumb-primary-hover-color: #0082ff;
-  --breadcrumb-fn-main-color: #63656e;
-  --link-default-hover-color: #979ba5;
-  --link-primary-hover-color: #699df4;
-  --link-success-hover-color: #45e35f;
-  --link-warning-hover-color: #ffb848;
-  --link-danger-hover-color: #ff5656;
-  --link-default-disabled-color: #dcdee5;
-  --link-primary-disabled-color: #a3c5fd;
-  --link-success-disabled-color: #94f5a4;
-  --link-warning-disabled-color: #ffd695;
-  --link-danger-disabled-color: #fd9c9c;
-  --message-color: var(--default-color);
-  --message-primary-bg-color: #f0f8ff;
-  --message-primary-border-color: #e1ecff;
-  --message-primary-shadow-color: #e1e8f4;
-  --message-warning-bg-color: #fff4e2;
-  --message-warning-border-color: #ffe8c3;
-  --message-warning-shadow-color: #ede6db;
-  --message-success-bg-color: #f2fff4;
-  --message-success-border-color: #dcffe2;
-  --message-success-shadow-color: #cef0d7;
-  --message-danger-bg-color: #ffeded;
-  --message-danger-border-color: #ffdddd;
-  --message-danger-shadow-color: #f6dada;
-  --slider-default-bg: #dcdee5;
-  --slider-disable-bar-bg: #979ba5;
-  --menu-bg-color: #182132;
-  --submenu-bg-color: #151d2c;
-  --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
-  --menu-color: #96a2b9;
-  --menu-group-color: var(--default-color);
-  --menu-width: 260px;
-  --menu-collapse-width: 60px;
-  --menu-active-color: white;
-  --nav-header-bg-color: #182132;
-  --nav-bg-color: #182132;
-  --date-picker-disabled-bg: #fafbfd;
-  --date-picker-dropdown-mb: 4px;
-  --date-picker-dropdown-bg: #fff;
-  --table-bg-color: var(--white-color);
-  --table-border-color: #dcdee5;
-  --table-head-bg-color: #fafbfd;
-  --table-head-font-color: #313238;
-  --table-body-font-color: #63656E;
-  --table-row-hover-bg-color: #f5f7fa;
-  --table-row-active-bg-color: #f0f1f5;
-  --cascader-panel-border-color: #dcdee5;
-  --cascader-panel-hover: #f5f7fa;
-  --cascader-panel-active: #e1ecff;
-  --cascader-panel-disabled-bg: #fff;
-  --search-select-focus-border-color: var(--primary-color);
-  --search-select-focus-color: #3c96ff;
-  --search-select-font-color: var(--default-color);
-  --search-select-placeholder-color: var(--light-gray);
-  --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%;

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;
     };
@@ -84,18 +82,33 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     infoType: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary">;
-}, unknown, {
-    visible: boolean;
-    closeTimer: any;
-    bkPopIndexManager: any;
-}, {
-    dialogWidth(): String | Number;
-    dialogHeight(): String | Number;
-    compStyle(): any;
-    fullscreenStyle(): any;
+    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;
     };
@@ -181,6 +192,12 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     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%;