From 2b3413fcad8ff8d87ca6bffbc40ac05a263f2d80 Mon Sep 17 00:00:00 2001 From: leejimqiu Date: Thu, 6 Jan 2022 17:36:50 +0800 Subject: [PATCH 1/2] fix(button): support content & change classname about size --- src/button/README.md | 55 +++++++++++++++++++++--------------------- src/button/button.less | 2 +- src/button/button.ts | 2 +- src/button/button.wxml | 2 ++ src/button/props.ts | 5 ++++ src/button/type.ts | 8 ++++++ 6 files changed, 45 insertions(+), 29 deletions(-) diff --git a/src/button/README.md b/src/button/README.md index 044d8d973..b9fc3ddfc 100644 --- a/src/button/README.md +++ b/src/button/README.md @@ -76,32 +76,33 @@ isComponent: true ### Button Props | 名称 | 类型 | 默认值 | 说明 | 必传 | -| ---------------------- | ----------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- | -| block | Boolean | false | 是否为块级元素 | N | -| disabled | Boolean | false | 是否禁用按钮 | N | -| external-classes | Array | - | 组件类名。`['t-class', 't-class-icon']` | N | -| ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N | -| icon | String | - | 图标名称 | N | -| loading | Boolean | false | 是否显示为加载状态 | N | -| shape | String | square | 按钮形状，有二种：方形、圆角方形。可选项：square/round | N | -| size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum` | N | -| theme | String | undefined | 组件风格，依次为品牌色、危险色。可选项：default/primary/danger | N | -| type | String | - | 同小程序的 formType。可选项：submit/reset | N | -| variant | String | base | 按钮形式，基础、线框、文字。可选项：base/outline/text | N | +| -- | -- | -- | -- | -- | +| block | Boolean | false | 是否为块级元素| N | +| content | String/Slot | '' | 按钮内容 | N ｜ +| disabled | Boolean | false | 是否禁用按钮| N | +| external-classes | Array | - | 组件类名。`['t-class', 't-class-icon']`| N | +| ghost | Boolean | false | 是否为幽灵按钮（镂空按钮）| N | +| icon | String | - | 图标名称| N | +| loading | Boolean | false | 是否显示为加载状态| N | +| shape | String | square | 按钮形状，有二种：方形、圆角方形。可选项：square/round| N | +| size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`| N | +| theme | String | undefined | 组件风格，依次为品牌色、危险色。可选项：default/primary/danger| N | +| type | String | - | 同小程序的 formType。可选项：submit/reset| N | +| variant | String | base | 按钮形式，基础、线框、文字。可选项：base/outline/text| N | | open-type | String | - | 微信开放能力 [查看小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。可选项：contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback | N | -| hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | N | -| hover-start-time | Number | 20 | 按住后多久出现点击态，单位毫秒 | N | -| hover-stay-time | Number | 70 | 手指松开后点击态保留时间，单位毫秒 | N | +| hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态| N | +| hover-start-time | Number | 20 | 按住后多久出现点击态，单位毫秒| N | +| hover-stay-time | Number | 70 | 手指松开后点击态保留时间，单位毫秒| N | | lang | String | en | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 [查看小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。可选项：en/zh_CN/zh_TW | N | -| session-from | String | - | 会话来源，open-type=contact 时有效 | N | -| send-message-title | String | 当前标题 | 会话内消息卡片标题，open-type=contact 时有效 | N | -| send-message-path | String | 当前分享路径 | 会话内消息卡片点击跳转小程序路径，open-type=contact 时有效 | N | -| send-message-img | String | 截图 | 会话内消息卡片图片，open-type=contact 时有效 | N | -| app-parameter | String | - | 打开 APP 时，向 APP 传递的参数，open-type=launchApp 时有效 | N | -| show-message-card | Boolean | false | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示可能要发送的小程序提示，用户点击后可以快速发送小程序消息，open-type=contact 时有效 | N | -| bindgetuserinfo | Eventhandle | - | 用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与wx.getUserInfo返回的一致，open-type=getUserInfo 时有效 | N | -| bindcontact | Eventhandle | - | 客服消息回调，open-type=contact 时有效 | N | -| bindgetphonenumber | Eventhandle | - | 获取用户手机号回调，open-type=getPhoneNumber 时有效 | N | -| binderror | Eventhandle | - | 当使用开放能力时，发生错误的回调，open-type=launchApp 时有效 | N | -| bindopensetting | Eventhandle | - | 在打开授权设置页后回调，open-type=openSetting 时有效 | N | -| bindlaunchapp | Eventhandle | - | 打开 APP 成功的回调，open-type=launchApp 时有效 | N | +| session-from | String | - | 会话来源，open-type=contact 时有效 | N | +| send-message-title | String | 当前标题 | 会话内消息卡片标题，open-type=contact 时有效 | N | +| send-message-path | String | 当前分享路径 | 会话内消息卡片点击跳转小程序路径，open-type=contact 时有效 | N | +| send-message-img | String | 截图 | 会话内消息卡片图片，open-type=contact 时有效 | N | +| app-parameter | String | - | 打开 APP 时，向 APP 传递的参数，open-type=launchApp 时有效 | N | +| show-message-card | Boolean | false | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示可能要发送的小程序提示，用户点击后可以快速发送小程序消息，open-type=contact 时有效 | N | +| bindgetuserinfo | Eventhandle | - | 用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与wx.getUserInfo返回的一致，open-type=getUserInfo 时有效 | N | +| bindcontact | Eventhandle | - | 客服消息回调，open-type=contact | N | +| bindgetphonenumber | Eventhandle | - | 获取用户手机号回调，open-type=getPhoneNumber 时有效 | N | +| binderror | Eventhandle | - | 当使用开放能力时，发生错误的回调，open-type=launchApp 时有效 | N | +| bindopensetting | Eventhandle | - | 在打开授权设置页后回调，open-type=openSetting 时有效 | N | +| bindlaunchapp | Eventhandle | - | 打开 APP 成功的回调，open-type=launchApp 时有效 | N | diff --git a/src/button/button.less b/src/button/button.less index 426a7aacb..afe572d7a 100644 --- a/src/button/button.less +++ b/src/button/button.less @@ -154,7 +154,7 @@ } } - &.@{prefix}-size { + &--size { &-l { display: flex; margin: 0 32rpx; diff --git a/src/button/button.ts b/src/button/button.ts index f7c6409eb..7b18464a4 100644 --- a/src/button/button.ts +++ b/src/button/button.ts @@ -51,7 +51,7 @@ export default class Button extends SuperComponent { name, `${prefix}-class`, `${name}--${this.data.theme || 'default'}`, - `${prefix}-size-${this.data.size.slice(0, 1)}`, + `${name}--size-${this.data.size.slice(0, 1)}`, ]; classList.push(`${name}--${this.data.shape}`); diff --git a/src/button/button.wxml b/src/button/button.wxml index 5d4bc519a..9ea08c0ea 100644 --- a/src/button/button.wxml +++ b/src/button/button.wxml @@ -27,4 +27,6 @@ class="{{classPrefix}}__icon {{prefix}}-class-icon" > + + {{content || ''}} diff --git a/src/button/props.ts b/src/button/props.ts index 9959a17e9..29a183f13 100644 --- a/src/button/props.ts +++ b/src/button/props.ts @@ -12,6 +12,11 @@ const props: TdButtonProps = { type: Boolean, value: false, }, + /** 按钮内容 */ + content: { + type: String, + value: '', + }, /** 是否禁用按钮 */ disabled: { type: Boolean, diff --git a/src/button/type.ts b/src/button/type.ts index 8ea9f5d74..9a6621153 100644 --- a/src/button/type.ts +++ b/src/button/type.ts @@ -17,6 +17,14 @@ export interface TdButtonProps { value?: boolean; required?: boolean; }; + /** + * 按钮内容 + */ + content?: { + type: StringConstructor; + value?: string; + required?: boolean; + }; /** * 是否禁用按钮 * @default false From 7a714a9864892c8eeda5a7090c4819ecb5b41459 Mon Sep 17 00:00:00 2001 From: leejimqiu Date: Thu, 6 Jan 2022 17:38:08 +0800 Subject: [PATCH 2/2] fix(dialog): complete document & button props --- src/common/template/button.wxml | 30 ++++++++++++ src/dialog/README.md | 43 +++++++++-------- src/dialog/dialog.ts | 85 +++++++++++++++++++-------------- src/dialog/dialog.wxml | 22 +++++++-- src/dialog/dialog.wxs | 3 ++ src/dialog/props.ts | 14 +++--- src/dialog/type.ts | 16 +++---- 7 files changed, 137 insertions(+), 76 deletions(-) create mode 100644 src/common/template/button.wxml create mode 100644 src/dialog/dialog.wxs diff --git a/src/common/template/button.wxml b/src/common/template/button.wxml new file mode 100644 index 000000000..4052d5a7c --- /dev/null +++ b/src/common/template/button.wxml @@ -0,0 +1,30 @@ + diff --git a/src/dialog/README.md b/src/dialog/README.md index b692f2c2a..314aff161 100644 --- a/src/dialog/README.md +++ b/src/dialog/README.md @@ -111,28 +111,31 @@ Dialog.confirm({ ``` ## API - ### Dialog Props -| 名称 | 类型 | 默认值 | 说明 | 必传 | -| ---------------------- | ---------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---- | -| actions | Array / Slot | - | 操作栏。TS 类型：`Array`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | N | -| button-layout | String | horizontal | 多按钮排列方式。可选项：horizontal/vertical | N | -| cancel-btn | String / Object / Slot | '' | 取消按钮，可自定义。值为 undefined 或 null 则不显示取消按钮。值类型为 Object 则表示透传 Button 组件属性。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | N | -| close-on-overlay-click | Boolean | true | 点击蒙层时是否触发关闭事件 | N | -| confirm-btn | String / Object / Slot | '' | 确认按钮，可自定义。值为 undefined 或 null 则不显示确认按钮 | N | -| content | String / Slot | - | 内容 | N | -| external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、确认按钮、取消按钮 等元素类名。`['t-class', 't-class-confirm', 't-class-cancel']` | N | -| prevent-scroll-through | Boolean | true | 防止滚动穿透 | N | -| show-overlay | Boolean | true | 是否显示遮罩层 | N | -| title | String / Slot | - | 标题 | N | -| visible | Boolean | false | 控制对话框是否显示 | N | -| z-index | Number | - | 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500 | N | +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +actions | Array / Slot | - | 操作栏。TS 类型：`Array`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | N +button-layout | String | horizontal | 多按钮排列方式。可选项：horizontal/vertical | N +cancel-btn | String / Object / Slot | '' | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | N +close-on-overlay-click | Boolean | true | 点击蒙层时是否触发关闭事件 | N +confirm-btn | String / Object / Slot | '' | 确认按钮。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件 | N +content | String / Slot | - | 内容 | N +external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、确认按钮、取消按钮 等元素类名。`['t-class', 't-class-confirm', 't-class-cancel']` | N +prevent-scroll-through | Boolean | true | 防止滚动穿透 | N +show-overlay | Boolean | true | 是否显示遮罩层 | N +title | String / Slot | - | 标题 | N +visible | Boolean | false | 控制对话框是否显示 | N +z-index | Number | - | 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500 | N ### Dialog Events -| 名称 | 参数 | 描述 | -| ------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | -| cancel | - | 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 | -| close | `(context: DialogCloseContext)` | 关闭事件，点击 取消按钮 或 点击蒙层 时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | -| overlay-click | - | 如果蒙层存在，点击蒙层时触发 | +名称 | 参数 | 描述 +-- | -- | -- +cancel | - | 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 +close | `(context: DialogCloseContext)` | 关闭事件，点击 取消按钮 或 点击蒙层 时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) +overlay-click | - | 如果蒙层存在，点击蒙层时触发 +confirm | - | 如果“确认”按钮存在，则点击“确认”按钮时触发 +action | `(index: number)` | 操作列表的点击时间，`index` 代表操作列表的顺序 +open-type-event | `(ButtonEventDetail)` | “确认”按钮具有开放能力的话，对应的成功回调 +open-type-error-event | `(ButtonError)` | “确认”按钮具有开放能力的话，对应的失败回调 \ No newline at end of file diff --git a/src/dialog/dialog.ts b/src/dialog/dialog.ts index dcc4bcf01..b2e1a663f 100644 --- a/src/dialog/dialog.ts +++ b/src/dialog/dialog.ts @@ -26,48 +26,59 @@ export default class Dialog extends SuperComponent { classPrefix: name, }; - onConfirm() { - this.setData({ - visible: false, - }); - this.triggerEvent('confirm'); - this._onComfirm && this._onComfirm(); - } + methods = { + onTplButtonTap(e) { + const evtType = e.type; + const { type } = e.target.dataset; + + if (`bind${evtType}` in this.data[`${type}Btn`]) { + this.data[`${type}Btn`][`bind${evtType}`](e.detail) + } + }, - onCancel() { - this.close(); - this.triggerEvent('cancel'); - } + onConfirm() { + this.setData({ + visible: false, + }); + this.triggerEvent('confirm'); + this._onComfirm && this._onComfirm(); + }, - close() { - this.setData({ - visible: false, - }); - this.triggerEvent('close'); - } - - overlayClick() { - if (this.properties.closeOnOverlayClick) { + onCancel() { this.close(); - } - this.triggerEvent('overlayClick'); - } + this.triggerEvent('cancel'); + }, + + close() { + this.setData({ + visible: false, + }); + this.triggerEvent('close'); + }, - onActionTap(e: any) { - const { index } = e.currentTarget.dataset; + overlayClick() { + if (this.properties.closeOnOverlayClick) { + this.close(); + } + this.triggerEvent('overlayClick'); + }, - this.setData({ - visible: false, - }); - this.triggerEvent('action', { index }); - this._onAction && this._onAction({ index }); - } + onActionTap(e: any) { + const { index } = e.currentTarget.dataset; - openValueCBHandle(e) { - this.triggerEvent('open-type-event', e.detail); - } + this.setData({ + visible: false, + }); + this.triggerEvent('action', { index }); + this._onAction && this._onAction({ index }); + }, - openValueErrCBHandle(e) { - this.triggerEvent('open-type-error-event', e.detail); - } + openValueCBHandle(e) { + this.triggerEvent('open-type-event', e.detail); + }, + + openValueErrCBHandle(e) { + this.triggerEvent('open-type-error-event', e.detail); + }, + }; } diff --git a/src/dialog/dialog.wxml b/src/dialog/dialog.wxml index e11a66cff..c9e1b3525 100644 --- a/src/dialog/dialog.wxml +++ b/src/dialog/dialog.wxml @@ -1,3 +1,6 @@ + + + {{cancelBtn}} + + + {{confirmBtn}} + + + diff --git a/src/dialog/dialog.wxs b/src/dialog/dialog.wxs new file mode 100644 index 000000000..8677851f5 --- /dev/null +++ b/src/dialog/dialog.wxs @@ -0,0 +1,3 @@ +module.exports.getTypeof = function (obj) { + return typeof obj; +}; diff --git a/src/dialog/props.ts b/src/dialog/props.ts index a9d886915..117858a66 100644 --- a/src/dialog/props.ts +++ b/src/dialog/props.ts @@ -2,7 +2,7 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-11-26 17:01:46 + * updated at 2021-12-28 16:46:06 * */ import { TdDialogProps } from './type'; @@ -16,10 +16,10 @@ const props: TdDialogProps = { type: String, value: 'horizontal', }, - /** 取消按钮，可自定义。值为 undefined 或 null 则不显示取消按钮。值类型为 Object 则表示透传 Button 组件属性 */ + /** 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件 */ cancelBtn: { - type: String, - optionalTypes: [Object], + type: [String, Object], + // optionalTypes: [Object], value: '', }, /** 点击蒙层时是否触发关闭事件 */ @@ -27,10 +27,10 @@ const props: TdDialogProps = { type: Boolean, value: true, }, - /** 确认按钮，可自定义。值为 undefined 或 null 则不显示确认按钮 */ + /** 确认按钮。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件 */ confirmBtn: { - type: String, - optionalTypes: [Object], + type: [String, Object], + // optionalTypes: [Object], value: '', }, /** 内容 */ diff --git a/src/dialog/type.ts b/src/dialog/type.ts index efbf19a25..6fdb6e6d4 100644 --- a/src/dialog/type.ts +++ b/src/dialog/type.ts @@ -2,7 +2,7 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-11-26 17:01:46 + * updated at 2021-12-28 16:46:06 * */ import { TdButtonProps } from '../button/type'; @@ -26,12 +26,12 @@ export interface TdDialogProps { required?: boolean; }; /** - * 取消按钮，可自定义。值为 undefined 或 null 则不显示取消按钮。值类型为 Object 则表示透传 Button 组件属性 + * 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件 * @default '' */ cancelBtn?: { - type: StringConstructor; - optionalTypes: Array; + type: Array; + optionalTypes?: Array; value?: string | TdButtonProps; required?: boolean; }; @@ -45,12 +45,12 @@ export interface TdDialogProps { required?: boolean; }; /** - * 确认按钮，可自定义。值为 undefined 或 null 则不显示确认按钮 + * 确认按钮。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件 * @default '' */ confirmBtn?: { - type: StringConstructor; - optionalTypes: Array; + type: Array; + optionalTypes?: Array; value?: string | TdButtonProps; required?: boolean; }; @@ -113,4 +113,4 @@ export interface TdDialogProps { value?: number; required?: boolean; }; -}; +}