From cf5635d4aea6a812a42d8d418391763b536a9823 Mon Sep 17 00:00:00 2001 From: anlyyao Date: Mon, 5 Dec 2022 15:48:13 +0800 Subject: [PATCH] fix: fix cr --- src/back-top/README.en-US.md | 2 +- src/back-top/README.md | 2 +- .../__test__/__snapshots__/demo.test.js.snap | 2 +- src/back-top/_example/half-round/index.js | 2 +- src/back-top/back-top.less | 21 ++++++----- src/back-top/back-top.ts | 37 +++++++++++-------- src/back-top/back-top.wxml | 11 ++++-- src/back-top/props.ts | 4 +- src/back-top/type.ts | 6 +-- src/common/template/icon.wxml | 15 ++++++++ 10 files changed, 65 insertions(+), 37 deletions(-) create mode 100644 src/common/template/icon.wxml diff --git a/src/back-top/README.en-US.md b/src/back-top/README.en-US.md index a2fe1252b..d7e48bc8b 100644 --- a/src/back-top/README.en-US.md +++ b/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 diff --git a/src/back-top/README.md b/src/back-top/README.md index 86edc98c7..d7173df8e 100644 --- a/src/back-top/README.md +++ b/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 diff --git a/src/back-top/__test__/__snapshots__/demo.test.js.snap b/src/back-top/__test__/__snapshots__/demo.test.js.snap index fba8e54e8..739b6a071 100644 --- a/src/back-top/__test__/__snapshots__/demo.test.js.snap +++ b/src/back-top/__test__/__snapshots__/demo.test.js.snap @@ -14,7 +14,7 @@ exports[`BackTop BackTop half-round demo works fine 1`] = ` diff --git a/src/back-top/_example/half-round/index.js b/src/back-top/_example/half-round/index.js index ff2387ad3..8007e3848 100644 --- a/src/back-top/_example/half-round/index.js +++ b/src/back-top/_example/half-round/index.js @@ -1,6 +1,6 @@ Component({ data: { - backTopTheme: 'half-round', + backTopTheme: 'half-round-dark', backTopText: '返回顶部', }, methods: { diff --git a/src/back-top/back-top.less b/src/back-top/back-top.less index e9cdde791..c0a49e5a4 100644 --- a/src/back-top/back-top.less +++ b/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); } } diff --git a/src/back-top/back-top.ts b/src/back-top/back-top.ts index 40e80e73f..24ba80b2b 100644 --- a/src/back-top/back-top.ts +++ b/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, + }); + }, + }; } diff --git a/src/back-top/back-top.wxml b/src/back-top/back-top.wxml index 5cc27fe18..9bc522e63 100644 --- a/src/back-top/back-top.wxml +++ b/src/back-top/back-top.wxml @@ -1,9 +1,14 @@ + - - {{text}} + + + + + {{text}} diff --git a/src/back-top/props.ts b/src/back-top/props.ts index 6afe4f174..19c19c0bd 100644 --- a/src/back-top/props.ts +++ b/src/back-top/props.ts @@ -22,8 +22,8 @@ const props: TdBackTopProps = { }, /** 图标 */ icon: { - type: String, - value: 'backtop', + type: null, + value: null, }, /** 文案 */ text: { diff --git a/src/back-top/type.ts b/src/back-top/type.ts index 59f49acfc..6f992916a 100644 --- a/src/back-top/type.ts +++ b/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; }; /** * 文案 diff --git a/src/common/template/icon.wxml b/src/common/template/icon.wxml new file mode 100644 index 000000000..5e755f382 --- /dev/null +++ b/src/common/template/icon.wxml @@ -0,0 +1,15 @@ +