个人消息
This commit is contained in:
limqhz
73
components/dialog/README.md
Normal file
73
components/dialog/README.md
Normal file
@@ -0,0 +1,73 @@
|
||||
---
|
||||
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"
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 反馈类对话框
|
||||
|
||||
<img src="https://tdesign.gtimg.com/miniprogram/readme/dialog-1.png" width="375px" height="50%">
|
||||
|
||||
{{ base }}
|
||||
|
||||
> 使用这种方式，对话框的 `visible` 是受控的，需要手动设置额 `visible` 为 `false` 才会关闭对话框。
|
||||
|
||||
### 确认类对话框
|
||||
{{ confirm }}
|
||||
|
||||
### 输入类对话框
|
||||
{{ inputDialog }}
|
||||
|
||||
### 命令调用
|
||||
{{ command }}
|
||||
|
||||
### 开发能力按钮
|
||||
|
||||
当传入的按钮类型为对象时，整个对象都将透传至 `t-button`，因此按钮可以直接使用开放能力
|
||||
|
||||
{{ button }}
|
||||
|
||||
## API
|
||||
### Dialog Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
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 组件属性。使用 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-content', 't-class-confirm', 't-class-cancel']` | N
|
||||
overlay-props | Object | {} | 透传至 Overlay 组件 | N
|
||||
prevent-scroll-through | Boolean | true | 防止滚动穿透 | N
|
||||
show-overlay | Boolean | true | 是否显示遮罩层 | N
|
||||
title | String / Slot | - | 标题 | N
|
||||
visible | Boolean | false | 控制对话框是否显示 | N
|
||||
z-index | Number | 11500 | 组件层级，样式默认为 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'`<br/>
|
||||
overlay-click | - | 如果蒙层存在，点击蒙层时触发
|
||||
confirm | - | 如果“确认”按钮存在，则点击“确认”按钮时触发
|
||||
action | `(index: number)` | 操作列表的点击时间，`index` 代表操作列表的顺序
|
||||
open-type-event | `(ButtonEventDetail)` | “确认”按钮具有开放能力的话，对应的成功回调
|
||||
open-type-error-event | `(ButtonError)` | “确认”按钮具有开放能力的话，对应的失败回调
|
||||
24
components/dialog/dialog.d.ts
vendored
Normal file
24
components/dialog/dialog.d.ts
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
export default class Dialog extends SuperComponent {
|
||||
// @ts-ignore
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
addGlobalClass: boolean;
|
||||
};
|
||||
externalClasses: string[];
|
||||
properties: import("./type").TdDialogProps;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
};
|
||||
methods: {
|
||||
onTplButtonTap(e: any): void;
|
||||
onConfirm(): void;
|
||||
onCancel(): void;
|
||||
close(): void;
|
||||
overlayClick(): void;
|
||||
onActionTap(e: any): void;
|
||||
openValueCBHandle(e: any): void;
|
||||
openValueErrCBHandle(e: any): void;
|
||||
};
|
||||
}
|
||||
90
components/dialog/dialog.js
Normal file
90
components/dialog/dialog.js
Normal file
@@ -0,0 +1,90 @@
|
||||
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';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-dialog`;
|
||||
let Dialog = class Dialog extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.options = {
|
||||
multipleSlots: true,
|
||||
addGlobalClass: 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,
|
||||
};
|
||||
this.methods = {
|
||||
onTplButtonTap(e) {
|
||||
var _a;
|
||||
const evtType = e.type;
|
||||
const { type } = e.target.dataset;
|
||||
const button = this.data[`${type}Btn`];
|
||||
const cbName = `bind${evtType}`;
|
||||
if (typeof button[cbName] === 'function') {
|
||||
button[cbName](e);
|
||||
}
|
||||
if (evtType !== 'tap') {
|
||||
const success = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.errMsg.indexOf('ok')) > -1;
|
||||
this.triggerEvent(success ? 'open-type-event' : 'open-type-error-event', e.detail);
|
||||
}
|
||||
},
|
||||
onConfirm() {
|
||||
this.triggerEvent('confirm');
|
||||
if (this._onComfirm) {
|
||||
this._onComfirm();
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
this.triggerEvent('close', { trigger: 'cancel' });
|
||||
this.triggerEvent('cancel');
|
||||
if (this._onCancel) {
|
||||
this._onCancel();
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.setData({ visible: false });
|
||||
},
|
||||
overlayClick() {
|
||||
if (this.properties.closeOnOverlayClick) {
|
||||
this.triggerEvent('close', { trigger: 'overlay' });
|
||||
}
|
||||
this.triggerEvent('overlayClick');
|
||||
},
|
||||
onActionTap(e) {
|
||||
const { index } = e.currentTarget.dataset;
|
||||
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;
|
||||
7
components/dialog/dialog.json
Normal file
7
components/dialog/dialog.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-popup": "../popup/popup",
|
||||
"t-button": "../button/button"
|
||||
}
|
||||
}
|
||||
81
components/dialog/dialog.wxml
Normal file
81
components/dialog/dialog.wxml
Normal file
@@ -0,0 +1,81 @@
|
||||
<import src="../common/template/button.wxml" />
|
||||
<wxs src="./dialog.wxs" module="_" />
|
||||
|
||||
<t-popup
|
||||
name="dialog"
|
||||
class="{{classPrefix}}__wrapper"
|
||||
visible="{{visible}}"
|
||||
showOverlay="{{showOverlay}}"
|
||||
closeOnOverlayClick="{{closeOnOverlayClick}}"
|
||||
preventScrollThrough="{{preventScrollThrough}}"
|
||||
overlayProps="{{overlayProps}}"
|
||||
zIndex="{{zIndex}}"
|
||||
placement="center"
|
||||
bind:visible-change="overlayClick"
|
||||
>
|
||||
<view slot="content" class="{{classPrefix}} {{prefix}}-class">
|
||||
<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 {{title ? '' : classPrefix + '__body--without-title'}}">
|
||||
<text class="{{classPrefix}}__body-text">{{content}}</text>
|
||||
</view>
|
||||
<slot name="content" />
|
||||
</view>
|
||||
<view
|
||||
class="{{classPrefix}}__footer {{classPrefix}}__footer--default {{buttonLayout === 'vertical' ? classPrefix + '__footer--column' : ''}}"
|
||||
>
|
||||
<t-button
|
||||
block
|
||||
class="{{classPrefix}}__footer-button-host"
|
||||
wx:if="{{actions}}"
|
||||
wx:for="{{actions}}"
|
||||
wx:key="action"
|
||||
data-index="{{index}}"
|
||||
t-class="{{classPrefix}}__button {{classPrefix}}__button-{{item.primary ? 'confirm' : 'cancel'}} {{prefix}}-class-action"
|
||||
bindtap="onActionTap"
|
||||
>
|
||||
{{item.name}}
|
||||
</t-button>
|
||||
<slot name="actions" />
|
||||
<t-button
|
||||
block
|
||||
class="{{classPrefix}}__footer-button-host {{classPrefix}}__footer-button--cancel"
|
||||
wx:if="{{cancelBtn && _.getTypeof(cancelBtn) == 'string'}}"
|
||||
t-class="{{classPrefix}}__button {{classPrefix}}__button-cancel {{confirmBtn ? classPrefix + '__button-half' : ''}} {{prefix}}-class-cancel"
|
||||
bindtap="onCancel"
|
||||
>
|
||||
{{cancelBtn}}
|
||||
</t-button>
|
||||
<block wx:elif="{{_.getTypeof(cancelBtn) == 'object'}}">
|
||||
<template
|
||||
is="button"
|
||||
data="{{...cancelBtn, block: true, type: 'cancel', externalClass: classPrefix + '__button ' + classPrefix + '__button-cancel ' + (cancelBtn ? classPrefix + '__button-half ' : ' ') + prefix + '-class-cancel',class: classPrefix + '__footer-button-host ' + classPrefix + '__footer-button--cancel' }}"
|
||||
></template>
|
||||
</block>
|
||||
<slot name="cancelBtn" />
|
||||
<t-button
|
||||
block
|
||||
class="{{classPrefix}}__footer-button-host {{classPrefix}}__footer-button--confirm"
|
||||
wx:if="{{confirmBtn && _.getTypeof(confirmBtn) == 'string'}}"
|
||||
t-class="{{classPrefix}}__button {{classPrefix}}__button-confirm {{cancelBtn ? classPrefix + '__button-half' : ''}} {{prefix}}-class-confirm"
|
||||
bind:tap="onConfirm"
|
||||
bind:getuserinfo="openValueCBHandle"
|
||||
bind:contact="openValueCBHandle"
|
||||
bind:getphonenumber="openValueCBHandle"
|
||||
bind:opensetting="openValueCBHandle"
|
||||
bind:launchapp="openValueCBHandle"
|
||||
bind:error="openValueErrCBHandle"
|
||||
>
|
||||
{{confirmBtn}}
|
||||
</t-button>
|
||||
<block wx:elif="{{_.getTypeof(confirmBtn) == 'object'}}">
|
||||
<template
|
||||
is="button"
|
||||
data="{{...confirmBtn, block: true, type: 'confirm', externalClass: classPrefix + '__button ' + classPrefix + '__button-confirm ' + (cancelBtn ? classPrefix + '__button-half ' : ' ') + prefix + '-class-confirm', class: classPrefix + '__footer-button-host ' + classPrefix + '__footer-button--confirm'}}"
|
||||
></template>
|
||||
</block>
|
||||
<slot name="confirmBtn" />
|
||||
</view>
|
||||
</view>
|
||||
</t-popup>
|
||||
3
components/dialog/dialog.wxs
Normal file
3
components/dialog/dialog.wxs
Normal file
@@ -0,0 +1,3 @@
|
||||
module.exports.getTypeof = function (obj) {
|
||||
return typeof obj;
|
||||
};
|
||||
152
components/dialog/dialog.wxss
Normal file
152
components/dialog/dialog.wxss
Normal file
@@ -0,0 +1,152 @@
|
||||
.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__wrapper .t-dialog {
|
||||
overflow: hidden;
|
||||
width: 644rpx;
|
||||
border-radius: 16rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
.t-dialog__wrapper .t-dialog__content {
|
||||
padding: 64rpx 48rpx;
|
||||
min-height: 176rpx;
|
||||
max-height: 776rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.t-dialog__wrapper .t-dialog__header {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
line-height: 1.5;
|
||||
color: #000000;
|
||||
}
|
||||
.t-dialog__wrapper .t-dialog__body {
|
||||
overflow-y: scroll;
|
||||
text-align: center;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
font-size: 32rpx;
|
||||
color: #888888;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
.t-dialog__wrapper .t-dialog__body--without-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
.t-dialog__wrapper .t-dialog__body-text {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.t-dialog__wrapper .t-dialog__body--left {
|
||||
text-align: left;
|
||||
}
|
||||
.t-dialog__wrapper .t-dialog__body--right {
|
||||
text-align: right;
|
||||
}
|
||||
.t-dialog__wrapper .t-dialog__footer {
|
||||
display: flex;
|
||||
}
|
||||
.t-dialog__wrapper .t-dialog__footer-button-host {
|
||||
width: 100%;
|
||||
}
|
||||
.t-dialog__wrapper .t-dialog__footer--column {
|
||||
flex-flow: column-reverse;
|
||||
}
|
||||
.t-dialog__wrapper .t-dialog__footer--column .t-dialog__button {
|
||||
width: 100%;
|
||||
}
|
||||
.t-dialog__wrapper .t-dialog__button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
font-size: 32rpx;
|
||||
padding: 0 48rpx;
|
||||
background-color: #fff;
|
||||
width: 644rpx;
|
||||
height: 112rpx;
|
||||
line-height: 112rpx;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
}
|
||||
.t-dialog__wrapper .t-dialog__button:before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-top: 1px solid #e7e7e7;
|
||||
border-left: 1px solid #e7e7e7;
|
||||
transform: scale(0.5);
|
||||
transform-origin: 0 0;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
}
|
||||
.t-dialog__wrapper .t-dialog__button-half {
|
||||
width: 322rpx;
|
||||
}
|
||||
.t-dialog__wrapper .t-dialog__button-confirm {
|
||||
color: #0052d9;
|
||||
font-weight: bold;
|
||||
}
|
||||
.t-dialog__wrapper .t-dialog__button-cancel {
|
||||
color: #000000;
|
||||
font-weight: normal;
|
||||
}
|
||||
.t-dialog__wrapper .t-dialog__button-bounce-enter {
|
||||
transform: translate3d(-50%, -50%, 0) scale(0.7);
|
||||
opacity: 0;
|
||||
}
|
||||
.t-dialog__wrapper .t-dialog__button-bounce-leave-active {
|
||||
transform: translate3d(-50%, -50%, 0) scale(0.9);
|
||||
opacity: 0;
|
||||
}
|
||||
.t-dialog__wrapper .t-dialog__button::after {
|
||||
border-radius: 0;
|
||||
border-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.t-dialog__wrapper .t-dialog__text + .t-dialog__input {
|
||||
margin-top: 48rpx;
|
||||
}
|
||||
.t-dialog__wrapper .t-dialog__input {
|
||||
width: 100%;
|
||||
background-color: #f0f0f0;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
border-radius: 16rpx / 2;
|
||||
height: 96rpx;
|
||||
line-height: 1.5;
|
||||
padding: 24rpx;
|
||||
margin-top: 24rpx;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
}
|
||||
.t-dialog__wrapper .t-dialog__input-placeholder {
|
||||
color: #bbbbbb;
|
||||
}
|
||||
42
components/dialog/index.d.ts
vendored
Normal file
42
components/dialog/index.d.ts
vendored
Normal file
@@ -0,0 +1,42 @@
|
||||
/// <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;
|
||||
}
|
||||
interface DialogComfirmOptionsType extends DialogAlertOptionsType {
|
||||
cancelButtonText?: string;
|
||||
}
|
||||
interface Action {
|
||||
name: string;
|
||||
primary?: boolean;
|
||||
style?: string;
|
||||
}
|
||||
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: DialogComfirmOptionsType): Promise<unknown>;
|
||||
close(options: DialogComfirmOptionsType): Promise<void>;
|
||||
action(options: DialogActionOptionsType): Promise<{
|
||||
index: number;
|
||||
}>;
|
||||
};
|
||||
export default _default;
|
||||
70
components/dialog/index.js
Normal file
70
components/dialog/index.js
Normal file
@@ -0,0 +1,70 @@
|
||||
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: false,
|
||||
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._onComfirm = 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._onComfirm = 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();
|
||||
if (!actions || (typeof actions === 'object' && (actions.length === 0 || actions.length > 7))) {
|
||||
console.warn('action 数量建议控制在1至7个');
|
||||
}
|
||||
return new Promise((resolve) => {
|
||||
instance.setData(Object.assign(Object.assign({ actions, buttonLayout: 'vertical' }, otherOptions), { visible: true }));
|
||||
instance._onAction = resolve;
|
||||
});
|
||||
},
|
||||
};
|
||||
3
components/dialog/props.d.ts
vendored
Normal file
3
components/dialog/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdDialogProps } from './type';
|
||||
declare const props: TdDialogProps;
|
||||
export default props;
|
||||
53
components/dialog/props.js
Normal file
53
components/dialog/props.js
Normal file
@@ -0,0 +1,53 @@
|
||||
const props = {
|
||||
actions: {
|
||||
type: Array,
|
||||
},
|
||||
buttonLayout: {
|
||||
type: String,
|
||||
value: 'horizontal',
|
||||
},
|
||||
cancelBtn: {
|
||||
type: String,
|
||||
optionalTypes: [Object],
|
||||
value: '',
|
||||
},
|
||||
closeOnOverlayClick: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
confirmBtn: {
|
||||
type: null,
|
||||
optionalTypes: [Object],
|
||||
value: '',
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
},
|
||||
externalClasses: {
|
||||
type: Array,
|
||||
},
|
||||
overlayProps: {
|
||||
type: Object,
|
||||
value: {},
|
||||
},
|
||||
preventScrollThrough: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
showOverlay: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
value: 11500,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
57
components/dialog/type.d.ts
vendored
Normal file
57
components/dialog/type.d.ts
vendored
Normal file
@@ -0,0 +1,57 @@
|
||||
import { ButtonProps } from '../button/index';
|
||||
export interface TdDialogProps {
|
||||
actions?: {
|
||||
type: ArrayConstructor;
|
||||
value?: Array<ButtonProps>;
|
||||
};
|
||||
buttonLayout?: {
|
||||
type: StringConstructor;
|
||||
value?: 'horizontal' | 'vertical';
|
||||
};
|
||||
cancelBtn?: {
|
||||
type: StringConstructor;
|
||||
optionalTypes: Array<ObjectConstructor>;
|
||||
value?: string | ButtonProps | null;
|
||||
};
|
||||
closeOnOverlayClick?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
confirmBtn?: {
|
||||
type: StringConstructor;
|
||||
optionalTypes: Array<ObjectConstructor>;
|
||||
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?: object;
|
||||
};
|
||||
preventScrollThrough?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
showOverlay?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
title?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
visible?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
zIndex?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
}
|
||||
1
components/dialog/type.js
Normal file
1
components/dialog/type.js
Normal file
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user