浏览代码

feat(button): add third-party icon support (#1018)

p3psi 3 年之前
父节点
当前提交
ae26d18f5e
共有 3 个文件被更改,包括 38 次插入2 次删除
  1. 10 0
      src/packages/__VUE/button/doc.md
  2. 14 1
      src/packages/__VUE/button/index.taro.vue
  3. 14 1
      src/packages/__VUE/button/index.vue

+ 10 - 0
src/packages/__VUE/button/doc.md

@@ -130,6 +130,16 @@ app.use(Button);
 
 :::
 
+#### 自定义图标
+
+参照 `Icon` 组件说明中的自定义图标,其中 `icon-font-class-name` 对应 Icon 组件的 `font-class-name`,`icon-class-prefix` 对应 Icon 组件的 `class-prefix`。
+
+```html
+<template>
+  <nut-button shape="square" plain type="primary" icon-font-class-name="iconfont" icon-class-prefix="icon" icon="close"></nut-button>
+</template>
+```
+
 ### 按钮尺寸
 
 支持 `large`、`normal`、`small`、`mini` 四种尺寸,默认为 `normal`。

+ 14 - 1
src/packages/__VUE/button/index.taro.vue

@@ -2,7 +2,12 @@
   <button :class="classes" :style="getStyle" @click="handleClick">
     <view class="nut-button__warp">
       <nut-icon class="nut-icon-loading" v-if="loading"></nut-icon>
-      <nut-icon :class="icon" v-if="icon && !loading" :name="icon"></nut-icon>
+      <nut-icon
+        v-if="icon && !loading"
+        :name="icon"
+        :class-prefix="iconClassPrefix"
+        :font-class-name="iconFontClassName"
+      ></nut-icon>
       <view :class="{ text: icon || loading }" v-if="$slots.default">
         <slot></slot>
       </view>
@@ -55,6 +60,14 @@ export default create({
     icon: {
       type: String,
       default: ''
+    },
+    iconClassPrefix: {
+      type: String,
+      default: 'nut-icon'
+    },
+    iconFontClassName: {
+      type: String,
+      default: 'nutui-iconfont'
     }
   },
   emits: ['click'],

+ 14 - 1
src/packages/__VUE/button/index.vue

@@ -2,7 +2,12 @@
   <view :class="classes" :style="getStyle" @click="handleClick">
     <view class="nut-button__warp">
       <nut-icon class="nut-icon-loading" v-if="loading"></nut-icon>
-      <nut-icon :class="icon" v-if="icon && !loading" :name="icon"></nut-icon>
+      <nut-icon
+        v-if="icon && !loading"
+        :name="icon"
+        :class-prefix="iconClassPrefix"
+        :font-class-name="iconFontClassName"
+      ></nut-icon>
       <view :class="{ text: icon || loading }" v-if="$slots.default">
         <slot></slot>
       </view>
@@ -56,6 +61,14 @@ export default create({
     icon: {
       type: String,
       default: ''
+    },
+    iconClassPrefix: {
+      type: String,
+      default: 'nut-icon'
+    },
+    iconFontClassName: {
+      type: String,
+      default: 'nutui-iconfont'
     }
   },
   emits: ['click'],