start
This commit is contained in:
58
miniprogram_npm/tdesign-miniprogram/dialog/README.en-US.md
Normal file
58
miniprogram_npm/tdesign-miniprogram/dialog/README.en-US.md
Normal 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 | -
|
||||
119
miniprogram_npm/tdesign-miniprogram/dialog/README.md
Normal file
119
miniprogram_npm/tdesign-miniprogram/dialog/README.md
Normal 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 | -
|
||||
28
miniprogram_npm/tdesign-miniprogram/dialog/dialog.d.ts
vendored
Normal file
28
miniprogram_npm/tdesign-miniprogram/dialog/dialog.d.ts
vendored
Normal 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;
|
||||
};
|
||||
}
|
||||
149
miniprogram_npm/tdesign-miniprogram/dialog/dialog.js
Normal file
149
miniprogram_npm/tdesign-miniprogram/dialog/dialog.js
Normal 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;
|
||||
9
miniprogram_npm/tdesign-miniprogram/dialog/dialog.json
Normal file
9
miniprogram_npm/tdesign-miniprogram/dialog/dialog.json
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {
|
||||
"t-popup": "../popup/popup",
|
||||
"t-icon": "../icon/icon",
|
||||
"t-button": "../button/button"
|
||||
}
|
||||
}
|
||||
58
miniprogram_npm/tdesign-miniprogram/dialog/dialog.wxml
Normal file
58
miniprogram_npm/tdesign-miniprogram/dialog/dialog.wxml
Normal 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>
|
||||
13
miniprogram_npm/tdesign-miniprogram/dialog/dialog.wxs
Normal file
13
miniprogram_npm/tdesign-miniprogram/dialog/dialog.wxs
Normal 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(' ');
|
||||
};
|
||||
132
miniprogram_npm/tdesign-miniprogram/dialog/dialog.wxss
Normal file
132
miniprogram_npm/tdesign-miniprogram/dialog/dialog.wxss
Normal 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;
|
||||
}
|
||||
44
miniprogram_npm/tdesign-miniprogram/dialog/index.d.ts
vendored
Normal file
44
miniprogram_npm/tdesign-miniprogram/dialog/index.d.ts
vendored
Normal 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;
|
||||
72
miniprogram_npm/tdesign-miniprogram/dialog/index.js
Normal file
72
miniprogram_npm/tdesign-miniprogram/dialog/index.js
Normal 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;
|
||||
});
|
||||
},
|
||||
};
|
||||
3
miniprogram_npm/tdesign-miniprogram/dialog/props.d.ts
vendored
Normal file
3
miniprogram_npm/tdesign-miniprogram/dialog/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdDialogProps } from './type';
|
||||
declare const props: TdDialogProps;
|
||||
export default props;
|
||||
56
miniprogram_npm/tdesign-miniprogram/dialog/props.js
Normal file
56
miniprogram_npm/tdesign-miniprogram/dialog/props.js
Normal 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;
|
||||
68
miniprogram_npm/tdesign-miniprogram/dialog/type.d.ts
vendored
Normal file
68
miniprogram_npm/tdesign-miniprogram/dialog/type.d.ts
vendored
Normal 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;
|
||||
};
|
||||
}
|
||||
1
miniprogram_npm/tdesign-miniprogram/dialog/type.js
Normal file
1
miniprogram_npm/tdesign-miniprogram/dialog/type.js
Normal file
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user