fix: 优化popup组件

src/packages/popup/index.js

@@ -1,7 +1,7 @@
 import Popup from "./popup.vue";
 import "./popup.scss";
-import { overlayProps ,getProps} from "./overlay/overlay-manager";
-
+import { getProps} from "./overlay/overlay-manager";
+import { overlayProps } from './overlay/overlay.vue';
 Popup.install = function(Vue) {
   Vue.component(Popup.name, Popup);
 };

src/packages/popup/overlay/overlay-manager.js

@@ -42,15 +42,15 @@ const overlayManager = {
 
   //打开遮罩层
   openModal(vm, config) {
-    let { zIndex, duration, className, customStyle } = config;
-
+    let { zIndex, duration, overlayClass, overlayStyle} = config;
+ 
     modalStack.push({
       vm,
       config: {
         zIndex,
         duration,
-        className,
-        customStyle,
+        overlayClass,
+        overlayStyle,
       },
     });
 
@@ -105,8 +105,10 @@ const overlayProps = {
     default: "",
   },
   overlayStyle: {
-    type: String,
-    default: "",
+    type: Object,
+    default: function () {
+      return null
+    },
   },
   zIndex: {
     type: Number

src/packages/popup/overlay/overlay.vue

@@ -2,7 +2,7 @@
   <transition name="popup-fade">
     <div
       @touchmove.stop="touchmove"
-      :style="{ animationDuration: `${duration}s`, overlayStyle, zIndex }"
+      :style="{ animationDuration: `${duration}s`, ...overlayStyle, zIndex }"
       v-show="value"
       class="popup-bg nut-mask"
       :class="overlayClass"
@@ -36,8 +36,8 @@ const overlayProps = {
     default: "",
   },
   overlayStyle: {
-    type: String,
-    default: "",
+    type: Object,
+    default: ()=>{},
   },
   zIndex: {
     type: Number
@@ -47,6 +47,7 @@ export { overlayProps };
 export default {
   name: "nut-popup-overlay",
   props: overlayProps,
+   
   methods: {
     touchmove(e) {
       if (this.lockScroll) {

src/packages/popup/popup.scss

@@ -77,8 +77,7 @@ $popup-close-icon-margin: 16px;
   overflow-y: auto;
   background-color: #fff;
   transition: transform 0.3s;
-  -webkit-overflow-scrolling: touch;
-  z-index: 100;
+  -webkit-overflow-scrolling: touch; 
 }
 @keyframes nut-fade-in {
   from {
@@ -144,8 +143,7 @@ $popup-close-icon-margin: 16px;
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.7);
-  z-index: 99;
+  background-color: rgba(0, 0, 0, 0.7); 
 }
 
 @keyframes nut-fade-in {

src/packages/popup/popup.vue

@@ -25,7 +25,8 @@
 import Vue from 'vue';
 import Icon from '../icon/icon.vue';
 import touchMixins from '../../mixins/touch.js';
-import { overlayManager, overlayProps } from './overlay/overlay-manager.js';
+import { overlayManager } from './overlay/overlay-manager.js';
+import { overlayProps } from './overlay/overlay.vue';
 import { on, off } from '../../utils/event';
 import '../icon/icon.scss';