lingxiao/mini-yu
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
lingxiao865
2026-02-10 08:05:03 +08:00
commit c5af079d8c
1094 changed files with 97530 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
uni_modules/tdesign-uniapp/components/dialog/README.en-US.md Normal file
View File

@@ -0,0 +1,69 @@
:: BASE_DOC ::
## API
### Dialog Props
name | type | default | description | required
-- | -- | -- | -- | --
custom-style | Object | - | CSS(Cascading Style Sheets) | N
actions | Array | - | Typescript：`Array<ButtonProps>`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/dialog/type.ts) | N
button-layout | String | horizontal | options: horizontal/vertical | N
cancel-btn | String / Object | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/dialog/type.ts) | N
close-btn | Boolean / Object | false | Typescript：`boolean \| ButtonProps \| null`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/dialog/type.ts) | N
close-on-overlay-click | Boolean | false | \- | N
confirm-btn | String / Object | - | \- | N
content | String | - | \- | N
overlay-props | Object | {} | Typescript：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/dialog/type.ts) | N
prevent-scroll-through | Boolean | true | \- | N
show-overlay | Boolean | true | \- | N
title | String | - | \- | N
using-custom-navbar | Boolean | false | \- | N
visible | Boolean | - | \- | N
z-index | Number | 11500 | \- | N
### Dialog Events
name | params | description
-- | -- | --
action | `(context: { index: number })` | \-
cancel | `(context: { e: MouseEvent })` | \-
close | `(context: { trigger: DialogEventSource })` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/dialog/type.ts)。<br/>`type DialogEventSource = 'cancel' \| 'overlay' \| 'close-btn'`<br/>
confirm | `(context: { e: MouseEvent })` | \-
overlay-click | `(context: { e: MouseEvent })` | \-
### Dialog Slots
name | Description
-- | --
actions | \-
cancel-btn | \-
confirm-btn | \-
content | \-
middle | \-
title | \-
top | \-
### Dialog External Classes
className | Description
-- | --
t-class | \-
t-class-action | \-
t-class-cancel | \-
t-class-confirm | \-
t-class-content | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-dialog-body-max-height | 912rpx | -
--td-dialog-border-radius | @radius-extraLarge | -
--td-dialog-close-color | @text-color-placeholder | -
--td-dialog-content-color | @text-color-secondary | -
--td-dialog-content-font | @font-body-large | -
--td-dialog-title-color | @text-color-primary | -
--td-dialog-title-font | @font-title-large | -
--td-dialog-width | 622rpx | -

120
uni_modules/tdesign-uniapp/components/dialog/README.md Normal file
View File

@@ -0,0 +1,120 @@
---
title: Dialog 对话框
description: 用于显示重要提示或请求用户进行重要操作，一种打断当前操作的模态视图。
spline: message
isComponent: true
---
## 引入
可在 `main.ts` 或在需要使用的页面或组件中引入。
```js
import TDialog from '@tdesign/uniapp/dialog/dialog.vue';
```
### 组件类型
按钮的样式，默认使用 `variant = text`，如果任意按钮改变了 `variant`，那么全部按钮都改变成这个。
#### 反馈类对话框
{{ base }}
> 使用这种方式，对话框的 `visible` 是受控的，需要手动设置额 `visible` 为 `false` 才会关闭对话框。
#### 确认类对话框
{{ confirm }}
#### 输入类对话框
{{ with-input }}
#### 带图片对话框
{{ with-image }}
### 组件状态
{{ status }}
### 组件用法
#### 命令调用
{{ command }}
#### 开放能力按钮
当传入的按钮类型为对象时，整个对象都将透传至 `t-button`，因此按钮可以直接使用开放能力
{{ button }}
## API
### Dialog Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
custom-style | Object | - | 自定义样式 | N
actions | Array | - | 操作栏。TS 类型：`Array<ButtonProps>`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/dialog/type.ts) | N
button-layout | String | horizontal | 多按钮排列方式。可选项：horizontal/vertical | N
cancel-btn | String / Object | - | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 Slot 自定义按钮时，需自行控制取消事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/dialog/type.ts) | N
close-btn | Boolean / Object | false | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；使用 Object 时透传至图标组件。TS 类型：`boolean \| ButtonProps \| null`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/dialog/type.ts) | N
close-on-overlay-click | Boolean | false | 点击蒙层时是否触发关闭事件 | N
confirm-btn | String / Object | - | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 Slot 自定义按钮时，需自行控制确认事件 | N
content | String | - | 内容 | N
overlay-props | Object | {} | 透传至 Overlay 组件。TS 类型：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/dialog/type.ts) | N
prevent-scroll-through | Boolean | true | 防止滚动穿透 | N
show-overlay | Boolean | true | 是否显示遮罩层 | N
title | String | - | 标题 | N
using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
visible | Boolean | - | 控制对话框是否显示 | N
z-index | Number | 11500 | 对话框层级，Web 侧样式默认为 2500，移动端样式默认 2500，小程序样式默认为 11500 | N
### Dialog Events
名称 | 参数 | 描述
-- | -- | --
action | `(context: { index: number })` | 点击多按钮中的其中一个时触发
cancel | `(context: { e: MouseEvent })` | 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件
close | `(context: { trigger: DialogEventSource })` | 关闭事件，点击 取消按钮 或 点击蒙层 时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/dialog/type.ts)。<br/>`type DialogEventSource = 'cancel' \| 'overlay' \| 'close-btn'`<br/>
confirm | `(context: { e: MouseEvent })` | 如果“确认”按钮存在，则点击“确认”按钮时触发
overlay-click | `(context: { e: MouseEvent })` | 如果蒙层存在，点击蒙层时触发
### Dialog Slots
名称 | 描述
-- | --
actions | 自定义 `actions` 显示内容
cancel-btn | 自定义 `cancel-btn` 显示内容
confirm-btn | 自定义 `confirm-btn` 显示内容
content | 自定义 `content` 显示内容
middle | 中间自定义内容
title | 自定义 `title` 显示内容
top | 顶部自定义内容
### Dialog External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-action | 操作样式类
t-class-cancel | 取消样式类
t-class-confirm | 确认样式类
t-class-content | 内容样式类
### CSS Variables
组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-dialog-body-max-height | 912rpx | -
--td-dialog-border-radius | @radius-extraLarge | -
--td-dialog-close-color | @text-color-placeholder | -
--td-dialog-content-color | @text-color-secondary | -
--td-dialog-content-font | @font-body-large | -
--td-dialog-title-color | @text-color-primary | -
--td-dialog-title-font | @font-title-large | -
--td-dialog-width | 622rpx | -

15
uni_modules/tdesign-uniapp/components/dialog/computed.js Normal file
View File

@@ -0,0 +1,15 @@
import { coalesce } from '../common/utils';
export const getTypeof = function (obj) {
return typeof obj;
};
export const getActionClass = function (prefix, buttonLayout, actionItem, tClassAction) {
const cls = [`${prefix}__button`, `${prefix}__button--action`];
if (buttonLayout) {
cls.push(`${prefix}__button--${buttonLayout}`);
}
return `${cls.join(' ')} ${coalesce(actionItem.tClass, tClassAction)}`;
};

102
uni_modules/tdesign-uniapp/components/dialog/dialog.css Normal file
View File

@@ -0,0 +1,102 @@
.t-dialog {
overflow: hidden;
width: var(--td-dialog-width, 622rpx);
border-radius: var(--td-dialog-border-radius, var(--td-radius-extraLarge, 24rpx));
background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
}
.t-dialog__wrapper {
--td-popup-border-radius: var(--td-dialog-border-radius, var(--td-radius-extraLarge, 24rpx));
}
.t-dialog__close-btn {
position: absolute;
top: var(--td-spacer, 16rpx);
right: var(--td-spacer, 16rpx);
color: var(--td-dialog-close-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
z-index: 1;
/* skyline适配新增 */
}
.t-dialog__content {
padding-top: var(--td-spacer-3, 48rpx);
padding-right: var(--td-spacer-3, 48rpx);
padding-bottom: 0;
padding-left: var(--td-spacer-3, 48rpx);
max-height: var(--td-dialog-body-max-height, 912rpx);
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
font-size: var(--td-font-size-m, 32rpx);
}
.t-dialog__content:empty {
display: none;
}
.t-dialog__header {
text-align: center;
font: var(--td-dialog-title-font, var(--td-font-title-large, 600 36rpx / 52rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
color: var(--td-dialog-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
}
.t-dialog__header + .t-dialog__body {
margin-top: var(--td-spacer, 16rpx);
}
.t-dialog__body {
overflow-y: scroll;
text-align: center;
-webkit-overflow-scrolling: touch;
font: var(--td-dialog-content-font, var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
color: var(--td-dialog-content-color, var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))));
}
.t-dialog__body-text {
word-wrap: break-word;
}
.t-dialog__body--left {
text-align: left;
}
.t-dialog__body--right {
text-align: right;
}
.t-dialog__footer {
display: flex;
padding: var(--td-spacer-3, 48rpx);
}
.t-dialog__footer--column {
flex-flow: column-reverse;
}
.t-dialog__footer--column :deep(.t-dialog__button) {
width: 100%;
}
.t-dialog__footer--full {
padding: var(--td-spacer-4, 64rpx) 0 0;
}
:deep(.t-dialog__button) {
position: relative;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
:deep(.t-dialog__button)--horizontal:not(:first-child) {
margin-left: var(--td-spacer-1, 24rpx);
}
:deep(.t-dialog__button)--vertical:not(:first-child) {
margin-bottom: var(--td-spacer-1, 24rpx);
}
:deep(.t-dialog__button)--text {
flex: 1;
--td-button-border-radius: 0;
--td-button-medium-height: 112rpx;
border-radius: 0;
}
:deep(.t-dialog__button)--text:before {
content: ' ';
position: absolute;
box-sizing: border-box;
top: 0;
left: 0;
border-top: 1px solid var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7));
border-left: 1px solid var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7));
transform: scale(0.5);
transform-origin: 0 0;
width: 200%;
height: 200%;
border-radius: 0;
}

422
uni_modules/tdesign-uniapp/components/dialog/dialog.vue Normal file
View File

@@ -0,0 +1,422 @@
<template>
<t-popup
name="dialog"
:custom-style="tools._style([customStyle])"
:t-class="classPrefix + '__wrapper'"
:visible="dataVisible"
:show-overlay="dataShowOverlay"
:close-on-overlay-click="dataCloseOnOverlayClick"
:prevent-scroll-through="dataPreventScrollThrough"
:overlay-props="dataOverlayProps"
:z-index="dataZIndex"
placement="center"
:using-custom-navbar="dataUsingCustomNavbar"
@visible-change="overlayClick"
>
<template #content>
<view
:class="classPrefix + ' ' + tClass"
>
<slot name="top" />
<view
v-if="dataCloseBtn"
:class="classPrefix + '__close-btn'"
@click="onClose"
>
<template
v-if="tools.isObject(dataCloseBtn)"
>
<t-icon
:custom-style="dataCloseBtn.style || ''"
:prefix="dataCloseBtn.prefix"
:name="dataCloseBtn.name || 'close'"
:size="dataCloseBtn.size || 22"
:color="dataCloseBtn.color"
:aria-hidden="true"
:aria-label="dataCloseBtn.ariaLabel"
:aria-role="dataCloseBtn.ariaRole"
/>
</template>
<t-icon
v-else
name="close"
size="44rpx"
/>
</view>
<view :class="classPrefix + '__content ' + tClassContent">
<view
v-if="dataTitle"
:class="classPrefix + '__header'"
>
{{ dataTitle }}
</view>
<slot name="title" />
<view
v-if="dataContent"
:class="classPrefix + '__body'"
>
<text :class="classPrefix + '__body-text'">
{{ dataContent }}
</text>
</view>
<slot name="content" />
</view>
<slot name="middle" />
<view
:class="
tools.cls(classPrefix + '__footer', [
['column', dataButtonLayout === 'vertical'],
['full', buttonVariant == 'text' && (!dataActions || dataActions.length == 0)]
])
"
>
<template v-if="dataActions">
<t-button
v-for="(actionItem, index) in dataActions"
:key="index"
:t-id="actionItem.tId"
:custom-style="actionItem.style"
:block="coalesce(actionItem.block, true)"
:t-class="useVirtualHost ? getActionClass(classPrefix, dataButtonLayout, actionItem, tClassAction) : ''"
:class="!useVirtualHost ? getActionClass(classPrefix, dataButtonLayout, actionItem, tClassAction) : ''"
:disabled="actionItem.disabled"
:data-type="'action'"
:data-extra="coalesce(actionItem.index, index)"
:custom-dataset="actionItem.customDataset"
:content="actionItem.content"
:icon="actionItem.icon"
:loading="actionItem.loading"
:loading-props="actionItem.loadingProps"
:theme="actionItem.theme"
:ghost="actionItem.ghost"
:shape="actionItem.shape"
:size="actionItem.size"
:variant="actionItem.variant"
:open-type="actionItem.openType"
:hover-class="actionItem.hoverClass"
:hover-stop-propagation="actionItem.hoverStopPropagation"
:hover-start-time="actionItem.hoverStartTime"
:hover-stay-time="actionItem.hoverStayTime"
:lang="actionItem.lang"
:session-from="actionItem.sessionFrom"
:send-message-title="actionItem.sendMessageTitle"
:send-message-path="actionItem.sendMessagePath"
:send-message-img="actionItem.sendMessageImg"
:app-parameter="actionItem.appParameter"
:show-message-card="actionItem.showMessageCard"
:aria-label="actionItem.ariaLabel"
@click="onTplButtonTap($event, { type: 'action', extra: index })"
@getuserinfo="onTplButtonTap($event, { type: 'action', extra: index })"
@contact="onTplButtonTap($event, { type: 'action', extra: index })"
@getphonenumber="onTplButtonTap($event, { type: 'action', extra: index })"
@error="onTplButtonTap($event, { type: 'action', extra: index })"
@opensetting="onTplButtonTap($event, { type: 'action', extra: index })"
@launchapp="onTplButtonTap($event, { type: 'action', extra: index })"
@agreeprivacyauthorization="onTplButtonTap($event, { type: 'action', extra: index })"
>
<slot v-if="actionItem.useDefaultSlot || false" />
</t-button>
</template>
<slot name="actions" />
<template v-if="_cancel">
<t-button
:t-id="_cancel.tId"
:custom-style="_cancel.style"
:block="_cancel.block"
:t-class="_cancel.tClass"
:class="_cancel.class"
:disabled="_cancel.disabled"
:data-type="'cancel'"
:data-extra="_cancel.index"
:custom-dataset="_cancel.customDataset"
:content="_cancel.content"
:icon="_cancel.icon"
:loading="_cancel.loading"
:loading-props="_cancel.loadingProps"
:theme="_cancel.theme"
:ghost="_cancel.ghost"
:shape="_cancel.shape"
:size="_cancel.size"
:variant="_cancel.variant"
:open-type="_cancel.openType"
:hover-class="_cancel.hoverClass"
:hover-stop-propagation="_cancel.hoverStopPropagation"
:hover-start-time="_cancel.hoverStartTime"
:hover-stay-time="_cancel.hoverStayTime"
:lang="_cancel.lang"
:session-from="_cancel.sessionFrom"
:send-message-title="_cancel.sendMessageTitle"
:send-message-path="_cancel.sendMessagePath"
:send-message-img="_cancel.sendMessageImg"
:app-parameter="_cancel.appParameter"
:show-message-card="_cancel.showMessageCard"
:aria-label="_cancel.ariaLabel"
@click="onCancel($event, { type: 'action', extra: 0 })"
@getuserinfo="onCancel($event, { type: 'action', extra: 0 })"
@contact="onCancel($event, { type: 'action', extra: 0 })"
@getphonenumber="onCancel($event, { type: 'action', extra: 0 })"
@error="onCancel($event, { type: 'action', extra: 0 })"
@opensetting="onCancel($event, { type: 'action', extra: 0 })"
@launchapp="onCancel($event, { type: 'action', extra: 0 })"
@agreeprivacyauthorization="onCancel($event, { type: 'action', extra: 0 })"
>
<slot v-if="_cancel.useDefaultSlot || false" />
</t-button>
</template>
<slot name="cancel-btn" />
<template v-if="_confirm">
<t-button
:t-id="_confirm.tId"
:custom-style="_confirm.style"
:block="_confirm.block"
:t-class="_confirm.tClass"
:class="_confirm.class"
:disabled="_confirm.disabled"
:data-type="'confirm'"
:data-extra="_confirm.index"
:custom-dataset="_confirm.customDataset"
:content="_confirm.content"
:icon="_confirm.icon"
:loading="_confirm.loading"
:loading-props="_confirm.loadingProps"
:theme="_confirm.theme || 'primary'"
:ghost="_confirm.ghost"
:shape="_confirm.shape"
:size="_confirm.size"
:variant="_confirm.variant"
:open-type="_confirm.openType"
:hover-class="_confirm.hoverClass"
:hover-stop-propagation="_confirm.hoverStopPropagation"
:hover-start-time="_confirm.hoverStartTime"
:hover-stay-time="_confirm.hoverStayTime"
:lang="_confirm.lang"
:session-from="_confirm.sessionFrom"
:send-message-title="_confirm.sendMessageTitle"
:send-message-path="_confirm.sendMessagePath"
:send-message-img="_confirm.sendMessageImg"
:app-parameter="_confirm.appParameter"
:show-message-card="_confirm.showMessageCard"
:aria-label="_confirm.ariaLabel"
@click="onConfirm($event, { type: 'action', extra: 0 })"
@getuserinfo="onConfirm($event, { type: 'action', extra: 0 })"
@contact="onConfirm($event, { type: 'action', extra: 0 })"
@getphonenumber="onConfirm($event, { type: 'action', extra: 0 })"
@error="onTplButtonConfirmonTap($event, { type: 'action', extra: 0 })"
@opensetting="onConfirm($event, { type: 'action', extra: 0 })"
@launchapp="onConfirm($event, { type: 'action', extra: 0 })"
@agreeprivacyauthorization="onConfirm($event, { type: 'action', extra: 0 })"
>
<slot v-if="_confirm.useDefaultSlot || false" />
</t-button>
</template>
<slot name="confirm-btn" />
</view>
</view>
</template>
</t-popup>
</template>
<script>
import TPopup from '../popup/popup';
import TIcon from '../icon/icon';
import TButton from '../button/button';
import { uniComponent } from '../common/src/index';
import { prefix } from '../common/config';
import props from './props';
import { toCamel, coalesce } from '../common/utils';
import { isObject } from '../common/validator';
import useCustomNavbar from '../mixins/using-custom-navbar';
import tools from '../common/utils.wxs';
import { getActionClass } from './computed.js';
import { getFunctionalMixin } from '../common/functional/mixin';
import { canUseVirtualHost } from '../common/version';
const name = `${prefix}-dialog`;
export default uniComponent({
name,
options: {
styleIsolation: 'shared',
},
externalClasses: [
`${prefix}-class`,
`${prefix}-class-content`,
`${prefix}-class-confirm`,
`${prefix}-class-cancel`,
`${prefix}-class-action`,
],
mixins: [getFunctionalMixin(props), useCustomNavbar],
components: {
TPopup,
TIcon,
TButton,
},
props: {
...props,
},
data() {
return {
prefix,
classPrefix: name,
buttonVariant: 'text',
tools,
_confirm: null,
_cancel: null,
useVirtualHost: canUseVirtualHost(),
};
},
watch: {
dataConfirmBtn: {
handler() {
this.onWatchBtn(this.dataConfirmBtn, this.dataCancelBtn);
},
immediate: true,
},
dataCancelBtn: {
handler() {
this.onWatchBtn(this.dataConfirmBtn, this.dataCancelBtn);
},
immediate: true,
},
},
methods: {
coalesce,
getActionClass,
onWatchBtn(confirm, cancel) {
const { prefix, classPrefix, dataButtonLayout } = this;
const rect = { buttonVariant: 'text' };
const useBaseVariant = [confirm, cancel].some(item => isObject(item) && item.variant && item.variant !== 'text');
const buttonMap = { confirm, cancel };
const cls = [`${classPrefix}__button`];
const externalCls = [];
if (useBaseVariant) {
rect.buttonVariant = 'base';
cls.push(`${classPrefix}__button--${dataButtonLayout}`);
} else {
cls.push(`${classPrefix}__button--text`);
externalCls.push(`${classPrefix}-button`);
}
const useVirtualHost = canUseVirtualHost();
Object.keys(buttonMap).forEach((key) => {
const btn = buttonMap[key];
const rootClass = [...cls, `${classPrefix}__button--${key}`];
const tClass = [...externalCls, this[toCamel(`${prefix}-class-${key}`)], ...rootClass].join(' ');
const base = {
block: true,
rootClass,
tClass: useVirtualHost ? tClass : '',
class: !useVirtualHost ? tClass : '',
variant: rect.buttonVariant,
openType: '',
};
if (key === 'cancel' && rect.buttonVariant === 'base') {
base.theme = 'light';
}
if (typeof btn === 'string') {
rect[`_${key}`] = { ...base, content: btn };
} else if (btn && typeof btn === 'object') {
rect[`_${key}`] = { ...base, ...btn };
} else {
rect[`_${key}`] = null;
}
});
Object.keys(rect).forEach((key) => {
this[key] = rect[key];
});
},
onTplButtonTap(e, { type, extra }) {
const evtType = e.type;
const button = this[`_${type}`];
const cbName = `bind${evtType}`;
if (type === 'action') {
this.onActionTap(extra);
return;
}
if (typeof button?.[cbName] === 'function') {
const closeFlag = button[cbName](e);
if (closeFlag) {
this.close();
}
}
const hasOpenType = !!button?.openType;
if (!hasOpenType && ['confirm', 'cancel'].includes(type)) {
this[toCamel(`on-${type}`)]?.(type);
}
if (evtType !== 'click') {
const success = e.detail?.errMsg?.indexOf('ok') > -1;
this.$emit(success ? 'open-type-event' : 'open-type-error-event', e.detail);
}
},
onConfirm(e) {
this.$emit('confirm', { e });
if (this._onConfirm) {
this._onConfirm({ trigger: 'confirm' });
this.close();
}
},
onCancel(e) {
const trigger = { trigger: 'cancel' };
this.$emit('cancel', { e });
this.$emit('close', trigger);
if (this._onCancel) {
this._onCancel(trigger);
this.close();
}
},
onClose() {
const trigger = { trigger: 'close-btn' };
this.$emit('close', trigger);
this._onCancel?.(trigger);
this.close();
},
close() {
this.dataVisible = false;
},
overlayClick(e) {
this.$emit('overlay-click', { e });
if (this.dataCloseOnOverlayClick) {
const trigger = { trigger: 'overlay' };
this.$emit('close', trigger);
this._onCancel?.(trigger);
this.close();
}
},
onActionTap(index) {
this.$emit('action', { index });
if (this._onAction) {
this._onAction({ index });
this.close();
}
},
},
});
</script>
<style scoped>
@import './dialog.css';
</style>

42
uni_modules/tdesign-uniapp/components/dialog/index.d.ts vendored Normal file
View File

@@ -0,0 +1,42 @@
declare type Context = any;
interface DialogAlertOptionsType {
context?: Context;
selector?: string;
title?: string;
content?: string;
zIndex?: number;
asyncClose?: boolean;
confirmButtonText?: string;
textAlign?: string;
cancelBtn?: string | object;
confirmBtn?: string | object;
showOverlay?: boolean;
closeOnOverlayClick?: boolean;
preventScrollThrough?: boolean;
}
interface DialogConfirmOptionsType extends DialogAlertOptionsType {
cancelButtonText?: string;
}
interface Action {
content: string;
theme?: 'default' | 'primary' | 'danger' | 'light';
}
interface DialogActionOptionsType {
context?: Context;
selector?: string;
title?: string;
content: string;
zIndex?: number;
asyncClose?: boolean;
actions?: Action[];
buttonLayout?: 'vertical' | 'horizontal';
}
declare const Handler: {
alert(options: DialogAlertOptionsType): Promise<unknown>;
confirm(options: DialogConfirmOptionsType): Promise<unknown>;
close(options?: DialogConfirmOptionsType): Promise<void>;
action(options: DialogActionOptionsType): Promise<{
index: number;
}>;
};
export default Handler;

90
uni_modules/tdesign-uniapp/components/dialog/index.js Normal file
View File

@@ -0,0 +1,90 @@
import props from './props';
import { getInstance } from '../common/utils';
const defaultOptions = {
actions: [],
buttonLayout: props.buttonLayout.default,
cancelBtn: props.cancelBtn.default,
closeOnOverlayClick: props.closeOnOverlayClick.default,
confirmBtn: props.confirmBtn.value,
content: '',
preventScrollThrough: props.preventScrollThrough.default,
showOverlay: props.showOverlay.default,
title: '',
visible: props.visible.default,
};
export default {
alert(options) {
const { context, selector = '#t-dialog', ...otherOptions } = { ...options };
const instance = getInstance(context, selector);
if (!instance) return Promise.reject();
return new Promise((resolve) => {
const mergedOptions = {
...defaultOptions,
...instance.properties,
...otherOptions,
};
instance.setData({
cancelBtn: '',
...mergedOptions,
visible: true,
});
instance._onConfirm = resolve;
});
},
confirm(options) {
const { context, selector = '#t-dialog', ...otherOptions } = { ...options };
const instance = getInstance(context, selector);
if (!instance) return Promise.reject();
return new Promise((resolve, reject) => {
const mergedOptions = {
...defaultOptions,
...instance.properties,
...otherOptions,
};
instance.setData({
...mergedOptions,
visible: true,
});
instance._onConfirm = resolve;
instance._onCancel = reject;
});
},
close(options) {
const { context, selector = '#t-dialog' } = { ...options };
const instance = getInstance(context, selector);
if (instance) {
instance.close();
return Promise.resolve();
}
return Promise.reject();
},
action(options) {
const { context, selector = '#t-dialog', ...otherOptions } = { ...options };
const instance = getInstance(context, selector);
if (!instance) return Promise.reject();
const { buttonLayout = 'vertical', actions = instance.properties.actions } = options;
const maxLengthSuggestion = buttonLayout === 'vertical' ? 7 : 3;
if (!actions || (typeof actions === 'object' && (actions.length === 0 || actions.length > maxLengthSuggestion))) {
console.warn(`action 数量建议控制在1至${maxLengthSuggestion}个`);
}
return new Promise((resolve) => {
const mergedOptions = {
...defaultOptions,
...instance.properties,
...otherOptions,
};
instance.setData({
...mergedOptions,
buttonLayout,
visible: true,
});
instance._onAction = resolve;
});
},
};

94
uni_modules/tdesign-uniapp/components/dialog/props.ts Normal file
View File

@@ -0,0 +1,94 @@
/* eslint-disable */
/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */
import type { TdDialogProps } from './type';
export default {
/** 操作栏 */
actions: {
type: Array,
},
/** 多按钮排列方式 */
buttonLayout: {
type: String,
default: 'horizontal' as TdDialogProps['buttonLayout'],
validator(val: TdDialogProps['buttonLayout']): boolean {
if (!val) return true;
return ['horizontal', 'vertical'].includes(val);
},
},
/** 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 Slot 自定义按钮时，需自行控制取消事件 */
cancelBtn: {
type: [String, Object],
},
/** 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；使用 Object 时透传至图标组件 */
closeBtn: {
type: [Boolean, Object],
default: false as TdDialogProps['closeBtn'],
},
/** 点击蒙层时是否触发关闭事件 */
closeOnOverlayClick: Boolean,
/** 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 Slot 自定义按钮时，需自行控制确认事件 */
confirmBtn: {
type: [String, Object],
},
/** 内容 */
content: {
type: String,
},
/** 透传至 Overlay 组件 */
overlayProps: {
type: Object,
default: () => ({}),
},
/** 防止滚动穿透 */
preventScrollThrough: {
type: Boolean,
default: true,
},
/** 是否显示遮罩层 */
showOverlay: {
type: Boolean,
default: true,
},
/** 标题 */
title: {
type: String,
},
/** 是否使用了自定义导航栏 */
usingCustomNavbar: Boolean,
/** 控制对话框是否显示 */
visible: Boolean,
/** 对话框层级，Web 侧样式默认为 2500，移动端样式默认 2500，小程序样式默认为 11500 */
zIndex: {
type: Number,
default: 11500,
},
/** 点击多按钮中的其中一个时触发 */
onAction: {
type: Function,
default: () => ({}),
},
/** 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 */
onCancel: {
type: Function,
default: () => ({}),
},
/** 关闭事件，点击 取消按钮 或 点击蒙层 时触发 */
onClose: {
type: Function,
default: () => ({}),
},
/** 如果“确认”按钮存在，则点击“确认”按钮时触发 */
onConfirm: {
type: Function,
default: () => ({}),
},
/** 如果蒙层存在，点击蒙层时触发 */
onOverlayClick: {
type: Function,
default: () => ({}),
},
};

97
uni_modules/tdesign-uniapp/components/dialog/type.ts Normal file
View File

@@ -0,0 +1,97 @@
/* eslint-disable */
/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */
import type { TdButtonProps as ButtonProps } from '../button/type';
import type { TdOverlayProps as OverlayProps } from '../overlay/type';
export interface TdDialogProps {
/**
* 操作栏
*/
actions?: Array<ButtonProps>;
/**
* 多按钮排列方式
* @default horizontal
*/
buttonLayout?: 'horizontal' | 'vertical';
/**
* 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 Slot 自定义按钮时，需自行控制取消事件
*/
cancelBtn?: string | ButtonProps | null;
/**
* 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；使用 Object 时透传至图标组件
* @default false
*/
closeBtn?: boolean | ButtonProps | null;
/**
* 点击蒙层时是否触发关闭事件
* @default false
*/
closeOnOverlayClick?: boolean;
/**
* 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 Slot 自定义按钮时，需自行控制确认事件
*/
confirmBtn?: string | ButtonProps | null;
/**
* 内容
*/
content?: string;
/**
* 透传至 Overlay 组件
* @default {}
*/
overlayProps?: OverlayProps;
/**
* 防止滚动穿透
* @default true
*/
preventScrollThrough?: boolean;
/**
* 是否显示遮罩层
* @default true
*/
showOverlay?: boolean;
/**
* 标题
*/
title?: string;
/**
* 是否使用了自定义导航栏
* @default false
*/
usingCustomNavbar?: boolean;
/**
* 控制对话框是否显示
*/
visible?: boolean;
/**
* 对话框层级，Web 侧样式默认为 2500，移动端样式默认 2500，小程序样式默认为 11500
* @default 11500
*/
zIndex?: number;
/**
* 点击多按钮中的其中一个时触发
*/
onAction?: (context: { index: number }) => void;
/**
* 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件
*/
onCancel?: (context: { e: MouseEvent }) => void;
/**
* 关闭事件，点击 取消按钮 或 点击蒙层 时触发
*/
onClose?: (context: { trigger: DialogEventSource }) => void;
/**
* 如果“确认”按钮存在，则点击“确认”按钮时触发
*/
onConfirm?: (context: { e: MouseEvent }) => void;
/**
* 如果蒙层存在，点击蒙层时触发
*/
onOverlayClick?: (context: { e: MouseEvent }) => void;
}
export type DialogEventSource = 'cancel' | 'overlay' | 'close-btn';