docs: ✏️ 添加关于 Button 自定义样式设置阴影的文档

✅ Closes: #731

docs/component/button.md

@@ -2,7 +2,6 @@
 
 # Button 按钮
 
-
 ## 基本用法
 
 基本按钮。
@@ -39,7 +38,6 @@
 <wd-button plain hairline>主要按钮</wd-button>
 ```
 
-
 ## 按钮大小
 
 设置 `size` ，支持 'small'、'medium'、'large'，默认为 'medium'。
@@ -83,6 +81,7 @@
 ```
 
 结合`classPrefix`可以使用自定义图标，参见 [Icon 自定义图标](/component/icon#自定义图标)。
+
 ```html
 <wd-button classPrefix="fish" icon="kehuishouwu">可回收</wd-button>
 ```
@@ -95,10 +94,34 @@
 <wd-button block>主要按钮</wd-button>
 ```
 
+## 自定义样式
+
+通过 `custom-class` 和 `custom-style` 属性可以自定义按钮的样式，这里我们使用`custom-class`给按钮添加一个 `Material Design 3` 风格的`box-shadow`。
+
+```html
+<view class="page-class">
+  <wd-button custom-class="custom-shadow">主要按钮</wd-button>
+  <wd-button type="success" custom-class="custom-shadow">成功按钮</wd-button>
+  <wd-button type="info" custom-class="custom-shadow">信息按钮</wd-button>
+  <wd-button type="warning" custom-class="custom-shadow">警告按钮</wd-button>
+  <wd-button type="error" custom-class="custom-shadow">危险按钮</wd-button>
+</view>
+```
+
+```scss
+.page-class {
+  :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%);
+    }
+  }
+}
+```
+
 ## Attributes
 
 | 参数                   | 说明                                                                                                                                                           | 类型        | 可选值                                                   | 默认值       | 最低版本 |
-|-----|------|-----|-------|-------|--------|
+| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------------------------------------------------- | ------------ | -------- |
 | type                   | 按钮类型                                                                                                                                                       | string      | primary / success / info / warning / error / text / icon | primary      | -        |
 | round                  | 圆角按钮                                                                                                                                                       | boolean     | -                                                        | true         | -        |
 | plain                  | 幽灵按钮                                                                                                                                                       | boolean     | -                                                        | false        | -        |
@@ -142,7 +165,7 @@
 ## Events
 
 | 事件名称       | 说明                                                         | 参数     | 最低版本 |
-|---------|-----|-----|---------|
+| -------------- | ------------------------------------------------------------ | -------- | -------- |
 | click          | 点击事件                                                     | `event`  | -        |
 | getuserinfo    | 获取用户信息                                                 | `detail` | -        |
 | contact        | 客服消息回调，open-type="contact"时有效                      | `detail` | -        |
@@ -154,5 +177,5 @@
 ## 外部样式类
 
 | 类名         | 说明       | 最低版本 |
-|-----|------|--------|
+| ------------ | ---------- | -------- |
 | custom-class | 根节点样式 | -        |

src/pages/button/Index.vue

@@ -1,6 +1,6 @@
 <template>
   <page-wraper>
-    <view>
+    <view class="page-button">
       <demo-block title="基本用法">
         <wd-button>主要按钮</wd-button>
         <wd-button type="success">成功按钮</wd-button>
@@ -114,6 +114,14 @@
           <wd-button type="info" size="small" plain>次操作</wd-button>
         </view>
       </demo-block>
+
+      <demo-block title="自定义样式-Material Design 3 风格 box-shadow">
+        <wd-button custom-class="custom-shadow">主要按钮</wd-button>
+        <wd-button type="success" custom-class="custom-shadow">成功按钮</wd-button>
+        <wd-button type="info" custom-class="custom-shadow">信息按钮</wd-button>
+        <wd-button type="warning" custom-class="custom-shadow">警告按钮</wd-button>
+        <wd-button type="error" custom-class="custom-shadow">危险按钮</wd-button>
+      </demo-block>
     </view>
   </page-wraper>
 </template>
@@ -124,10 +132,18 @@ function handleGetuserinfo(event: any) {
 }
 </script>
 <style lang="scss" scoped>
+.page-button {
   :deep(button) {
     margin: 0 10px 10px 0;
   }
+
+  :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%);
+    }
+  }
   .button-block {
     margin-right: 0;
   }
+}
 </style>

src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss

@@ -131,58 +131,42 @@ $-badge-border: var(--wot-badge-border, 2px solid $-badge-color) !default; //
 
 /* button */
 $-button-disabled-opacity: var(--wot-button-disabled-opacity, 0.6) !default; // button禁用透明度
-
 $-button-small-height: var(--wot-button-small-height, 28px) !default; // 小型按钮高度
 $-button-small-padding: var(--wot-button-small-padding, 0 12px) !default; // 小型按钮padding
 $-button-small-fs: var(--wot-button-small-fs, $-fs-secondary) !default; // 小型按钮字号
 $-button-small-radius: var(--wot-button-small-radius, 2px) !default; // 小型按钮圆角大小
 $-button-small-loading: var(--wot-button-small-loading, 14px) !default; // 小型按钮loading图标大小
-
 $-button-medium-height: var(--wot-button-medium-height, 36px) !default; // 中型按钮高度
 $-button-medium-padding: var(--wot-button-medium-padding, 0 16px) !default; // 中型按钮padding
 $-button-medium-fs: var(--wot-button-medium-fs, $-fs-content) !default; // 中型按钮字号
 $-button-medium-radius: var(--wot-button-medium-radius, 4px) !default; // 中型按钮圆角大小
 $-button-medium-loading: var(--wot-button-medium-loading, 18px) !default; // 中型按钮loading图标大小
 $-button-medium-box-shadow-size: var(--wot-button-medium-box-shadow-size, 0px 2px 4px 0px) !default; // 中尺寸阴影尺寸
-
 $-button-large-height: var(--wot-button-large-height, 44px) !default; // 大型按钮高度
 $-button-large-padding: var(--wot-button-large-padding, 0 36px) !default; // 大型按钮padding
 $-button-large-fs: var(--wot-button-large-fs, $-fs-title) !default; // 大型按钮字号
 $-button-large-radius: var(--wot-button-large-radius, 8px) !default; // 大型按钮圆角大小
 $-button-large-loading: var(--wot-button-large-loading, 24px) !default; // 大小按钮loading图标大小
 $-button-large-box-shadow-size: var(--wot-button-large-box-shadow-size, 0px 4px 8px 0px) !default; // 大尺寸阴影尺寸
-
 $-button-icon-fs: var(--wot-button-icon-fs, 1.18em) !default; // 带图标的按钮的图标大小
 $-button-icon-size: var(--wot-button-icon-size, 40px) !default; // icon 类型按钮尺寸
 $-button-icon-color: var(--wot-button-icon-color, rgba(0, 0, 0, 0.65)) !default; // icon 类型按钮颜色
 $-button-icon-disabled-color: var(--wot-button-icon-disabled-color, $-color-icon-disabled) !default; // icon 类型按钮禁用颜色
-
 $-button-normal-color: var(--wot-button-normal-color, $-color-title) !default; // 文字颜色
 $-button-normal-disabled-color: var(--wot-button-normal-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 默认按钮禁用文字色
-
 $-button-plain-bg-color: var(--wot-button-plain-bg-color, $-color-white) !default; // 幽灵按钮背景色
-
 $-button-primary-color: var(--wot-button-primary-color, $-color-white) !default; // 主要按钮颜色
 $-button-primary-bg-color: var(--wot-button-primary-bg-color, $-color-theme) !default; // 主要按钮背景颜色
-$-button-primary-box-shadow-color: var(--wot-button-primary-box-shadow-color, rgba($-color-theme, 0.25)) !default; // 主要按钮阴影颜色
-
 $-button-success-color: var(--wot-button-success-color, $-color-white) !default; // 成功按钮文字颜色
 $-button-success-bg-color: var(--wot-button-success-bg-color, $-color-success) !default; // 成功按钮颜色
-$-button-success-box-shadow-color: var(--wot-button-success-box-shadow-color, rgba($-color-success, 0.25)) !default; // 主要按钮阴影颜色
-
 $-button-info-color: var(--wot-button-info-color, $-color-title) !default; // 信息按钮颜色
 $-button-info-bg-color: var(--wot-button-info-bg-color, #f0f0f0) !default; // 信息按钮背景颜色
 $-button-info-plain-border-color: var(--wot-button-info-plain-border-color, rgba(0, 0, 0, 0.45)) !default; // 信息按钮禁用颜色
 $-button-info-plain-normal-color: var(--wot-button-info-plain-normal-color, rgba(0, 0, 0, 0.85)) !default; // 信息幽灵按钮默认颜色
-
 $-button-warning-color: var(--wot-button-warning-color, $-color-white) !default; // 警告按钮字体颜色
 $-button-warning-bg-color: var(--wot-button-warning-bg-color, $-color-warning) !default; // 警告按钮背景颜色
-$-button-warning-box-shadow-color: var(--wot-button-warning-box-shadow-color, rgba($-color-warning, 0.25)) !default; // 主要按钮阴影颜色
-
 $-button-error-color: var(--wot-button-error-color, $-color-white) !default; // 错误按钮颜色
 $-button-error-bg-color: var(--wot-button-error-bg-color, $-color-danger) !default; // 错误按钮背景颜色
-$-button-error-box-shadow-color: var(--wot-button-error-box-shadow-color, rgba($-color-danger, 0.25)) !default; // 主要按钮阴影颜色
-
 $-button-text-hover-opacity: var(--wot-button-text-hover-opacity, 0.7) !default; // 文字button激活时透明度
 
 /* cell */

src/uni_modules/wot-design-uni/components/wd-button/index.scss

@@ -148,26 +148,6 @@
     border-radius: $-button-medium-radius;
     font-size: $-button-medium-fs;
 
-    @include when(primary) {
-      box-shadow: $-button-medium-box-shadow-size $-button-primary-box-shadow-color;
-    }
-
-    @include when(success) {
-      box-shadow: $-button-medium-box-shadow-size $-button-success-box-shadow-color;
-    }
-
-    @include when(warning) {
-      box-shadow: $-button-medium-box-shadow-size $-button-warning-box-shadow-color;
-    }
-
-    @include when(error) {
-      box-shadow: $-button-medium-box-shadow-size $-button-error-box-shadow-color;
-    }
-
-    @include when(plain) {
-      box-shadow: none;
-    }
-
     @include when(round) {
       min-width: 120px;
 
@@ -198,25 +178,6 @@
       border-radius: $-button-large-radius;
     }
 
-    &:not(.is-plain) {
-      @include when(primary) {
-        box-shadow: $-button-large-box-shadow-size $-button-primary-box-shadow-color;
-      }
-
-      @include when(success) {
-        box-shadow: $-button-large-box-shadow-size $-button-success-box-shadow-color;
-      }
-
-      @include when(warning) {
-        box-shadow: $-button-large-box-shadow-size $-button-warning-box-shadow-color;
-      }
-
-      @include when(error) {
-        box-shadow: $-button-large-box-shadow-size $-button-error-box-shadow-color;
-      }
-    }
-
-
     .wd-button__loading {
       width: $-button-large-loading;
       height: $-button-large-loading;