From 46b1c394a024c293fb07c7788691e2ac572a2fa1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=A6=82=E6=91=B8=E9=B1=BC=E5=8E=BB?=
 <1780903673@qq.com>
Date: Fri, 6 Dec 2024 00:09:58 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=20MessageBox=20=E8=87=AA=E5=AE=9A=E4=B9=89=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E6=A0=B7=E5=BC=8F=E7=9A=84=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/messageBox/Index.vue | 76 +++++++++++++++++-----------------
 1 file changed, 39 insertions(+), 37 deletions(-)

diff --git a/src/pages/messageBox/Index.vue b/src/pages/messageBox/Index.vue
index cdd412b4..a83a7e9c 100644
--- a/src/pages/messageBox/Index.vue
+++ b/src/pages/messageBox/Index.vue
@@ -1,41 +1,43 @@
 <template>
-  <page-wraper>
-    <wd-message-box></wd-message-box>
-    <wd-message-box selector="wd-message-box-slot">
-      <wd-rate custom-class="custom-rate-class" v-model="rate" />
-    </wd-message-box>
-    <demo-block title="alert">
-      <wd-button @click="alert">alert</wd-button>
-    </demo-block>
+  <view class="page-message-box">
+    <page-wraper>
+      <wd-message-box></wd-message-box>
+      <wd-message-box selector="wd-message-box-slot">
+        <wd-rate v-model="rate" />
+      </wd-message-box>
+      <demo-block title="alert">
+        <wd-button @click="alert">alert</wd-button>
+      </demo-block>
 
-    <demo-block title="显示标题">
-      <wd-button @click="alertWithTitle">alert</wd-button>
-    </demo-block>
+      <demo-block title="显示标题">
+        <wd-button @click="alertWithTitle">alert</wd-button>
+      </demo-block>
 
-    <demo-block title="confirm">
-      <wd-button @click="confirm">confirm</wd-button>
-    </demo-block>
+      <demo-block title="confirm">
+        <wd-button @click="confirm">confirm</wd-button>
+      </demo-block>
 
-    <demo-block title="prompt">
-      <wd-button @click="prompt">prompt</wd-button>
-    </demo-block>
+      <demo-block title="prompt">
+        <wd-button @click="prompt">prompt</wd-button>
+      </demo-block>
 
-    <demo-block title="当文案过长时，弹框的高度不再增加，而是将文案内容设置成滚动">
-      <wd-button @click="alertWithLongChar">alert</wd-button>
-    </demo-block>
+      <demo-block title="当文案过长时，弹框的高度不再增加，而是将文案内容设置成滚动">
+        <wd-button @click="alertWithLongChar">alert</wd-button>
+      </demo-block>
 
-    <demo-block title="使用wd-message-box组件，通过slot插入其他组件内容">
-      <wd-button @click="withSlot">custom</wd-button>
-    </demo-block>
+      <demo-block title="使用wd-message-box组件，通过slot插入其他组件内容">
+        <wd-button @click="withSlot">custom</wd-button>
+      </demo-block>
 
-    <demo-block title="使用beforeConfirm钩子，在弹框确认前，可以进行一些操作">
-      <wd-button @click="beforeConfirm">beforeConfirm</wd-button>
-    </demo-block>
+      <demo-block title="使用beforeConfirm钩子，在弹框确认前，可以进行一些操作">
+        <wd-button @click="beforeConfirm">beforeConfirm</wd-button>
+      </demo-block>
 
-    <demo-block title="通过button-props自定义按钮">
-      <wd-button @click="withButtonProps">withButtonProps</wd-button>
-    </demo-block>
-  </page-wraper>
+      <demo-block title="通过button-props自定义按钮">
+        <wd-button @click="withButtonProps">withButtonProps</wd-button>
+      </demo-block>
+    </page-wraper>
+  </view>
 </template>
 <script lang="ts" setup>
 import { useMessage, useToast } from '@/uni_modules/wot-design-uni'
@@ -113,10 +115,12 @@ function withButtonProps() {
       msg: '自定义按钮样式',
       title: '提示',
       cancelButtonProps: {
+        round: false,
         type: 'error',
         customClass: 'custom-shadow'
       },
       confirmButtonProps: {
+        round: false,
         type: 'success',
         customClass: 'custom-shadow'
       }
@@ -141,13 +145,11 @@ function withSlot() {
 }
 </script>
 <style lang="scss" scoped>
-:deep(.custom-rate-class) {
-  display: block;
-  height: 22px;
-}
-:deep() {
-  .custom-shadow {
-    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
+.page-message-box {
+  :deep() {
+    .custom-shadow {
+      box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
+    }
   }
 }
 </style>