docs(overlay): provide modify style

src/packages/__VUE/overlay/demo.vue

@@ -2,16 +2,17 @@
   <div class="demo">
     <h2>基础用法</h2>
     <nut-cell>
-      <nut-button type="primary" @click="state.show = true"
-        >显示遮罩层</nut-button
-      >
+      <nut-button type="primary" @click="state.show = true">显示遮罩层</nut-button>
       <nut-overlay v-model:visible="state.show" :z-index="2000"></nut-overlay>
     </nut-cell>
+    <h2>遮罩样式</h2>
+    <nut-cell>
+      <nut-button type="primary" @click="state.show3 = true">显示遮罩层</nut-button>
+      <nut-overlay v-model:visible="state.show3" :z-index="2000" :overlay-style="state.overlayStyle"></nut-overlay>
+    </nut-cell>
     <h2>嵌套内容</h2>
     <nut-cell>
-      <nut-button type="success" @click="state.show2 = true"
-        >嵌套内容</nut-button
-      >
+      <nut-button type="success" @click="state.show2 = true">嵌套内容</nut-button>
       <nut-overlay v-model:visible="state.show2" :z-index="2000">
         <div class="wrapper">
           <div class="content">这里是正文</div>
@@ -30,7 +31,11 @@ export default createDemo({
   setup() {
     const state = reactive({
       show: false,
-      show2: false
+      show2: false,
+      show3: false,
+      overlayStyle: {
+        backgroundColor: 'rgba(0, 0, 0, .2)'
+      }
     });
     return {
       state

src/packages/__VUE/overlay/doc.md

@@ -46,6 +46,35 @@ app.use(OverLay);
 
 :::
 
+### 遮罩样式
+
+:::demo
+
+```html
+<template>
+<nut-button type="primary" @click="state.show = true">显示遮罩层</nut-button>
+<nut-overlay v-model:visible="state.show" :z-index="2000" :overlay-style="state.overlayStyle"></nut-overlay>
+</template>
+<script lang="ts">
+  import { reactive } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        show: false,
+        overlayStyle: {
+          backgroundColor: 'rgba(0, 0, 0, .2)'
+        }
+      });
+      return {
+        state
+      };
+    }
+  };
+</script>
+```
+
+:::
+
 ### 嵌套内容
 
 :::demo

src/sites/mobile-taro/vue/src/base/pages/overlay/index.vue

@@ -2,16 +2,17 @@
   <div class="demo">
     <h2>基础用法</h2>
     <nut-cell>
-      <nut-button type="primary" @click="state.show = true"
-        >显示遮罩层</nut-button
-      >
+      <nut-button type="primary" @click="state.show = true">显示遮罩层</nut-button>
       <nut-overlay v-model:visible="state.show" :z-index="2000"></nut-overlay>
     </nut-cell>
+    <h2>遮罩样式</h2>
+    <nut-cell>
+      <nut-button type="primary" @click="state.show3 = true">显示遮罩层</nut-button>
+      <nut-overlay v-model:visible="state.show3" :z-index="2000" :overlay-style="state.overlayStyle"></nut-overlay>
+    </nut-cell>
     <h2>嵌套内容</h2>
     <nut-cell>
-      <nut-button type="success" @click="state.show2 = true"
-        >嵌套内容</nut-button
-      >
+      <nut-button type="success" @click="state.show2 = true">嵌套内容</nut-button>
       <nut-overlay v-model:visible="state.show2" :z-index="2000">
         <div class="wrapper">
           <div class="content">这里是正文</div>
@@ -28,7 +29,11 @@ export default {
   setup() {
     const state = reactive({
       show: false,
-      show2: false
+      show2: false,
+      show3: false,
+      overlayStyle: {
+        backgroundColor: 'rgba(0, 0, 0, .2)'
+      }
     });
     return {
       state