fix: fix cr

src/back-top/README.en-US.md

@@ -9,7 +9,7 @@ name | type | default | description | required
 custom-style `v0.25.0` | String | - | \- | N
 external-classes | Array | - | `['t-class', 't-class-icon', 't-class-text']` | N
 fixed | Boolean | true | \- | N
-icon | String / Slot | 'backtop' | \- | N
+icon | String / Object / Slot | - | \- | N
 text | String | '' | \- | N
 theme | String | round | options：round/half-round/round-dark/half-round-dark | N
 

src/back-top/README.md

@@ -32,7 +32,7 @@ isComponent: true
 custom-style `v0.25.0` | String | - | 自定义组件样式 | N
 external-classes | Array | - | 组件类名，分别用于设置外层元素、图标、文本内容等元素类名。`['t-class', 't-class-icon', 't-class-text']` | N
 fixed | Boolean | true | 是否绝对定位固定到屏幕右下方 | N
-icon | String / Slot | 'backtop' | 图标 | N
+icon | String / Object / Slot | - | 图标 | N
 text | String | '' | 文案 | N
 theme | String | round | 预设的样式类型。可选项：round/half-round/round-dark/half-round-dark | N
 

src/back-top/__test__/__snapshots__/demo.test.js.snap

@@ -14,7 +14,7 @@ exports[`BackTop BackTop half-round demo works fine 1`] = `
 <half-round>
   <t-back-top
     text="返回顶部"
-    theme="half-round"
+    theme="half-round-dark"
     bind:to-top="onToTop"
   />
 </half-round>

src/back-top/_example/half-round/index.js

@@ -1,6 +1,6 @@
 Component({
   data: {
-    backTopTheme: 'half-round',
+    backTopTheme: 'half-round-dark',
     backTopText: '返回顶部',
   },
   methods: {

src/back-top/back-top.less

@@ -32,34 +32,34 @@
   transition: height 0.2s;
   height: auto;
 
-  &.@{prefix}-is-fixed {
+  &.@{backtop}--fixed {
     position: fixed;
     right: @back-top-fixed-right;
     bottom: @back-top-fixed-bottom;
   }
 
-  &.@{prefix}-is-round,
-  &.@{prefix}-is-round-dark {
+  &.@{backtop}--round,
+  &.@{backtop}--round-dark {
     width: @back-top-round-width;
     height: @back-top-round-width;
     border-radius: @back-top-round-border-radius;
   }
 
-  &.@{prefix}-is-round,
-  &.@{prefix}-is-half-round {
+  &.@{backtop}--round,
+  &.@{backtop}--half-round {
     color: @back-top-round-color;
     border: 1rpx solid @back-top-round-border-color;
     background-color: @back-top-round-bg-color;
   }
 
-  &.@{prefix}-is-round-dark,
-  &.@{prefix}-is-half-round-dark {
+  &.@{backtop}--round-dark,
+  &.@{backtop}--half-round-dark {
     color: @back-top-round-dark-color;
     background-color: @back-top-round-dark-bg-color;
   }
 
-  &.@{prefix}-is-half-round,
-  &.@{prefix}-is-half-round-dark {
+  &.@{backtop}--half-round,
+  &.@{backtop}--half-round-dark {
     width: @back-top-half-round-width;
     height: @back-top-half-round-height;
     border-radius: @back-top-half-round-border-radius 0 0 @back-top-half-round-border-radius;
@@ -68,6 +68,9 @@
 
     .@{backtop}__text {
       width: 2em;
+    }
+
+    .@{backtop}__icon:not(:empty) + .@{backtop}__text {
       margin-left: (@spacer / 2);
     }
   }

src/back-top/back-top.ts

@@ -7,29 +7,34 @@ const name = `${prefix}-back-top`;
 
 @wxComponent()
 export default class BackTop extends SuperComponent {
-  /**
-   * Component properties
-   */
   externalClasses = [`${prefix}-class`, `${prefix}-class-icon`, `${prefix}-class-text`];
 
+  options = {
+    multipleSlots: true,
+  };
+
   properties = props;
 
-  /**
-   * Component initial data
-   */
   data = {
     prefix,
     classPrefix: name,
   };
 
-  /**
-   * Component methods
-   */
-  toTop() {
-    this.triggerEvent('to-top');
-    wx.pageScrollTo({
-      scrollTop: 0,
-      duration: 300,
-    });
-  }
+  observers = {
+    icon(icon) {
+      this.setData({
+        iconData: icon,
+      });
+    },
+  };
+
+  methods = {
+    toTop() {
+      this.triggerEvent('to-top');
+      wx.pageScrollTo({
+        scrollTop: 0,
+        duration: 300,
+      });
+    },
+  };
 }

src/back-top/back-top.wxml

@@ -1,9 +1,14 @@
+<import src="../common/template/icon.wxml" />
 <view
   style="{{ customStyle }}"
-  class="{{prefix}}-class {{classPrefix}} {{fixed ? prefix + '-is-fixed' : ''}} {{prefix + '-is-' + theme}}"
+  class="{{prefix}}-class {{classPrefix}} {{fixed ? classPrefix + '--fixed' : ''}} {{classPrefix + '--' + theme}}"
   bindtap="toTop"
 >
-  <t-icon wx:if="{{!!icon}}" class="{{classPrefix}}__icon {{prefix}}-class-icon" name="{{icon}}" />
-  <view wx:if="{{!!text}}" class="{{classPrefix}}__text {{prefix}}-class-text"> {{text}} </view>
+  <view wx:if="{{iconData !== null}}" class="{{classPrefix}}__icon">
+    <slot wx:if="{{iconData === 'slot'}}" name="icon" />
+    <template wx:else is="icon" data="{{tClass: prefix + '-class-icon', name: iconData || 'backtop', ...iconData}}">
+    </template>
+  </view>
+  <view wx:if="{{!!text}}" class="{{classPrefix}}__text {{prefix}}-class-text">{{text}}</view>
   <slot />
 </view>

src/back-top/props.ts

@@ -22,8 +22,8 @@ const props: TdBackTopProps = {
   },
   /** 图标 */
   icon: {
-    type: String,
-    value: 'backtop',
+    type: null,
+    value: null,
   },
   /** 文案 */
   text: {

src/back-top/type.ts

@@ -30,11 +30,11 @@ export interface TdBackTopProps {
   };
   /**
    * 图标
-   * @default 'backtop'
+   * @default null
    */
   icon?: {
-    type: StringConstructor;
-    value?: string;
+    type: null;
+    value?: string | object;
   };
   /**
    * 文案

src/common/template/icon.wxml

@@ -0,0 +1,15 @@
+<template name="icon">
+  <t-icon
+    customStyle="{{customStyle}}"
+    class="{{class}}"
+    t-class="{{tClass}}"
+    prefix="{{prefix}}"
+    name="{{name}}"
+    size="{{size}}"
+    color="{{color}}"
+    ariaHidden="{{ariaHidden}}"
+    ariaLabel="{{ariaLabel}}"
+    ariaRole="{{ariaRole}}"
+    bind:click="{{onTplClick}}"
+  />
+</template>