From b7e89e78400de66b1e5d7fa8ad1d836ac585e4b8 Mon Sep 17 00:00:00 2001 From: Y Date: Wed, 13 Dec 2023 16:15:24 +0800 Subject: [PATCH 01/16] =?UTF-8?q?feat:=20Upload=E7=BB=84=E4=BB=B6=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=20disabled=E5=B1=9E=E6=80=A7=EF=BC=8C=E9=A6=96?= =?UTF-8?q?=E9=A1=B5=E8=A1=A5=E5=85=85=E6=9C=8D=E5=8A=A1=E5=A3=B0=E6=98=8E?= =?UTF-8?q?=20(#2489)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(Upload): add disabled props * feat(Upload): recover trd-privacy content * feat(Upload): fix md --- example/pages/home/home.json | 3 ++- example/pages/home/home.less | 8 ++++++++ example/pages/home/home.ts | 6 ++++++ example/pages/home/home.wxml | 2 ++ src/upload/README.en-US.md | 4 ++++ src/upload/README.md | 4 ++++ .../__test__/__snapshots__/demo.test.js.snap | 4 ++++ src/upload/_example/messageFile/index.wxml | 1 + src/upload/_example/multiple/index.wxml | 1 + src/upload/_example/single/index.wxml | 1 + src/upload/_example/status/index.wxml | 1 + src/upload/_example/upload.wxml | 4 +++- src/upload/props.ts | 5 +++++ src/upload/type.ts | 8 ++++++++ src/upload/upload.less | 19 +++++++++++++++++++ src/upload/upload.ts | 3 ++- src/upload/upload.wxml | 4 ++-- 17 files changed, 73 insertions(+), 5 deletions(-) diff --git a/example/pages/home/home.json b/example/pages/home/home.json index 3a89c0df4..e2c250bf0 100644 --- a/example/pages/home/home.json +++ b/example/pages/home/home.json @@ -1,7 +1,8 @@ { "usingComponents": { "pull-down-list": "../../components/pull-down-list/index", - "t-footer": "tdesign-miniprogram/footer/footer" + "t-footer": "tdesign-miniprogram/footer/footer", + "trd-privacy": "/components/trd-privacy/privacy" }, "navigationBarTitleText": "TDesign UI", "navigationBarBackgroundColor": "#f6f6f6", diff --git a/example/pages/home/home.less b/example/pages/home/home.less index 46408d8a1..cb366c147 100644 --- a/example/pages/home/home.less +++ b/example/pages/home/home.less @@ -16,6 +16,14 @@ page { text-align: center; } +.show_privacy { + color: #576b95; + text-align: right; + line-height: 50rpx; + font-size: 24rpx; + text-align: center; +} + .title-wrap { display: flex; align-items: center; diff --git a/example/pages/home/home.ts b/example/pages/home/home.ts index 85d6d8268..734d3aab3 100644 --- a/example/pages/home/home.ts +++ b/example/pages/home/home.ts @@ -18,6 +18,12 @@ Page({ url: `/pages/${str.page}/${str.page}`, }); } + + this.trdPrivacy = this.selectComponent('#trdPrivacy'); + }, + + showPrivacyWin() { + this.trdPrivacy.showPrivacyWin(); }, clickHandle(e) { diff --git a/example/pages/home/home.wxml b/example/pages/home/home.wxml index eb1b23488..7444ec985 100644 --- a/example/pages/home/home.wxml +++ b/example/pages/home/home.wxml @@ -13,5 +13,7 @@ /> + 《TDesign组件库服务声明》 + diff --git a/src/upload/README.en-US.md b/src/upload/README.en-US.md index 945b6fc8e..d05d9ea7e 100644 --- a/src/upload/README.en-US.md +++ b/src/upload/README.en-US.md @@ -8,6 +8,7 @@ name | type | default | description | required add-content | String / Slot | - | \- | N allow-upload-duplicate-file | Boolean | false | \- | N config | Object | - | Typescript：`UploadMpConfig` `type UploadMpConfig = ImageConfig \| VideoConfig` `interface ImageConfig { count?: number; sizeType?: Array; sourceType?: Array }` `type SizeTypeValues = 'original' \| 'compressed'` `type SourceTypeValues = 'album' \| 'camera'` `interface VideoConfig { sourceType?: Array; compressed?: boolean; maxDuration?: number; camera?: 'back' \| 'front' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N +disabled | Boolean | false | \- | N file-list-display | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N files | Array | - | Typescript：`Array` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N default-files | Array | undefined | uncontrolled property。Typescript：`Array` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N @@ -38,5 +39,8 @@ Name | Default Value | Description -- | -- | -- --td-upload-add-bg-color | @bg-color-secondarycontainer | - --td-upload-add-color | @font-gray-3 | - +--td-upload-add-disabled-bg-color | @bg-color-component-disabled | - +--td-upload-add-icon-disabled-color | @text-color-disabled | - --td-upload-add-icon-font-size | 56rpx | - +--td-upload-disabled-mask | rgba(255, 255, 255, 0.55) | - --td-upload-radius | @radius-default | - diff --git a/src/upload/README.md b/src/upload/README.md index 7dc8613c3..42c4ff73d 100644 --- a/src/upload/README.md +++ b/src/upload/README.md @@ -54,6 +54,7 @@ isComponent: true add-content | String / Slot | - | 添加按钮内容 | N allow-upload-duplicate-file | Boolean | false | 【开发中】是否允许重复上传相同文件名的文件 | N config | Object | - | 图片上传配置，视频上传配置，文件上传配置等，包含图片尺寸、图片来源、视频来源、视频拍摄最长时间等。更多细节查看小程序官网。[图片上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html)。[视频上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html)。TS 类型：`UploadMpConfig` `type UploadMpConfig = ImageConfig \| VideoConfig` `interface ImageConfig { count?: number; sizeType?: Array; sourceType?: Array }` `type SizeTypeValues = 'original' \| 'compressed'` `type SourceTypeValues = 'album' \| 'camera'` `interface VideoConfig { sourceType?: Array; compressed?: boolean; maxDuration?: number; camera?: 'back' \| 'front' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N +disabled | Boolean | false | 是否禁用组件| N file-list-display | Slot | - | 【开发中】用于完全自定义文件列表内容。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N files | Array | - | 已上传文件列表。TS 类型：`Array` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N default-files | Array | undefined | 已上传文件列表。非受控属性。TS 类型：`Array` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N @@ -85,5 +86,8 @@ click | `(file: VideoContext \| ImageContext)` | 点击已选文件时触发； -- | -- | -- --td-upload-add-bg-color | @bg-color-secondarycontainer | - --td-upload-add-color | @font-gray-3 | - +--td-upload-add-disabled-bg-color | @bg-color-component-disabled | - +--td-upload-add-icon-disabled-color | @text-color-disabled | - --td-upload-add-icon-font-size | 56rpx | - +--td-upload-disabled-mask | rgba(255, 255, 255, 0.55) | - --td-upload-radius | @radius-default | - diff --git a/src/upload/__test__/__snapshots__/demo.test.js.snap b/src/upload/__test__/__snapshots__/demo.test.js.snap index 50068de49..1b051c464 100644 --- a/src/upload/__test__/__snapshots__/demo.test.js.snap +++ b/src/upload/__test__/__snapshots__/demo.test.js.snap @@ -11,6 +11,7 @@ exports[`Upload Upload messageFile demo works fine 1`] = ` "count": 1, } }}" + disabled="{{true}}" files="{{ Array [ Object { @@ -47,6 +48,7 @@ exports[`Upload Upload multiple demo works fine 1`] = ` class="wrapper" > Upload 上传 - 用于相册读取或拉起拍照的图片上传功能。 + 用于相册读取或拉起拍照的图片上传功能。（目前示例均为禁用态，使用时请自行取消禁用态，以便正常使用上传动能。） 上传图片 diff --git a/src/upload/props.ts b/src/upload/props.ts index bd51891ea..130794c6c 100644 --- a/src/upload/props.ts +++ b/src/upload/props.ts @@ -19,6 +19,11 @@ const props: TdUploadProps = { config: { type: Object, }, + /** 是否禁用组件 */ + disabled: { + type: Boolean, + value: false, + }, /** 已上传文件列表 */ files: { type: Array, diff --git a/src/upload/type.ts b/src/upload/type.ts index e1780a96b..dae02eee0 100644 --- a/src/upload/type.ts +++ b/src/upload/type.ts @@ -29,6 +29,14 @@ export interface TdUploadProps { type: ObjectConstructor; value?: UploadMpConfig; }; + /** + * 是否禁用组件 + * @default false + */ + disabled?: { + type: BooleanConstructor; + value?: boolean; + }; /** * 自定义组件样式 * @default '' diff --git a/src/upload/upload.less b/src/upload/upload.less index 0e29d84e7..b626b66db 100644 --- a/src/upload/upload.less +++ b/src/upload/upload.less @@ -2,8 +2,11 @@ @upload-add-color: var(--td-upload-add-color, @font-gray-3); @upload-add-bg-color: var(--td-upload-add-bg-color, @bg-color-secondarycontainer); +@upload-add-disabled-bg-color: var(--td-upload-add-disabled-bg-color, @bg-color-component-disabled); @upload-radius: var(--td-upload-radius, @radius-default); @upload-add-icon-font-size: var(--td-upload-add-icon-font-size, 56rpx); +@upload-add-icon-disabled-color: var(--td-upload-add-icon-disabled-color, @text-color-disabled); +@upload-disabled-mask: var(--td-upload-disabled-mask, rgba(255, 255, 255, 0.55)); .@{prefix}-upload { &__grid { @@ -27,6 +30,11 @@ color: @upload-add-color; border-radius: @upload-radius; + &--disabled { + background-color: @upload-add-disabled-bg-color; + color: @upload-add-icon-disabled-color; + } + &:only-child { display: flex; } @@ -43,6 +51,17 @@ position: relative; border-radius: @upload-radius; overflow: hidden; + + &--disabled::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: @upload-disabled-mask; + z-index: 1; + } } &__close-btn { diff --git a/src/upload/upload.ts b/src/upload/upload.ts index 8a34fa3cf..2de89d2ec 100644 --- a/src/upload/upload.ts +++ b/src/upload/upload.ts @@ -168,7 +168,8 @@ export default class Upload extends SuperComponent { }, onAddTap() { - const { mediaType, source } = this.properties; + const { disabled, mediaType, source } = this.properties; + if (disabled) return; if (source === 'media') { this.chooseMedia(mediaType); diff --git a/src/upload/upload.wxml b/src/upload/upload.wxml index ab6714198..34542b1f6 100644 --- a/src/upload/upload.wxml +++ b/src/upload/upload.wxml @@ -13,7 +13,7 @@ aria-role="presentation" > {{addContent}} - + From d6c3fc868dbf020fccc26443ed6734200a301cec Mon Sep 17 00:00:00 2001 From: jarmywang Date: Thu, 14 Dec 2023 10:15:20 +0800 Subject: [PATCH 02/16] Fix/calendar/hidden (#2491) * fix(calendar): can not hide in popup (#2483) * test: update snapshots --- src/calendar/calendar.wxml | 4 +++- src/input/__test__/demo.test.js | 16 +------------- .../__test__/__snapshots__/demo.test.js.snap | 20 ++++++++++++++++++ src/rate/__test__/demo.test.js | 2 +- .../__test__/__snapshots__/demo.test.js.snap | 21 +++++++++++++++++++ src/search/__test__/demo.test.js | 2 +- 6 files changed, 47 insertions(+), 18 deletions(-) diff --git a/src/calendar/calendar.wxml b/src/calendar/calendar.wxml index 135766ada..a752fb468 100644 --- a/src/calendar/calendar.wxml +++ b/src/calendar/calendar.wxml @@ -10,4 +10,6 @@ > - + + + diff --git a/src/input/__test__/demo.test.js b/src/input/__test__/demo.test.js index 603f344e8..cdffa0aab 100644 --- a/src/input/__test__/demo.test.js +++ b/src/input/__test__/demo.test.js @@ -5,21 +5,7 @@ import path from 'path'; import simulate from 'miniprogram-simulate'; -const mapper = [ - 'align', - 'banner', - 'base', - 'bordered', - 'custom', - 'label', - 'layout', - 'maxlength', - 'prefix', - 'size', - 'special', - 'status', - 'suffix', -]; +const mapper = ['align', 'banner', 'base', 'bordered', 'custom', 'label', 'layout', 'maxlength', 'prefix', 'size', 'special', 'status', 'suffix']; describe('Input', () => { mapper.forEach((demoName) => { diff --git a/src/rate/__test__/__snapshots__/demo.test.js.snap b/src/rate/__test__/__snapshots__/demo.test.js.snap index 20713c7bf..0508127be 100644 --- a/src/rate/__test__/__snapshots__/demo.test.js.snap +++ b/src/rate/__test__/__snapshots__/demo.test.js.snap @@ -134,6 +134,26 @@ exports[`Rate Rate custom demo works fine 1`] = ` `; +exports[`Rate Rate custom-prefix demo works fine 1`] = ` + + + + 第三方图标 + + + + +`; + exports[`Rate Rate show-text demo works fine 1`] = ` { mapper.forEach((demoName) => { diff --git a/src/search/__test__/__snapshots__/demo.test.js.snap b/src/search/__test__/__snapshots__/demo.test.js.snap index 01b84450c..0c1a7062c 100644 --- a/src/search/__test__/__snapshots__/demo.test.js.snap +++ b/src/search/__test__/__snapshots__/demo.test.js.snap @@ -32,6 +32,27 @@ exports[`Search Search base demo works fine 1`] = ` `; +exports[`Search Search maxlength demo works fine 1`] = ` + + + + + + + + +`; + exports[`Search Search other demo works fine 1`] = ` { mapper.forEach((demoName) => { From a50b3d4848321b95c76f4e7062027913399cc938 Mon Sep 17 00:00:00 2001 From: betavs <34408516+betavs@users.noreply.github.com> Date: Thu, 14 Dec 2023 11:35:51 +0800 Subject: [PATCH 03/16] perf(step-item): listen for change in status to update the curStatus (#2480) --- src/step-item/step-item.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/step-item/step-item.ts b/src/step-item/step-item.ts index eac4815b9..aef15e05d 100644 --- a/src/step-item/step-item.ts +++ b/src/step-item/step-item.ts @@ -37,6 +37,16 @@ export default class StepItem extends SuperComponent { sequence: 'positive', }; + observers = { + status(value) { + const { curStatus } = this.data; + + if (curStatus === '' || value === curStatus) return; + + this.setData({ curStatus: value }); + }, + }; + methods = { updateStatus({ current, currentStatus, index, theme, layout, items, sequence }) { let curStatus = this.data.status; From 520139f352141df57b8ac0e2a398b155b328d107 Mon Sep 17 00:00:00 2001 From: betavs <34408516+betavs@users.noreply.github.com> Date: Thu, 14 Dec 2023 12:26:01 +0800 Subject: [PATCH 04/16] feat(notice-bar): enable event change (#2492) * feat(notice-bar): enable event change * docs(notice-bar): enable event change * perf(notice-bar): enable event change --- src/notice-bar/README.en-US.md | 1 + src/notice-bar/README.md | 1 + src/notice-bar/notice-bar.ts | 5 +++++ src/notice-bar/notice-bar.wxml | 1 + 4 files changed, 8 insertions(+) diff --git a/src/notice-bar/README.en-US.md b/src/notice-bar/README.en-US.md index ef2cd4e29..9abafcde9 100644 --- a/src/notice-bar/README.en-US.md +++ b/src/notice-bar/README.en-US.md @@ -22,6 +22,7 @@ default-visible | Boolean | false | uncontrolled property | N name | params | description -- | -- | -- click | `(trigger: NoticeBarTrigger)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts)。
`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`
+change | `(current: number, source: '' \| 'autoplay' \| 'touch')` | `direction="vertical"` ### CSS Variables diff --git a/src/notice-bar/README.md b/src/notice-bar/README.md index 7fd32bb1e..ba67cd725 100644 --- a/src/notice-bar/README.md +++ b/src/notice-bar/README.md @@ -86,6 +86,7 @@ default-visible | Boolean | false | 显示/隐藏。非受控属性 | N 名称 | 参数 | 描述 -- | -- | -- click | `(trigger: NoticeBarTrigger)` | 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts)。
`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`
+change | `(current: number, source: '' \| 'autoplay' \| 'touch')` | 当 `direction="vertical"` 时轮播切换时触发 ### NoticeBar 外部样式类 类名 | 说明 diff --git a/src/notice-bar/notice-bar.ts b/src/notice-bar/notice-bar.ts index d4bdee079..ff68277e5 100644 --- a/src/notice-bar/notice-bar.ts +++ b/src/notice-bar/notice-bar.ts @@ -182,6 +182,11 @@ export default class NoticeBar extends SuperComponent { }); }, + onChange(e: WechatMiniprogram.SwiperChange) { + const { current, source } = e.detail; + this.triggerEvent('change', { current, source }); + }, + clickPrefixIcon() { this.triggerEvent('click', { trigger: 'prefix-icon' }); }, diff --git a/src/notice-bar/notice-bar.wxml b/src/notice-bar/notice-bar.wxml index 1f4140b97..7bed99aa7 100644 --- a/src/notice-bar/notice-bar.wxml +++ b/src/notice-bar/notice-bar.wxml @@ -27,6 +27,7 @@ interval="{{interval}}" display-multiple-items="1" class="{{classPrefix}}__content--vertical" + bindchange="onChange" > From 7523806b68c774a7a2f5c4ff374b3ebb7464ab1b Mon Sep 17 00:00:00 2001 From: Y Date: Fri, 15 Dec 2023 16:01:49 +0800 Subject: [PATCH 05/16] fix(Icon): update demo (#2498) * fix(Icon): update demo * fix(home): add footer desc for home page --- example/pages/home/home.wxml | 1 + src/icon/_example/base/index.js | 8 ++------ src/icon/_example/custom/index.js | 8 ++------ src/icon/_example/iconImage/index.js | 8 ++------ 4 files changed, 7 insertions(+), 18 deletions(-) diff --git a/example/pages/home/home.wxml b/example/pages/home/home.wxml index 7444ec985..ae6a607ca 100644 --- a/example/pages/home/home.wxml +++ b/example/pages/home/home.wxml @@ -14,6 +14,7 @@ 《TDesign组件库服务声明》 + diff --git a/src/icon/_example/base/index.js b/src/icon/_example/base/index.js index acb8f971f..8c86ab29c 100644 --- a/src/icon/_example/base/index.js +++ b/src/icon/_example/base/index.js @@ -8,12 +8,8 @@ Component({ methods: { onIconTap(event) { const { name, type } = event.currentTarget.dataset; - if (type === 'prefix') { - return; - } - wx.setClipboardData({ - data: name, - }); + if (type === 'prefix') return; + wx.showToast({ title: name, icon: 'none', duration: 1000 }); }, }, }); diff --git a/src/icon/_example/custom/index.js b/src/icon/_example/custom/index.js index 562bf2f37..ae88efa66 100644 --- a/src/icon/_example/custom/index.js +++ b/src/icon/_example/custom/index.js @@ -5,12 +5,8 @@ Component({ methods: { onIconTap(event) { const { name, type } = event.currentTarget.dataset; - if (type === 'prefix') { - return; - } - wx.setClipboardData({ - data: name, - }); + if (type === 'prefix') return; + wx.showToast({ title: name, icon: 'none', duration: 1000 }); }, }, }); diff --git a/src/icon/_example/iconImage/index.js b/src/icon/_example/iconImage/index.js index 3ea373a37..2eb8e2913 100644 --- a/src/icon/_example/iconImage/index.js +++ b/src/icon/_example/iconImage/index.js @@ -9,12 +9,8 @@ Component({ methods: { onIconTap(event) { const { name, type } = event.currentTarget.dataset; - if (type === 'prefix') { - return; - } - wx.setClipboardData({ - data: name, - }); + if (type === 'prefix') return; + wx.showToast({ title: name, icon: 'none', duration: 1000 }); }, }, }); From 9cdae57f08b27211d048c602ff3ff443cc70a52b Mon Sep 17 00:00:00 2001 From: betavs <34408516+betavs@users.noreply.github.com> Date: Mon, 18 Dec 2023 22:18:04 +0800 Subject: [PATCH 06/16] chore: update vscode settings (#2494) --- .vscode/settings.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 67c12b659..61795530e 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,8 +2,8 @@ "editor.formatOnSave": true, "eslint.enable": true, "editor.codeActionsOnSave": { - "source.fixAll.tslint": true, - "source.fixAll.eslint": true + "source.fixAll.tslint": "explicit", + "source.fixAll.eslint": "explicit" }, "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { @@ -15,6 +15,7 @@ }, "minapp-vscode.reserveTags": ["text"], "files.associations": { + "*.wxml": "html", "*.wxss": "css", "*.wxs": "javascript" }, From 7f9346c9e264c5ac8ccc94d2cfd17ec98f5c3a9b Mon Sep 17 00:00:00 2001 From: betavs <34408516+betavs@users.noreply.github.com> Date: Tue, 19 Dec 2023 10:32:20 +0800 Subject: [PATCH 07/16] fix(notice-bar): resolve console error (#2470) * fix(notice-bar): resolve console error * fix(notice-bar): cannot retrieve the 't-notice-bar__content' node --- src/input/__test__/demo.test.js | 16 ++++++++++- src/notice-bar/notice-bar.less | 1 + src/notice-bar/notice-bar.ts | 48 +++++++++++++++++---------------- src/notice-bar/notice-bar.wxml | 2 +- src/rate/__test__/demo.test.js | 13 ++++++++- 5 files changed, 54 insertions(+), 26 deletions(-) diff --git a/src/input/__test__/demo.test.js b/src/input/__test__/demo.test.js index cdffa0aab..603f344e8 100644 --- a/src/input/__test__/demo.test.js +++ b/src/input/__test__/demo.test.js @@ -5,7 +5,21 @@ import path from 'path'; import simulate from 'miniprogram-simulate'; -const mapper = ['align', 'banner', 'base', 'bordered', 'custom', 'label', 'layout', 'maxlength', 'prefix', 'size', 'special', 'status', 'suffix']; +const mapper = [ + 'align', + 'banner', + 'base', + 'bordered', + 'custom', + 'label', + 'layout', + 'maxlength', + 'prefix', + 'size', + 'special', + 'status', + 'suffix', +]; describe('Input', () => { mapper.forEach((demoName) => { diff --git a/src/notice-bar/notice-bar.less b/src/notice-bar/notice-bar.less index 271f9367b..c1b2b52c7 100644 --- a/src/notice-bar/notice-bar.less +++ b/src/notice-bar/notice-bar.less @@ -43,6 +43,7 @@ } &__content--vertical { + display: block; height: @notice-bar-line-height; line-height: @notice-bar-line-height; diff --git a/src/notice-bar/notice-bar.ts b/src/notice-bar/notice-bar.ts index ff68277e5..de69cedc3 100644 --- a/src/notice-bar/notice-bar.ts +++ b/src/notice-bar/notice-bar.ts @@ -97,29 +97,31 @@ export default class NoticeBar extends SuperComponent { const warpID = `.${name}__content-wrap`; const nodeID = `.${name}__content`; getAnimationFrame(this, () => { - Promise.all([getRect(this, nodeID), getRect(this, warpID)]).then(([nodeRect, wrapRect]) => { - const { marquee } = this.properties; - - if (nodeRect == null || wrapRect == null || !nodeRect.width || !wrapRect.width) { - return; - } - - if (marquee || wrapRect.width < nodeRect.width) { - const speeding = marquee.speed || 50; - const delaying = marquee.delay || 0; - const animationDuration = ((wrapRect.width + nodeRect.width) / speeding) * 1000; - const firstAnimationDuration = (nodeRect.width / speeding) * 1000; - this.setData({ - wrapWidth: Number(wrapRect.width), - nodeWidth: Number(nodeRect.width), - animationDuration: animationDuration, - delay: delaying, - loop: marquee.loop - 1, - firstAnimationDuration: firstAnimationDuration, - }); - marquee.loop !== 0 && this.startScrollAnimation(true); - } - }); + Promise.all([getRect(this, nodeID), getRect(this, warpID)]) + .then(([nodeRect, wrapRect]) => { + const { marquee } = this.properties; + + if (nodeRect == null || wrapRect == null || !nodeRect.width || !wrapRect.width) { + return; + } + + if (marquee || wrapRect.width < nodeRect.width) { + const speeding = marquee.speed || 50; + const delaying = marquee.delay || 0; + const animationDuration = ((wrapRect.width + nodeRect.width) / speeding) * 1000; + const firstAnimationDuration = (nodeRect.width / speeding) * 1000; + this.setData({ + wrapWidth: Number(wrapRect.width), + nodeWidth: Number(nodeRect.width), + animationDuration: animationDuration, + delay: delaying, + loop: marquee.loop - 1, + firstAnimationDuration: firstAnimationDuration, + }); + marquee.loop !== 0 && this.startScrollAnimation(true); + } + }) + .catch(() => {}); }); }, diff --git a/src/notice-bar/notice-bar.wxml b/src/notice-bar/notice-bar.wxml index 7bed99aa7..d61f322cc 100644 --- a/src/notice-bar/notice-bar.wxml +++ b/src/notice-bar/notice-bar.wxml @@ -26,7 +26,7 @@ circular="true" interval="{{interval}}" display-multiple-items="1" - class="{{classPrefix}}__content--vertical" + class="{{classPrefix}}__content {{classPrefix}}__content--vertical" bindchange="onChange" > diff --git a/src/rate/__test__/demo.test.js b/src/rate/__test__/demo.test.js index fe7849981..4d10e7c23 100644 --- a/src/rate/__test__/demo.test.js +++ b/src/rate/__test__/demo.test.js @@ -5,7 +5,18 @@ import path from 'path'; import simulate from 'miniprogram-simulate'; -const mapper = ['action', 'base', 'color', 'count', 'custom', 'custom-prefix', 'show-text', 'size', 'special', 'un-filled']; +const mapper = [ + 'action', + 'base', + 'color', + 'count', + 'custom', + 'custom-prefix', + 'show-text', + 'size', + 'special', + 'un-filled', +]; describe('Rate', () => { mapper.forEach((demoName) => { From de3c6c03427e3a3d22a3ebdf7285a4cebd605d44 Mon Sep 17 00:00:00 2001 From: Echo <252545095@qq.com> Date: Wed, 20 Dec 2023 16:28:30 +0800 Subject: [PATCH 08/16] =?UTF-8?q?fix(Input):=20=E8=A7=A3=E5=86=B3=20type?= =?UTF-8?q?=20=E4=B8=BA=20digit=E3=80=81number=E6=97=B6=EF=BC=8Cmaxlength?= =?UTF-8?q?=20=E5=92=8C=20maxcharacter=20=E5=B1=9E=E6=80=A7=E6=97=A0?= =?UTF-8?q?=E6=95=88=E7=9A=84=E9=97=AE=E9=A2=98=20(#2497)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(inputMaxCount): 解决设置最大长度时类型为number、digit不生效问题 * fix(input): 解决type为number时初始值为0不生效的情况 * refactor(input): 优化是否值存在判断 * fix(input): 纠正值不存在判断 * refactor(utils): 去掉isOfType * fix: 去掉无用注释 * fix: 完善ts * fix: 完善条件 * refactor: 值定义工具函数纠正 * perf(utils): optimize the getCharacterLength function --------- Co-authored-by: yiqiuzheng Co-authored-by: betavs --- src/common/utils.ts | 22 +++++++++++++++------- src/input/input.ts | 14 ++++++-------- 2 files changed, 21 insertions(+), 15 deletions(-) diff --git a/src/common/utils.ts b/src/common/utils.ts index a6c2f50f4..1aee6c9fc 100644 --- a/src/common/utils.ts +++ b/src/common/utils.ts @@ -110,14 +110,20 @@ export const getRect = function (context: any, selector: string, needAll: boolea }); }; -const isDef = function (value: any): boolean { - return value !== undefined && value !== null; -}; - export const isNumber = function (value) { return /^\d+(\.\d+)?$/.test(value); }; +export const isNull = function (value: any): boolean { + return value === null; +}; + +export const isUndefined = (value: any): boolean => typeof value === 'undefined'; + +export const isDef = function (value: any): boolean { + return !isUndefined(value) && !isNull(value); +}; + export const addUnit = function (value?: string | number): string | undefined { if (!isDef(value)) { return undefined; @@ -128,12 +134,14 @@ export const addUnit = function (value?: string | number): string | undefined { /** * 计算字符串字符的长度并可以截取字符串。 - * @param str 传入字符串（maxcharacter条件下，一个汉字表示两个字符） + * @param char 传入字符串（maxcharacter条件下，一个汉字表示两个字符） * @param max 规定最大字符串长度 * @returns 当没有传入maxCharacter/maxLength 时返回字符串字符长度，当传入maxCharacter/maxLength时返回截取之后的字符串和长度。 */ -export const getCharacterLength = (type: string, str: string, max?: number) => { - if (!str || str.length === 0) { +export const getCharacterLength = (type: string, char: string | number, max?: number) => { + const str = String(char ?? ''); + + if (str.length === 0) { return { length: 0, characters: '', diff --git a/src/input/input.ts b/src/input/input.ts index 2ea57488e..27ca5222e 100644 --- a/src/input/input.ts +++ b/src/input/input.ts @@ -1,7 +1,7 @@ import { SuperComponent, wxComponent } from '../common/src/index'; import config from '../common/config'; import props from './props'; -import { getCharacterLength, calcIcon } from '../common/utils'; +import { getCharacterLength, calcIcon, isDef } from '../common/utils'; const { prefix } = config; const name = `${prefix}-input`; @@ -31,14 +31,13 @@ export default class Input extends SuperComponent { prefix, classPrefix: name, classBasePrefix: prefix, - excludeType: ['number', 'digit'], showClearIcon: true, }; lifetimes = { ready() { const { value } = this.properties; - this.updateValue(value == null ? '' : value); + this.updateValue(value ?? ''); }, }; @@ -68,15 +67,14 @@ export default class Input extends SuperComponent { methods = { updateValue(value) { - const { maxcharacter, maxlength, type } = this.properties; - const { excludeType } = this.data; - if (!excludeType.includes(type) && maxcharacter && maxcharacter > 0 && !Number.isNaN(maxcharacter)) { + const { maxcharacter, maxlength } = this.properties; + if (maxcharacter && maxcharacter > 0 && !Number.isNaN(maxcharacter)) { const { length, characters } = getCharacterLength('maxcharacter', value, maxcharacter); this.setData({ value: characters, count: length, }); - } else if (!excludeType.includes(type) && maxlength > 0 && !Number.isNaN(maxlength)) { + } else if (maxlength && maxlength > 0 && !Number.isNaN(maxlength)) { const { length, characters } = getCharacterLength('maxlength', value, maxlength); this.setData({ value: characters, @@ -85,7 +83,7 @@ export default class Input extends SuperComponent { } else { this.setData({ value, - count: value ? String(value).length : 0, + count: isDef(value) ? String(value).length : 0, }); } }, From 15ec57730e4ddef333f0a6d8cce989617dd798b5 Mon Sep 17 00:00:00 2001 From: betavs <34408516+betavs@users.noreply.github.com> Date: Wed, 20 Dec 2023 20:59:24 +0800 Subject: [PATCH 09/16] docs(textarea): update default value (#2507) --- src/textarea/README.en-US.md | 4 ++-- src/textarea/README.md | 4 ++-- src/textarea/type.ts | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/textarea/README.en-US.md b/src/textarea/README.en-US.md index f17589a26..3b746f05c 100644 --- a/src/textarea/README.en-US.md +++ b/src/textarea/README.en-US.md @@ -19,8 +19,8 @@ label | String / Slot | - | \- | N maxcharacter | Number | - | \- | N maxlength | Number | - | \- | N placeholder | String | undefined | \- | N -value | String | - | \- | N -default-value | String | undefined | uncontrolled property | N +value | String | null | \- | N +default-value | String | '' | uncontrolled property | N ### Textarea Events diff --git a/src/textarea/README.md b/src/textarea/README.md index 0e00bf738..a5073df7b 100644 --- a/src/textarea/README.md +++ b/src/textarea/README.md @@ -77,8 +77,8 @@ maxlength | Number | -1 | 用户最多可以输入的字符个数。默认为 -1 indicator | Boolean | false | 显示文本计数器，如 0/140。当 `maxlength < 0 && maxcharacter < 0` 成立时， indicator无效 | N placeholder | String | undefined | 占位符 | N placeholderStyle | String | '' | 指定 placeholder 的样式，目前仅支持 color ,font-size和font-weight | N -value | String | - | 文本框值 | N -default-value | String | undefined | 文本框值。非受控属性 | N +value | String | null | 文本框值 | N +default-value | String | '' | 文本框值。非受控属性 | N fixed | Boolean | false | 如果 textarea 是在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true | N bordered | Boolean | false | 是否显示外边框 | N cursor | Number | -1 | 指定 focus 时的光标位置 | N diff --git a/src/textarea/type.ts b/src/textarea/type.ts index 4e2c6457d..4489359d0 100644 --- a/src/textarea/type.ts +++ b/src/textarea/type.ts @@ -130,7 +130,7 @@ export interface TdTextareaProps { }; /** * 文本框值 - * @default '' + * @default null */ value?: { type: StringConstructor; From eecbe1ba64ebd3db0baa2bc4050fd74b95679ecf Mon Sep 17 00:00:00 2001 From: betavs <34408516+betavs@users.noreply.github.com> Date: Thu, 21 Dec 2023 11:02:31 +0800 Subject: [PATCH 10/16] fix(grid-item): resolve the issue of ineffective click when hover is true (#2508) --- src/grid-item/grid-item.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/grid-item/grid-item.less b/src/grid-item/grid-item.less index cdf6d338f..1db41c3aa 100644 --- a/src/grid-item/grid-item.less +++ b/src/grid-item/grid-item.less @@ -29,6 +29,7 @@ // float: left; display: inline-block; vertical-align: top; + background-color: @grid-item-bg-color; &--hover { background-color: @grid-item-hover-bg-color; @@ -48,7 +49,6 @@ overflow: hidden; position: relative; padding: @grid-item-padding 0 24rpx; - background-color: @grid-item-bg-color; &--horizontal { flex-direction: row; From dc127c3d0c2ca8f39cfff1fcb7d50715afc43744 Mon Sep 17 00:00:00 2001 From: hkaikai <617760820@qq.com> Date: Thu, 21 Dec 2023 11:11:10 +0800 Subject: [PATCH 11/16] =?UTF-8?q?feat(fab):=20=E6=82=AC=E6=B5=AE=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E6=94=AF=E6=8C=81=E6=8B=96=E6=8B=BD=20(#2478)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(fab): 悬浮按钮支持拖拽 #2374 * style(fab): 移动实现逻辑改成touch,兼容webview和skyline框架 * fix(fab): 水平移动或垂直移动异常修复 * style(fab): 代码优化 * docs(fab): 文档更新 --- src/fab/README.en-US.md | 1 + src/fab/README.md | 1 + src/fab/_example/draggable/index.js | 10 +++++ src/fab/_example/draggable/index.json | 6 +++ src/fab/_example/draggable/index.wxml | 8 ++++ src/fab/_example/draggable/index.wxss | 0 src/fab/_example/fab.json | 3 +- src/fab/_example/fab.wxml | 10 ++++- src/fab/draggable/draggable.json | 4 ++ src/fab/draggable/draggable.less | 5 +++ src/fab/draggable/draggable.ts | 64 +++++++++++++++++++++++++++ src/fab/draggable/draggable.wxml | 11 +++++ src/fab/draggable/index.ts | 3 ++ src/fab/draggable/props.ts | 11 +++++ src/fab/draggable/type.ts | 10 +++++ src/fab/fab.json | 3 +- src/fab/fab.less | 4 ++ src/fab/fab.ts | 49 +++++++++++++++----- src/fab/fab.wxml | 17 +++---- src/fab/props.ts | 6 +++ src/fab/template/draggable.wxml | 14 ++++++ src/fab/template/view.wxml | 11 +++++ src/fab/type.ts | 9 ++++ 23 files changed, 234 insertions(+), 26 deletions(-) create mode 100644 src/fab/_example/draggable/index.js create mode 100644 src/fab/_example/draggable/index.json create mode 100644 src/fab/_example/draggable/index.wxml create mode 100644 src/fab/_example/draggable/index.wxss create mode 100644 src/fab/draggable/draggable.json create mode 100644 src/fab/draggable/draggable.less create mode 100644 src/fab/draggable/draggable.ts create mode 100644 src/fab/draggable/draggable.wxml create mode 100644 src/fab/draggable/index.ts create mode 100644 src/fab/draggable/props.ts create mode 100644 src/fab/draggable/type.ts create mode 100644 src/fab/template/draggable.wxml create mode 100644 src/fab/template/view.wxml diff --git a/src/fab/README.en-US.md b/src/fab/README.en-US.md index 0b92fb337..1aed7e17f 100644 --- a/src/fab/README.en-US.md +++ b/src/fab/README.en-US.md @@ -9,6 +9,7 @@ button-props | Object | - | \- | N icon | String | - | \- | N style | String | right: 16px; bottom: 32px; | \- | N text | String | - | \- | N +draggable | Boolean / String | false | \- | N ### Fab Events diff --git a/src/fab/README.md b/src/fab/README.md index 571bc2ac2..0f92c4ba5 100644 --- a/src/fab/README.md +++ b/src/fab/README.md @@ -44,6 +44,7 @@ button-props | Object | - | 透传至 Button 组件 | N icon | String | - | 图标 | N style | String | right: 16px; bottom: 32px; | 悬浮按钮的样式，常用于调整位置（即将废弃，建议使用 `style`） | N text | String | - | 文本内容 | N +draggable | Boolean / String | false | `true` / `'all'`可拖动
`'vertical'`可垂直拖动
`'horizontal'`可水平拖动
`false`禁止拖动 | N ### Fab Events diff --git a/src/fab/_example/draggable/index.js b/src/fab/_example/draggable/index.js new file mode 100644 index 000000000..7a4e7a590 --- /dev/null +++ b/src/fab/_example/draggable/index.js @@ -0,0 +1,10 @@ +Component({ + methods: { + handleClick(e) { + console.log(e); + }, + handleMove(e) { + console.log(e); + }, + }, +}); diff --git a/src/fab/_example/draggable/index.json b/src/fab/_example/draggable/index.json new file mode 100644 index 000000000..76f1d491e --- /dev/null +++ b/src/fab/_example/draggable/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "t-fab": "tdesign-miniprogram/fab/fab" + } +} diff --git a/src/fab/_example/draggable/index.wxml b/src/fab/_example/draggable/index.wxml new file mode 100644 index 000000000..e33c47c04 --- /dev/null +++ b/src/fab/_example/draggable/index.wxml @@ -0,0 +1,8 @@ + diff --git a/src/fab/_example/draggable/index.wxss b/src/fab/_example/draggable/index.wxss new file mode 100644 index 000000000..e69de29bb diff --git a/src/fab/_example/fab.json b/src/fab/_example/fab.json index 78d58bb27..29e776f6c 100644 --- a/src/fab/_example/fab.json +++ b/src/fab/_example/fab.json @@ -4,6 +4,7 @@ "usingComponents": { "t-button": "tdesign-miniprogram/button/button", "base": "./base", - "advance": "./advance" + "advance": "./advance", + "draggable": "./draggable" } } diff --git a/src/fab/_example/fab.wxml b/src/fab/_example/fab.wxml index 2160f5609..6b3e5afa1 100644 --- a/src/fab/_example/fab.wxml +++ b/src/fab/_example/fab.wxml @@ -14,6 +14,14 @@ + + + + 可移动悬浮按钮 + + + - + + diff --git a/src/fab/draggable/draggable.json b/src/fab/draggable/draggable.json new file mode 100644 index 000000000..a89ef4dbe --- /dev/null +++ b/src/fab/draggable/draggable.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} diff --git a/src/fab/draggable/draggable.less b/src/fab/draggable/draggable.less new file mode 100644 index 000000000..7ba1580b0 --- /dev/null +++ b/src/fab/draggable/draggable.less @@ -0,0 +1,5 @@ +@import '../../common/style/index.less'; + +.@{prefix}-draggable { + position: absolute; +} diff --git a/src/fab/draggable/draggable.ts b/src/fab/draggable/draggable.ts new file mode 100644 index 000000000..6be62e295 --- /dev/null +++ b/src/fab/draggable/draggable.ts @@ -0,0 +1,64 @@ +import { SuperComponent, wxComponent } from '../../common/src/index'; +import config from '../../common/config'; +import props from './props'; +import { getRect } from '../../common/utils'; +import type { TdDraggableProps } from './type'; + +const systemInfo = wx.getSystemInfoSync(); +const { prefix } = config; +const name = `${prefix}-draggable`; + +export interface DraggableProps extends TdDraggableProps {} + +@wxComponent() +export default class Draggable extends SuperComponent { + properties = props; + + externalClasses = [`${prefix}-class`]; + + data = { + prefix, + classPrefix: name, + }; + + lifetimes = { + ready() { + this.computedRect(); + }, + }; + + methods = { + onTouchStart(e) { + if (this.properties.direction === 'none') return; + this.startX = e.touches[0].clientX + systemInfo.windowWidth - this.rect.right; + this.startY = e.touches[0].clientY + systemInfo.windowHeight - this.rect.bottom; + this.triggerEvent('start', { startX: this.startX, startY: this.startY, rect: this.rect, e }); + }, + + onTouchMove(e) { + if (this.properties.direction === 'none') return; + let x = this.startX - e.touches[0].clientX; // x轴移动偏移量 + let y = this.startY - e.touches[0].clientY; // y轴移动偏移量 + + if (this.properties.direction === 'vertical') { + x = systemInfo.windowWidth - this.rect.right; + } + if (this.properties.direction === 'horizontal') { + y = systemInfo.windowHeight - this.rect.bottom; + } + + this.triggerEvent('move', { x, y, rect: this.rect, e }); + }, + + async onTouchEnd(e) { + if (this.properties.direction === 'none') return; + await this.computedRect(); + this.triggerEvent('end', { rect: this.rect, e }); + }, + + async computedRect() { + this.rect = { right: 0, bottom: 0, width: 0, height: 0 }; + this.rect = await getRect(this, `.${this.data.classPrefix}`); + }, + }; +} diff --git a/src/fab/draggable/draggable.wxml b/src/fab/draggable/draggable.wxml new file mode 100644 index 000000000..4d16d1efd --- /dev/null +++ b/src/fab/draggable/draggable.wxml @@ -0,0 +1,11 @@ + + + + + diff --git a/src/fab/draggable/index.ts b/src/fab/draggable/index.ts new file mode 100644 index 000000000..6c4d04d3f --- /dev/null +++ b/src/fab/draggable/index.ts @@ -0,0 +1,3 @@ +export * from './props'; +export * from './type'; +export * from './draggable'; diff --git a/src/fab/draggable/props.ts b/src/fab/draggable/props.ts new file mode 100644 index 000000000..e2e5d8f33 --- /dev/null +++ b/src/fab/draggable/props.ts @@ -0,0 +1,11 @@ +import { TdDraggableProps } from './type'; + +const props: TdDraggableProps = { + /** 移动方向 */ + direction: { + type: String, + value: 'all', + }, +}; + +export default props; diff --git a/src/fab/draggable/type.ts b/src/fab/draggable/type.ts new file mode 100644 index 000000000..875b94898 --- /dev/null +++ b/src/fab/draggable/type.ts @@ -0,0 +1,10 @@ +export interface TdDraggableProps { + /** + * 移动方向 + * @default 'all' + */ + direction?: { + type: StringConstructor; + value?: 'all' | 'vertical' | 'horizontal' | 'none'; + }; +} diff --git a/src/fab/fab.json b/src/fab/fab.json index e73f3adaa..7025f7d71 100644 --- a/src/fab/fab.json +++ b/src/fab/fab.json @@ -1,6 +1,7 @@ { "component": true, "usingComponents": { - "t-button": "../button/button" + "t-button": "../button/button", + "t-draggable": "./draggable/draggable" } } diff --git a/src/fab/fab.less b/src/fab/fab.less index 76ded1638..f88380a8f 100644 --- a/src/fab/fab.less +++ b/src/fab/fab.less @@ -8,4 +8,8 @@ &__button { box-shadow: @fab-shadow; } + + &__draggable { + position: fixed; + } } diff --git a/src/fab/fab.ts b/src/fab/fab.ts index 8c6c1942e..5cd07d322 100644 --- a/src/fab/fab.ts +++ b/src/fab/fab.ts @@ -2,8 +2,15 @@ import { SuperComponent, wxComponent } from '../common/src/index'; import config from '../common/config'; import props from './props'; +const systemInfo = wx.getSystemInfoSync(); const { prefix } = config; const name = `${prefix}-fab`; +const baseButtonProps = { + size: 'large', + shape: 'circle', + theme: 'primary', + externalClass: `${prefix}-fab__button`, +}; @wxComponent() export default class Fab extends SuperComponent { @@ -14,22 +21,25 @@ export default class Fab extends SuperComponent { data = { prefix, classPrefix: name, - baseButtonProps: { - size: 'large', - shape: 'circle', - theme: 'primary', - }, + buttonData: baseButtonProps, + moveStyle: null, }; observers = { - text(val) { - if (val) { - this.setData({ - baseButtonProps: { - shape: 'round', + 'buttonProps.**, icon, text, ariaLabel'() { + this.setData( + { + buttonData: { + ...baseButtonProps, + shape: this.properties.text ? 'round' : 'circle', + icon: this.properties.icon, + ...this.properties.buttonProps, + content: this.properties.text, + ariaLabel: this.properties.ariaLabel, }, - }); - } + }, + this.computedSize, + ); }, }; @@ -37,5 +47,20 @@ export default class Fab extends SuperComponent { onTplButtonTap(e) { this.triggerEvent('click', e); }, + onMove(e) { + const { x, y, rect } = e.detail; + const maxX = systemInfo.windowWidth - rect.width; // 父容器宽度 - 拖动元素宽度 + const maxY = systemInfo.windowHeight - rect.height; // 父容器高度 - 拖动元素高度 + const right = Math.max(0, Math.min(x, maxX)); + const bottom = Math.max(0, Math.min(y, maxY)); + this.setData({ + moveStyle: `right: ${right}px; bottom: ${bottom}px;`, + }); + }, + computedSize() { + if (!this.properties.draggable) return; + const insChild = this.selectComponent('#draggable'); + insChild.computedRect(); // button更新时，重新获取其尺寸 + }, }; } diff --git a/src/fab/fab.wxml b/src/fab/fab.wxml index 1bca71c82..231fc4e59 100644 --- a/src/fab/fab.wxml +++ b/src/fab/fab.wxml @@ -1,12 +1,7 @@ - - + + - -