diff --git a/src/back-top/README.en-US.md b/src/back-top/README.en-US.md index a2fe1252b..dd5e10fcf 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 / Boolean / 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..93ed3c64e 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 / Boolean / Object / Slot | - | 图标。值为 `'slot'` 表示使用插槽。不传表示使用默认图标 `'backtop'` | 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 c56e99e52..739b6a071 100644 --- a/src/back-top/__test__/__snapshots__/demo.test.js.snap +++ b/src/back-top/__test__/__snapshots__/demo.test.js.snap @@ -9,3 +9,13 @@ exports[`BackTop BackTop base demo works fine 1`] = ` /> `; + +exports[`BackTop BackTop half-round demo works fine 1`] = ` + + + +`; diff --git a/src/back-top/__test__/demo.test.js b/src/back-top/__test__/demo.test.js index 000147513..162d97d77 100644 --- a/src/back-top/__test__/demo.test.js +++ b/src/back-top/__test__/demo.test.js @@ -5,7 +5,7 @@ import simulate from 'miniprogram-simulate'; import path from 'path'; -const mapper = ['base']; +const mapper = ['base', 'half-round']; describe('BackTop', () => { mapper.forEach((demoName) => { diff --git a/src/back-top/_example/back-top.json b/src/back-top/_example/back-top.json index cd56e0cc0..817875891 100644 --- a/src/back-top/_example/back-top.json +++ b/src/back-top/_example/back-top.json @@ -3,6 +3,7 @@ "navigationBarBackgroundColor": "#fff", "usingComponents": { "t-skeleton": "tdesign-miniprogram/skeleton/skeleton", - "base": "./base" + "base": "./base", + "half-round": "./half-round" } } diff --git a/src/back-top/_example/back-top.less b/src/back-top/_example/back-top.less index bd1cfaa30..08665091e 100644 --- a/src/back-top/_example/back-top.less +++ b/src/back-top/_example/back-top.less @@ -1,18 +1,14 @@ page { background: #fff; - .skeleton-text { - border-radius: 16rpx; - } - .skeleton-item { - padding-bottom: 24rpx; + padding-bottom: 48rpx; } .container-flex { display: flex; justify-content: space-between; - margin-top: 32rpx; + margin-top: 48rpx; flex-wrap: wrap; } } diff --git a/src/back-top/_example/back-top.ts b/src/back-top/_example/back-top.ts index 14c02e9f6..61889c53c 100644 --- a/src/back-top/_example/back-top.ts +++ b/src/back-top/_example/back-top.ts @@ -1,15 +1,9 @@ Page({ data: { + round: false, + halfRound: false, showBackTop: false, - rowCols: [ - { width: '332rpx', height: '342rpx' }, - { width: '332rpx', height: '32rpx' }, - { width: '214rpx', height: '32rpx' }, - [ - { width: '186rpx', height: '32rpx' }, - { width: '64rpx', height: '32rpx', marginLeft: '82rpx' }, - ], - ], + rowCol: [{ size: '163.5px', borderRadius: '12px' }, 1, { width: '61%' }], }, windowHeight: null, @@ -24,7 +18,22 @@ Page({ } }, - onBtnClick() { + onBtnClick(e: any) { + const source = e.currentTarget.dataset.source as string; + if (source === 'round') { + this.setData({ + round: true, + halfRound: false, + }); + } + + if (source === 'half-round') { + this.setData({ + halfRound: true, + round: false, + }); + } + wx.pageScrollTo({ duration: 300, scrollTop: 1000 }); }, }); diff --git a/src/back-top/_example/back-top.wxml b/src/back-top/_example/back-top.wxml index dbd656236..4bf95870c 100644 --- a/src/back-top/_example/back-top.wxml +++ b/src/back-top/_example/back-top.wxml @@ -2,19 +2,29 @@ BackTop 返回顶部 用于当页面过长往下滑动时，帮助用户快速回到页面顶部。 - - 圆白底 + + + 圆形返回顶部 + + + + + 半圆形返回顶部 + + + - - - - - - - - + + + + + + + + - - + + + diff --git a/src/back-top/_example/half-round/index.js b/src/back-top/_example/half-round/index.js new file mode 100644 index 000000000..8007e3848 --- /dev/null +++ b/src/back-top/_example/half-round/index.js @@ -0,0 +1,11 @@ +Component({ + data: { + backTopTheme: 'half-round-dark', + backTopText: '返回顶部', + }, + methods: { + onToTop(e) { + console.log('backToTop', e); + }, + }, +}); diff --git a/src/back-top/_example/half-round/index.json b/src/back-top/_example/half-round/index.json new file mode 100644 index 000000000..712dec7ec --- /dev/null +++ b/src/back-top/_example/half-round/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "t-back-top": "tdesign-miniprogram/back-top/back-top" + } +} diff --git a/src/back-top/_example/half-round/index.wxml b/src/back-top/_example/half-round/index.wxml new file mode 100644 index 000000000..d75a6679d --- /dev/null +++ b/src/back-top/_example/half-round/index.wxml @@ -0,0 +1 @@ + diff --git a/src/back-top/_example/half-round/index.wxss b/src/back-top/_example/half-round/index.wxss new file mode 100644 index 000000000..e69de29bb diff --git a/src/back-top/back-top.less b/src/back-top/back-top.less index a05be55d3..38b5325a7 100644 --- a/src/back-top/back-top.less +++ b/src/back-top/back-top.less @@ -1,10 +1,25 @@ -// @import (css) '../common/index.wxss'; @import '../common/style/index.less'; -@backtop: ~"@{prefix}-back-top"; +@backtop: ~'@{prefix}-back-top'; @back-top-text-font-size: @font-size; -@back-top-icon-font-size: 32rpx; -@back-top-default-color: #666; +@back-top-text-line-height: 24rpx; +@back-top-icon-font-size: 44rpx; +@back-top-round-width: 96rpx; +@back-top-half-round-width: 120rpx; +@back-top-half-round-height: 80rpx; +@back-top-fixed-right: @spacer; +@back-top-fixed-bottom: @spacer-2; + +@back-top-round-color: var(--td-back-top-round-color, @font-gray-1); // 'round'主题内容颜色 +@back-top-round-bg-color: var(--td-back-top-round-bg-color, @white-color-1); // 'round'主题背景颜色 +@back-top-round-border-color: var(--td-back-top-round-border-color, @gray-color-4); // 'round'主题边框颜色 +@back-top-round-border-radius: var(--td-back-top-round-border-radius, @radius-circle); // 'round'主题圆角大小 +@back-top-round-dark-color: var(--td-back-top-round-dark-color, @font-white-1); // 'round-dark'主题内容颜色 +@back-top-round-dark-bg-color: var(--td-back-top-round-dark-bg-color, @gray-color-14); // 'round-dark'主题背景颜色 +@back-top-half-round-border-radius: var( + --td-back-top-half-round-border-radius, + @radius-round +); // 'round-dark'主题圆角大小 .@{backtop} { display: flex; @@ -14,90 +29,61 @@ background-color: transparent; overflow: hidden; box-sizing: border-box; - transition: height .2s; + transition: height 0.2s; height: auto; - &.@{prefix}-is-fixed { + &--fixed { position: fixed; - right: 32rpx; - bottom: 133rpx; + right: @back-top-fixed-right; + bottom: @back-top-fixed-bottom; } - &.@{prefix}-is-round, - &.@{prefix}-is-round-dark { - width: 96rpx; - height: 96rpx; - border-radius: 50%; - - .@{backtop}__icon { - margin: 0; - // border: none; - border-radius: 0; - background-color: transparent; - } - - .@{backtop}__text { - padding: 0; - margin-top: 0; - } + &--round, + &--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 { - background-color: rgb(255, 255, 255); - color: #333; - border: 1rpx solid; - border-color: #ddd; - - .@{backtop}__icon, - .@{backtop}__text { - color: #333; - } + &--round, + &--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 { - background-color: #000; - color: #fff; - - .@{backtop}__icon, - .@{backtop}__text { - color: #fff; - } + &--round-dark, + &--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 { - width: 120rpx; - height: 80rpx; - border-radius: 120rpx 0 0 120rpx; + &--half-round, + &--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; flex-direction: row; right: 0; - .@{backtop}__icon { - margin: 0; - border-radius: 0; - background-color: transparent; + > .@{backtop}__text { + width: 2em; } - .@{backtop}__text { - padding: 0; - margin-left: 8rpx; - width: 2em; + > .@{backtop}__icon:not(:empty) + .@{backtop}__text { + margin-left: (@spacer / 2); } } &__text { font-size: @back-top-text-font-size; - color: @back-top-default-color; - line-height: 24rpx; + line-height: @back-top-text-line-height; } &__icon { display: flex; justify-content: center; align-items: center; - color: @back-top-default-color; font-size: @back-top-icon-font-size; } } diff --git a/src/back-top/back-top.ts b/src/back-top/back-top.ts index 40e80e73f..cdecea37b 100644 --- a/src/back-top/back-top.ts +++ b/src/back-top/back-top.ts @@ -7,29 +7,56 @@ 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.setIcon(icon); + }, + }; + + lifetimes = { + ready() { + this.setIcon(this.properties.icon); + }, + }; + + methods = { + setIcon(icon) { + if (!icon) { + this.setData({ iconName: '', iconData: {} }); + } else if (typeof icon === 'string') { + this.setData({ + iconName: icon, + iconData: {}, + }); + } else if (typeof icon === 'object') { + this.setData({ + iconName: '', + iconData: icon, + }); + } else { + this.setData({ iconName: 'backtop', iconData: {} }); + } + }, + + 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..d803b2312 100644 --- a/src/back-top/back-top.wxml +++ b/src/back-top/back-top.wxml @@ -1,9 +1,15 @@ + + + - - {{text}} + + + + + {{text}} diff --git a/src/back-top/props.ts b/src/back-top/props.ts index 6afe4f174..131111df9 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: true, }, /** 文案 */ text: { diff --git a/src/back-top/type.ts b/src/back-top/type.ts index 59f49acfc..454ed7bdc 100644 --- a/src/back-top/type.ts +++ b/src/back-top/type.ts @@ -30,11 +30,11 @@ export interface TdBackTopProps { }; /** * 图标 - * @default 'backtop' + * @default true */ icon?: { - type: StringConstructor; - value?: string; + type: null; + value?: boolean | string | object; }; /** * 文案 diff --git a/src/common/utils.wxs b/src/common/utils.wxs index 62194078f..b540b4ded 100644 --- a/src/common/utils.wxs +++ b/src/common/utils.wxs @@ -19,6 +19,10 @@ function isObject(obj) { return obj && obj.constructor === 'Object'; } +var isEmptyObj = function (obj) { + return JSON.stringify(obj) === '{}'; +}; + function includes(arr, value) { if (!arr || !isArray(arr)) return false; @@ -57,6 +61,7 @@ module.exports = { addUnit: addUnit, isArray: isArray, isObject: isObject, + isEmptyObj: isEmptyObj, includes: includes, cls: cls, };