This commit is contained in:
lik
2026-05-30 21:09:24 +08:00
parent 212c94224b
commit 010cf160a0
1075 changed files with 67487 additions and 1 deletions

View File

@@ -0,0 +1,58 @@
:: BASE_DOC ::
## API
### Dialog Props
name | type | default | description | required
-- | -- | -- | -- | --
style | Object | - | CSS(Cascading Style Sheets) | N
custom-style | Object | - | CSS(Cascading Style Sheets)used to set style on virtual component | N
actions | Array / Slot | - | Typescript`Array<ButtonProps>`[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | N
button-layout | String | horizontal | options: horizontal/vertical | N
cancel-btn | String / Object / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | N
close-btn | Boolean / Object | false | `0.31.0`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | N
close-on-overlay-click | Boolean | false | \- | N
confirm-btn | String / Object / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
content | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
overlay-props | Object | {} | Typescript`OverlayProps`[Overlay API Documents](./overlay?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | N
prevent-scroll-through | Boolean | true | \- | N
show-overlay | Boolean | true | \- | N
title | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
using-custom-navbar | Boolean | false | \- | N
visible | Boolean | - | \- | N
z-index | Number | 11500 | \- | N
### Dialog Events
name | params | description
-- | -- | --
cancel | - | \-
close | `(trigger: DialogEventSource)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'cancel' \| 'overlay' \| 'close-btn'`<br/>
confirm | - | \-
overlay-click | - | \-
### 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-extra-large | -
--td-dialog-close-color | @text-color-placeholder | -
--td-dialog-content-color | @text-color-secondary | -
--td-dialog-content-font-size | 32rpx | -
--td-dialog-content-line-height | 48rpx | -
--td-dialog-title-color | @text-color-primary | -
--td-dialog-title-font-size | 36rpx | -
--td-dialog-title-line-height | 52rpx | -
--td-dialog-width | 622rpx | -

View File

@@ -0,0 +1,119 @@
---
title: Dialog 对话框
description: 用于显示重要提示或请求用户进行重要操作,一种打断当前操作的模态视图。
spline: message
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-97%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-82%25-blue" /></span>
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-dialog": "tdesign-miniprogram/dialog/dialog"
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/Pc8Xtims73Sk" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后依次执行npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
</blockquote>
### 组件类型
按钮的样式,默认使用 `variant = text`,如果任意按钮改变了 `variant`,那么全部按钮都改变成这个。
#### 反馈类对话框
{{ base }}
> 使用这种方式,对话框的 `visible` 是受控的,需要手动设置额 `visible` 为 `false` 才会关闭对话框。
#### 确认类对话框
{{ confirm }}
#### 输入类对话框
{{ with-input }}
#### 带图片对话框
{{ with-image }}
### 组件状态
{{ status }}
### 组件用法
#### 命令调用
{{ command }}
#### 开放能力按钮
当传入的按钮类型为对象时,整个对象都将透传至 `t-button`,因此按钮可以直接使用开放能力
{{ button }}
## API
### Dialog Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
actions | Array / Slot | - | 操作栏。TS 类型:`Array<ButtonProps>`[Button API Documents](./button?tab=api)。[详细类型定义](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 组件属性。使用 Slot 自定义按钮时,需自行控制取消事件。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | N
close-btn | Boolean / Object | false | `0.31.0`。是否展示关闭按钮,值为 `true` 显示默认关闭按钮;值为 `false` 则不显示关闭按钮;使用 Object 时透传至图标组件。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | N
close-on-overlay-click | Boolean | false | 点击蒙层时是否触发关闭事件 | N
confirm-btn | String / Object / Slot | - | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串,则表示自定义按钮文本,值类型为 Object 则表示透传 Button 组件属性。使用 Slot 自定义按钮时,需自行控制确认事件。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
content | String / Slot | - | 内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
overlay-props | Object | {} | 透传至 Overlay 组件。TS 类型:`OverlayProps`[Overlay API Documents](./overlay?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | N
prevent-scroll-through | Boolean | true | 防止滚动穿透 | N
show-overlay | Boolean | true | 是否显示遮罩层 | N
title | String / Slot | - | 标题。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
visible | Boolean | - | 控制对话框是否显示 | N
z-index | Number | 11500 | 对话框层级Web 侧样式默认为 2500移动端样式默认 2500小程序样式默认为 11500 | N
### Dialog Events
名称 | 参数 | 描述
-- | -- | --
cancel | - | 如果“取消”按钮存在,则点击“取消”按钮时触发,同时触发关闭事件
close | `(trigger: DialogEventSource)` | 关闭事件,点击 取消按钮 或 点击蒙层 时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'cancel' \| 'overlay' \| 'close-btn'`<br/>
confirm | - | 如果“确认”按钮存在,则点击“确认”按钮时触发
overlay-click | - | 如果蒙层存在,点击蒙层时触发
### 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-extra-large | -
--td-dialog-close-color | @text-color-placeholder | -
--td-dialog-content-color | @text-color-secondary | -
--td-dialog-content-font-size | 32rpx | -
--td-dialog-content-line-height | 48rpx | -
--td-dialog-title-color | @text-color-primary | -
--td-dialog-title-font-size | 36rpx | -
--td-dialog-title-line-height | 52rpx | -
--td-dialog-width | 622rpx | -

View File

@@ -0,0 +1,28 @@
import { SuperComponent } from '../common/src/index';
export default class Dialog extends SuperComponent {
behaviors: string[];
options: {
multipleSlots: boolean;
};
externalClasses: string[];
properties: import("./type").TdDialogProps;
data: {
prefix: string;
classPrefix: string;
buttonVariant: string;
};
observers: {
'confirmBtn, cancelBtn'(confirm: any, cancel: any): void;
};
methods: {
onTplButtonTap(e: any): void;
onConfirm(): void;
onCancel(): void;
onClose(): void;
close(): void;
overlayClick(): void;
onActionTap(index: number): void;
openValueCBHandle(e: any): void;
openValueErrCBHandle(e: any): void;
};
}

View File

@@ -0,0 +1,149 @@
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
import props from './props';
import { isObject, toCamel } from '../common/utils';
import useCustomNavbar from '../mixins/using-custom-navbar';
const { prefix } = config;
const name = `${prefix}-dialog`;
let Dialog = class Dialog extends SuperComponent {
constructor() {
super(...arguments);
this.behaviors = [useCustomNavbar];
this.options = {
multipleSlots: true,
};
this.externalClasses = [
`${prefix}-class`,
`${prefix}-class-content`,
`${prefix}-class-confirm`,
`${prefix}-class-cancel`,
`${prefix}-class-action`,
];
this.properties = props;
this.data = {
prefix,
classPrefix: name,
buttonVariant: 'text',
};
this.observers = {
'confirmBtn, cancelBtn'(confirm, cancel) {
const { prefix, classPrefix, buttonLayout } = this.data;
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--${buttonLayout}`);
}
else {
cls.push(`${classPrefix}__button--text`);
externalCls.push(`${classPrefix}-button`);
}
Object.keys(buttonMap).forEach((key) => {
const btn = buttonMap[key];
const base = {
block: true,
rootClass: [...cls, `${classPrefix}__button--${key}`],
tClass: [...externalCls, `${prefix}-class-${key}`],
variant: rect.buttonVariant,
openType: '',
};
if (key === 'cancel' && rect.buttonVariant === 'base') {
base.theme = 'light';
}
if (typeof btn === 'string') {
rect[`_${key}`] = Object.assign(Object.assign({}, base), { content: btn });
}
else if (btn && typeof btn === 'object') {
rect[`_${key}`] = Object.assign(Object.assign({}, base), btn);
}
else {
rect[`_${key}`] = null;
}
});
this.setData(Object.assign({}, rect));
},
};
this.methods = {
onTplButtonTap(e) {
var _a, _b, _c;
const evtType = e.type;
const { type, extra } = e.target.dataset;
const button = this.data[`_${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)) {
(_a = this[toCamel(`on-${type}`)]) === null || _a === void 0 ? void 0 : _a.call(this, type);
}
if (evtType !== 'tap') {
const success = ((_c = (_b = e.detail) === null || _b === void 0 ? void 0 : _b.errMsg) === null || _c === void 0 ? void 0 : _c.indexOf('ok')) > -1;
this.triggerEvent(success ? 'open-type-event' : 'open-type-error-event', e.detail);
}
},
onConfirm() {
this.triggerEvent('confirm');
if (this._onConfirm) {
this._onConfirm();
this.close();
}
},
onCancel() {
this.triggerEvent('close', { trigger: 'cancel' });
this.triggerEvent('cancel');
if (this._onCancel) {
this._onCancel();
this.close();
}
},
onClose() {
this.triggerEvent('close', { trigger: 'close-btn' });
this.close();
},
close() {
this.setData({ visible: false });
},
overlayClick() {
if (this.properties.closeOnOverlayClick) {
this.triggerEvent('close', { trigger: 'overlay' });
this.close();
}
this.triggerEvent('overlay-click');
},
onActionTap(index) {
this.triggerEvent('action', { index });
if (this._onAction) {
this._onAction({ index });
this.close();
}
},
openValueCBHandle(e) {
this.triggerEvent('open-type-event', e.detail);
},
openValueErrCBHandle(e) {
this.triggerEvent('open-type-error-event', e.detail);
},
};
}
};
Dialog = __decorate([
wxComponent()
], Dialog);
export default Dialog;

View File

@@ -0,0 +1,9 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"t-popup": "../popup/popup",
"t-icon": "../icon/icon",
"t-button": "../button/button"
}
}

View File

@@ -0,0 +1,58 @@
<import src="../common/template/button.wxml" />
<import src="../common/template/icon.wxml" />
<wxs src="../common/utils.wxs" module="_" />
<wxs src="./dialog.wxs" module="_this" />
<t-popup
name="dialog"
style="{{_._style([style, customStyle])}}"
class="class"
t-class="{{classPrefix}}__wrapper"
visible="{{visible}}"
showOverlay="{{showOverlay}}"
closeOnOverlayClick="{{closeOnOverlayClick}}"
preventScrollThrough="{{preventScrollThrough}}"
overlayProps="{{overlayProps}}"
zIndex="{{zIndex}}"
placement="center"
usingCustomNavbar="{{usingCustomNavbar}}"
bind:visible-change="overlayClick"
>
<view slot="content" class="{{classPrefix}} {{prefix}}-class">
<slot name="top" />
<view wx:if="{{closeBtn}}" class="{{classPrefix}}__close-btn" bind:tap="onClose">
<template wx:if="{{_.isObject(closeBtn)}}" is="icon" data="{{ name: 'close', size: 22, ...closeBtn }}" />
<t-icon wx:else name="close" size="44rpx" />
</view>
<view class="{{classPrefix}}__content {{prefix}}-class-content">
<view wx:if="{{title}}" class="{{classPrefix}}__header">{{title}}</view>
<slot name="title" />
<view wx:if="{{content}}" class="{{classPrefix}}__body">
<text class="{{classPrefix}}__body-text">{{content}}</text>
</view>
<slot name="content" />
</view>
<slot name="middle" />
<view
class="{{_.cls(classPrefix + '__footer', [['column', buttonLayout === 'vertical'], ['full', buttonVariant == 'text' && actions.length == 0]])}}"
>
<block wx:if="{{actions}}">
<block wx:for="{{actions}}" wx:key="index">
<template
is="button"
data="{{block: true, type: 'action', extra: index, tClass: prefix + '-class-action', rootClass: _this.getActionClass(classPrefix, buttonLayout), ...item }}"
/>
</block>
</block>
<slot name="actions" />
<block wx:if="{{_cancel}}">
<template is="button" data="{{type: 'cancel', ..._cancel }}" />
</block>
<slot name="cancel-btn" />
<block wx:if="{{_confirm}}">
<template is="button" data="{{type: 'confirm', theme: 'primary', ..._confirm}}" />
</block>
<slot name="confirm-btn" />
</view>
</view>
</t-popup>

View File

@@ -0,0 +1,13 @@
module.exports.getTypeof = function (obj) {
return typeof obj;
};
module.exports.getActionClass = function (prefix, buttonLayout) {
var cls = [prefix + '__button', prefix + '__button--action'];
if (buttonLayout) {
cls.push(prefix + '__button--' + buttonLayout);
}
return cls.join(' ');
};

View File

@@ -0,0 +1,132 @@
.t-float-left {
float: left;
}
.t-float-right {
float: right;
}
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}
.t-dialog {
overflow: hidden;
width: var(--td-dialog-width, 622rpx);
border-radius: var(--td-dialog-border-radius, var(--td-radius-extra-large, 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-extra-large, 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-weight: bold;
font-size: var(--td-dialog-title-font-size, 36rpx);
line-height: var(--td-dialog-title-line-height, 52rpx);
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-size: var(--td-dialog-content-font-size, 32rpx);
color: var(--td-dialog-content-color, var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))));
line-height: var(--td-dialog-content-line-height, 48rpx);
}
.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 .t-dialog__button {
width: 100%;
}
.t-dialog__footer--full {
padding: var(--td-spacer-4, 64rpx) 0 0;
}
.t-dialog__button {
position: relative;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.t-dialog__button--horizontal + .t-dialog__button--horizontal {
margin-left: var(--td-spacer-1, 24rpx);
}
.t-dialog__button--vertical + .t-dialog__button--vertical {
margin-bottom: var(--td-spacer-1, 24rpx);
}
.t-dialog__button--text {
flex: 1;
--td-button-border-radius: 0;
--td-button-medium-height: 112rpx;
border-radius: 0;
}
.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;
}

View File

@@ -0,0 +1,44 @@
/// <reference types="miniprogram-api-typings" />
/// <reference types="miniprogram-api-typings" />
declare type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
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 _default: {
alert(options: DialogAlertOptionsType): Promise<unknown>;
confirm(options: DialogConfirmOptionsType): Promise<unknown>;
close(options?: DialogConfirmOptionsType): Promise<void>;
action(options: DialogActionOptionsType): Promise<{
index: number;
}>;
};
export default _default;

View File

@@ -0,0 +1,72 @@
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import props from './props';
import { getInstance } from '../common/utils';
const defaultOptions = {
actions: [],
buttonLayout: props.buttonLayout.value,
cancelBtn: props.cancelBtn.value,
closeOnOverlayClick: props.closeOnOverlayClick.value,
confirmBtn: props.confirmBtn.value,
content: '',
preventScrollThrough: props.preventScrollThrough.value,
showOverlay: props.showOverlay.value,
title: '',
visible: props.visible.value,
};
export default {
alert(options) {
const _a = Object.assign(Object.assign({}, defaultOptions), options), { context, selector = '#t-dialog' } = _a, otherOptions = __rest(_a, ["context", "selector"]);
const instance = getInstance(context, selector);
if (!instance)
return Promise.reject();
return new Promise((resolve) => {
instance.setData(Object.assign(Object.assign({ cancelBtn: '' }, otherOptions), { visible: true }));
instance._onConfirm = resolve;
});
},
confirm(options) {
const _a = Object.assign(Object.assign({}, defaultOptions), options), { context, selector = '#t-dialog' } = _a, otherOptions = __rest(_a, ["context", "selector"]);
const instance = getInstance(context, selector);
if (!instance)
return Promise.reject();
return new Promise((resolve, reject) => {
instance.setData(Object.assign(Object.assign({}, otherOptions), { visible: true }));
instance._onConfirm = resolve;
instance._onCancel = reject;
});
},
close(options) {
const { context, selector = '#t-dialog' } = Object.assign({}, options);
const instance = getInstance(context, selector);
if (instance) {
instance.close();
return Promise.resolve();
}
return Promise.reject();
},
action(options) {
const _a = Object.assign(Object.assign({}, defaultOptions), options), { context, selector = '#t-dialog', actions } = _a, otherOptions = __rest(_a, ["context", "selector", "actions"]);
const instance = getInstance(context, selector);
if (!instance)
return Promise.reject();
const { buttonLayout = 'vertical' } = 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) => {
instance.setData(Object.assign(Object.assign({ actions }, otherOptions), { buttonLayout, visible: true }));
instance._onAction = resolve;
});
},
};

View File

@@ -0,0 +1,3 @@
import { TdDialogProps } from './type';
declare const props: TdDialogProps;
export default props;

View File

@@ -0,0 +1,56 @@
const props = {
actions: {
type: Array,
},
buttonLayout: {
type: String,
value: 'horizontal',
},
cancelBtn: {
type: null,
},
closeBtn: {
type: null,
value: false,
},
closeOnOverlayClick: {
type: Boolean,
value: false,
},
confirmBtn: {
type: null,
},
content: {
type: String,
},
externalClasses: {
type: Array,
},
overlayProps: {
type: Object,
value: {},
},
preventScrollThrough: {
type: Boolean,
value: true,
},
showOverlay: {
type: Boolean,
value: true,
},
style: {
type: String,
value: '',
},
title: {
type: String,
},
visible: {
type: Boolean,
},
zIndex: {
type: Number,
value: 11500,
},
};
export default props;

View File

@@ -0,0 +1,68 @@
import { ButtonProps } from '../button/index';
import { TdOverlayProps as OverlayProps } from '../overlay/type';
export interface TdDialogProps {
actions?: {
type: ArrayConstructor;
value?: Array<ButtonProps>;
};
buttonLayout?: {
type: StringConstructor;
value?: 'horizontal' | 'vertical';
};
cancelBtn?: {
type: null;
value?: string | ButtonProps | null;
};
closeBtn?: {
type: null;
value?: boolean | ButtonProps | null;
};
closeOnOverlayClick?: {
type: BooleanConstructor;
value?: boolean;
};
confirmBtn?: {
type: null;
value?: string | ButtonProps | null;
};
content?: {
type: StringConstructor;
value?: string;
};
externalClasses?: {
type: ArrayConstructor;
value?: ['t-class', 't-class-content', 't-class-confirm', 't-class-cancel'];
};
overlayProps?: {
type: ObjectConstructor;
value?: OverlayProps;
};
preventScrollThrough?: {
type: BooleanConstructor;
value?: boolean;
};
showOverlay?: {
type: BooleanConstructor;
value?: boolean;
};
style?: {
type: StringConstructor;
value?: string;
};
title?: {
type: StringConstructor;
value?: string;
};
usingCustomNavbar?: {
type: BooleanConstructor;
value?: boolean;
};
visible?: {
type: BooleanConstructor;
value?: boolean;
};
zIndex?: {
type: NumberConstructor;
value?: number;
};
}

View File

@@ -0,0 +1 @@
export {};