Browse Source

feat: popup增加自定义遮罩层类名及样式 (#1962)

YancyChou 3 years ago
parent
commit
39369a06b9

+ 2 - 0
src/packages/__VUE/popup/doc.en-US.md

@@ -225,6 +225,8 @@ Specify the mount node through `teleport`
 | round                  | Show fillet                                                | boolean        | `false`       |
 | round                  | Show fillet                                                | boolean        | `false`       |
 | teleport               | Specify the mount node (`not supported by miniProgram')   | string         | `"body"`      |
 | teleport               | Specify the mount node (`not supported by miniProgram')   | string         | `"body"`      |
 | teleport-disable `v3.2.7`              | Whether the node is allowed to be mounted(`not supported by miniProgram')        | boolean         | `false`      |
 | teleport-disable `v3.2.7`              | Whether the node is allowed to be mounted(`not supported by miniProgram')        | boolean         | `false`      |
+| overlay-class          | Custom mask class name   | string         | -      |
+| overlay-style          | Custom Mask Style   | CSSProperties  | -      |
 | safe-area-inset-bottom `v3.1.19`	| Whether to enable iPhone series full screen bottom safety zone adaptation, which is only valid when `position` is  `bottom` |	Boolean	|`false`     |
 | safe-area-inset-bottom `v3.1.19`	| Whether to enable iPhone series full screen bottom safety zone adaptation, which is only valid when `position` is  `bottom` |	Boolean	|`false`     |
 
 
 ### Events
 ### Events

+ 2 - 0
src/packages/__VUE/popup/doc.md

@@ -223,6 +223,8 @@ app.use(Icon)
 | round                  | 是否显示圆角                                                |boolean        | `false`       |
 | round                  | 是否显示圆角                                                |boolean        | `false`       |
 | teleport               | 指定挂载节点(`小程序不支持`)                                                | string         | `"body"`      |
 | teleport               | 指定挂载节点(`小程序不支持`)                                                | string         | `"body"`      |
 | teleport-disable `v3.2.7`              | 是否允许挂载节点(`小程序不支持`)                  | boolean         | `false`      |
 | teleport-disable `v3.2.7`              | 是否允许挂载节点(`小程序不支持`)                  | boolean         | `false`      |
+| overlay-class `v3.2.8`       | 自定义遮罩层类名 | string  | ''  |
+| overlay-style `v3.2.8`       | 自定义遮罩层样式  | string  | ''  |
 | safe-area-inset-bottom `v3.1.19`	| 是否开启 iphone 系列全面屏底部安全区适配,仅当 `position` 为 `bottom` 时有效 |	boolean	|`false`     |
 | safe-area-inset-bottom `v3.1.19`	| 是否开启 iphone 系列全面屏底部安全区适配,仅当 `position` 为 `bottom` 时有效 |	boolean	|`false`     |
 
 
 ### Events
 ### Events

+ 2 - 0
src/packages/__VUE/popup/index.taro.vue

@@ -7,6 +7,8 @@
       :z-index="zIndex"
       :z-index="zIndex"
       :lock-scroll="lockScroll"
       :lock-scroll="lockScroll"
       :duration="duration"
       :duration="duration"
+      :overlay-class="overlayClass"
+      :overlay-style="overlayStyle"
       @click="onClickOverlay"
       @click="onClickOverlay"
       v-bind="$attrs"
       v-bind="$attrs"
     />
     />

+ 2 - 0
src/packages/__VUE/popup/index.vue

@@ -7,6 +7,8 @@
       :z-index="zIndex"
       :z-index="zIndex"
       :lock-scroll="lockScroll"
       :lock-scroll="lockScroll"
       :duration="duration"
       :duration="duration"
+      :overlay-class="overlayClass"
+      :overlay-style="overlayStyle"
       @click="onClickOverlay"
       @click="onClickOverlay"
       v-bind="$attrs"
       v-bind="$attrs"
     />
     />

+ 7 - 0
src/packages/__VUE/popup/props.ts

@@ -71,5 +71,12 @@ export const popupProps = {
   safeAreaInsetBottom: {
   safeAreaInsetBottom: {
     type: Boolean,
     type: Boolean,
     default: false
     default: false
+  },
+  overlayClass: {
+    type: String,
+    default: ''
+  },
+  overlayStyle: {
+    type: Object as PropType<CSSProperties>
   }
   }
 };
 };