feat: ✨ Button按钮组件支持使用自定义组件

✅ Closes: #310

Author: Moonofweisheng

docs/component/button.md

@@ -82,6 +82,11 @@
 <wd-button icon="edit-outline"></wd-button>
 ```
 
+结合`classPrefix`可以使用自定义图标，参见 [Icon 自定义图标](/component/icon#自定义图标)。
+```html
+<wd-button classPrefix="fish" icon="kehuishouwu">可回收</wd-button>
+```
+
 ## 块状按钮
 
 设置 `block` 属性。
@@ -113,7 +118,7 @@
 | send-message-img | 会话内消息卡片图片，open-type="contact"时有效 | string | - | 截图 | - |
 | app-parameter | 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 | string | - | - | - |
 | show-message-card	| 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 | boolean | - | false | - |
-
+| classPrefix | 类名前缀，用于使用自定义图标，参见[icon](/component/icon#自定义图标) | string | - | 'wd-icon' | 0.1.27 |
 ## Events
 
 | 事件名称 | 说明 | 参数 | 最低版本 |

docs/component/toast.md

@@ -32,7 +32,7 @@ toast.info('常规提示信息')
 ```
 
 ## 使用图标
-可以使用`iconClass`指定图标，结合`classPrefix`可以使用自定义图标，参见[icon](/component/icon#自定义图标)。
+可以使用`iconClass`指定图标，结合`classPrefix`可以使用自定义图标，参见 [Icon 自定义图标](/component/icon#自定义图标)。
 ```ts
 // 使用组件库内部图标
 toast.show({

src/pages/button/Index.vue

@@ -60,6 +60,7 @@
       <demo-block title="带图标的基本按钮">
         <wd-button icon="download">下载</wd-button>
         <wd-button icon="setting">设置</wd-button>
+        <wd-button classPrefix="fish" icon="kehuishouwu">可回收</wd-button>
         <wd-button icon="download" size="small">下载</wd-button>
         <wd-button icon="setting" size="small">设置</wd-button>
         <wd-button icon="download" size="large">下载</wd-button>

src/uni_modules/wot-design-uni/components/wd-button/types.ts

@@ -1,10 +1,10 @@
 /*
  * @Author: weisheng
  * @Date: 2024-03-15 11:36:12
- * @LastEditTime: 2024-03-18 13:24:34
+ * @LastEditTime: 2024-07-19 21:31:44
  * @LastEditors: weisheng
  * @Description:
- * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-button\types.ts
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-button/types.ts
  * 记得注释
  */
 import type { ExtractPropTypes } from 'vue'
@@ -47,6 +47,10 @@ export const buttonProps = {
    * 图标类名
    */
   icon: String,
+  /**
+   * 类名前缀，用于使用自定义图标，用法参考Icon组件
+   */
+  classPrefix: makeStringProp('wd-icon'),
   /**
    * 加载中按钮
    */

src/uni_modules/wot-design-uni/components/wd-button/wd-button.vue

@@ -39,7 +39,7 @@
     <view v-if="loading" class="wd-button__loading">
       <view class="wd-button__loading-svg" :style="loadingStyle"></view>
     </view>
-    <wd-icon v-else-if="icon" custom-class="wd-button__icon" :name="icon"></wd-icon>
+    <wd-icon v-else-if="icon" custom-class="wd-button__icon" :name="icon" :classPrefix="classPrefix"></wd-icon>
     <view class="wd-button__text"><slot /></view>
   </button>
 </template>