1.22
This commit is contained in:
zoujiandong
@@ -0,0 +1,47 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
### Button Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
block | Boolean | false | make button to be a block-level element | N
|
||||
content | String / Slot | - | button's children elements | N
|
||||
custom-dataset | Object | - | Typescript：`any` | N
|
||||
custom-style `v0.25.0` | String | - | \- | N
|
||||
disabled | Boolean | false | disable the button, make it can not be clicked | N
|
||||
external-classes | Array | - | `['t-class', 't-class-icon', 't-class-loading']` | N
|
||||
ghost | Boolean | false | make background-color to be transparent | N
|
||||
icon | String | - | icon name | N
|
||||
icon-props | Object | {} | icon properties | N
|
||||
loading | Boolean | false | set button to be loading state | N
|
||||
loading-props | Object | - | Typescript：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/button/type.ts) | N
|
||||
shape | String | rectangle | button shape。options：rectangle/square/round/circle | N
|
||||
size | String | medium | a button has three size。options：small/medium/large。Typescript：`SizeEnum` | N
|
||||
theme | String | default | button theme。options：default/primary/danger | N
|
||||
type | String | - | type of button element, same as formType of Miniprogram。options：submit/reset | N
|
||||
variant | String | base | button variant。options：base/outline/text | N
|
||||
open-type | String | - | options：contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar | N
|
||||
hover-stop-propagation | Boolean | false | \- | N
|
||||
hover-start-time | Number | 20 | \- | N
|
||||
hover-stay-time | Number | 70 | \- | N
|
||||
lang | String | en | options：en/zh_CN/zh_TW | N
|
||||
session-from | String | - | \- | N
|
||||
send-message-title | String | 当前标题 | \- | N
|
||||
send-message-path | String | 当前分享路径 | \- | N
|
||||
send-message-img | String | 截图 | \- | N
|
||||
app-parameter | String | - | \- | N
|
||||
show-message-card | Boolean | false | \- | N
|
||||
bindgetuserinfo | Eventhandle | - | \- | N
|
||||
bindcontact | Eventhandle | - | \- | N
|
||||
bindgetphonenumber | Eventhandle | - | \- | N
|
||||
binderror | Eventhandle | - | \- | N
|
||||
bindopensetting | Eventhandle | - | \- | N
|
||||
bindlaunchapp | Eventhandle | - | \- | N
|
||||
bindchooseavatar | Eventhandle | - | \- | N
|
||||
|
||||
### Button Events
|
||||
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
tap | `event` | \-
|
||||
@@ -0,0 +1,106 @@
|
||||
---
|
||||
title: Button 按钮
|
||||
description: 用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
|
||||
spline: base
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%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-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-83%25-blue" /></span>
|
||||
## 引入
|
||||
|
||||
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"t-button": "tdesign-miniprogram/button/button"
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 01 组件类型
|
||||
|
||||
基础按钮
|
||||
|
||||
{{ base }}
|
||||
|
||||
图标按钮
|
||||
|
||||
{{ icon-btn }}
|
||||
|
||||
幽灵按钮
|
||||
|
||||
{{ ghost-btn }}
|
||||
|
||||
组合按钮
|
||||
|
||||
{{ group-btn }}
|
||||
|
||||
通栏按钮
|
||||
|
||||
{{ block-btn }}
|
||||
|
||||
### 02 组件状态
|
||||
|
||||
按钮禁用态
|
||||
|
||||
{{ disabled }}
|
||||
|
||||
### 03 组件样式
|
||||
|
||||
按钮尺寸
|
||||
|
||||
{{ size }}
|
||||
|
||||
按钮形状
|
||||
|
||||
{{ shape }}
|
||||
|
||||
按钮主题
|
||||
|
||||
{{ theme }}
|
||||
|
||||
## API
|
||||
### Button Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
block | Boolean | false | 是否为块级元素 | N
|
||||
content | String / Slot | - | 按钮内容 | N
|
||||
custom-dataset | Object | - | 自定义 dataset，可通过 event.currentTarget.dataset.custom 获取。TS 类型：`any` | N
|
||||
custom-style `v0.25.0` | String | - | 自定义组件样式 | N
|
||||
disabled | Boolean | false | 禁用状态 | N
|
||||
external-classes | Array | - | 组件类名。`['t-class', 't-class-icon', 't-class-loading']` | N
|
||||
ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
|
||||
icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N
|
||||
loading | Boolean | false | 是否显示为加载状态 | N
|
||||
loading-props | Object | - | 加载loading样式。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/button/type.ts) | N
|
||||
shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N
|
||||
size | String | medium | 组件尺寸。可选项：extra-small/small/medium/large。TS 类型：`SizeEnum` | N
|
||||
theme | String | default | 组件风格，依次为品牌色、危险色。可选项：default/primary/danger/light | N
|
||||
type | String | - | 同小程序的 formType。可选项：submit/reset | N
|
||||
variant | String | base | 按钮形式，基础、线框、文字。可选项：base/outline/dashed/text | N
|
||||
open-type | String | - | 微信开放能力。<br />具体释义：<br />`contact` 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html">具体说明</a> （*小程序插件中不能使用*）；<br />`share` 触发用户转发，使用前建议先阅读<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#使用指引">使用指引</a>；<br />`getPhoneNumber` 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息，<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html">具体说明</a> （*小程序插件中不能使用*）；<br />`getUserInfo` 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 （*小程序插件中不能使用*）；<br />`launchApp` 打开APP，可以通过 app-parameter 属性设定向 APP 传的参数<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html">具体说明</a>；<br />`openSetting` 打开授权设置页；<br />`feedback` 打开“意见反馈”页面，用户可提交反馈内容并上传<a href="https://developers.weixin.qq.com/miniprogram/dev/api/base/debug/wx.getLogManager.html">日志</a>，开发者可以登录<a href="https://mp.weixin.qq.com/">小程序管理后台</a>后进入左侧菜单“客服反馈”页面获取到反馈内容；<br />`chooseAvatar` 获取用户头像，可以从 bindchooseavatar 回调中获取到头像信息。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。可选项：contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar | N
|
||||
hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | N
|
||||
hover-start-time | Number | 20 | 按住后多久出现点击态，单位毫秒 | N
|
||||
hover-stay-time | Number | 70 | 手指松开后点击态保留时间，单位毫秒 | N
|
||||
lang | String | en | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。。<br />具体释义：<br />`en` 英文；<br />`zh_CN` 简体中文；<br />`zh_TW` 繁体中文。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。可选项：en/zh_CN/zh_TW | N
|
||||
session-from | String | - | 会话来源，open-type="contact"时有效 | N
|
||||
send-message-title | String | 当前标题 | 会话内消息卡片标题，open-type="contact"时有效 | N
|
||||
send-message-path | String | 当前分享路径 | 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 | N
|
||||
send-message-img | String | 截图 | 会话内消息卡片图片，open-type="contact"时有效 | N
|
||||
app-parameter | String | - | 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 | N
|
||||
show-message-card | Boolean | false | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 | N
|
||||
bindgetuserinfo | Eventhandle | - | 用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与<a href="https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserInfo.html">wx.getUserInfo</a>返回的一致，open-type="getUserInfo"时有效 | N
|
||||
bindcontact | Eventhandle | - | 客服消息回调，open-type="contact"时有效 | N
|
||||
bindgetphonenumber | Eventhandle | - | 获取用户手机号回调，open-type=getPhoneNumber时有效 | N
|
||||
binderror | Eventhandle | - | 当使用开放能力时，发生错误的回调，open-type=launchApp时有效 | N
|
||||
bindopensetting | Eventhandle | - | 在打开授权设置页后回调，open-type=openSetting时有效 | N
|
||||
bindlaunchapp | Eventhandle | - | 打开 APP 成功的回调，open-type=launchApp时有效 | N
|
||||
bindchooseavatar | Eventhandle | - | 获取用户头像回调，open-type=chooseAvatar时有效 | N
|
||||
|
||||
### Button Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
tap | `event` | 点击时触发
|
||||
@@ -0,0 +1,32 @@
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
import type { TdButtonProps } from './type';
|
||||
export interface ButtonProps extends TdButtonProps {
|
||||
}
|
||||
export default class Button extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
behaviors: string[];
|
||||
properties: TdButtonProps;
|
||||
data: {
|
||||
prefix: string;
|
||||
className: string;
|
||||
classPrefix: string;
|
||||
};
|
||||
observers: {
|
||||
'theme, size, plain, block, shape, disabled, loading'(): void;
|
||||
icon(icon: any): void;
|
||||
};
|
||||
lifetimes: {
|
||||
attached(): void;
|
||||
};
|
||||
methods: {
|
||||
setClass(): void;
|
||||
getuserinfo(e: any): void;
|
||||
contact(e: any): void;
|
||||
getphonenumber(e: any): void;
|
||||
error(e: any): void;
|
||||
opensetting(e: any): void;
|
||||
launchapp(e: any): void;
|
||||
chooseavatar(e: any): void;
|
||||
handleTap(e: any): void;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
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 { canIUseFormFieldButton } from '../common/version';
|
||||
import { setIcon } from '../common/utils';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-button`;
|
||||
let Button = class Button extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [`${prefix}-class`, `${prefix}-class-icon`, `${prefix}-class-loading`];
|
||||
this.behaviors = canIUseFormFieldButton() ? ['wx://form-field-button'] : [];
|
||||
this.properties = props;
|
||||
this.data = {
|
||||
prefix,
|
||||
className: '',
|
||||
classPrefix: name,
|
||||
};
|
||||
this.observers = {
|
||||
'theme, size, plain, block, shape, disabled, loading'() {
|
||||
this.setClass();
|
||||
},
|
||||
icon(icon) {
|
||||
const obj = setIcon('icon', icon, '');
|
||||
this.setData(Object.assign({}, obj));
|
||||
},
|
||||
};
|
||||
this.lifetimes = {
|
||||
attached() {
|
||||
this.setClass();
|
||||
},
|
||||
};
|
||||
this.methods = {
|
||||
setClass() {
|
||||
const classList = [
|
||||
name,
|
||||
`${prefix}-class`,
|
||||
`${name}--${this.data.theme || 'default'}`,
|
||||
`${name}--size-${this.data.size || 'medium'}`,
|
||||
`${name}--${this.data.shape || 'rectangle'}`,
|
||||
`${name}--${this.data.variant || 'base'}`,
|
||||
];
|
||||
if (this.data.block) {
|
||||
classList.push(`${name}--block`);
|
||||
}
|
||||
if (this.data.disabled) {
|
||||
classList.push(`${name}--disabled`);
|
||||
}
|
||||
if (this.data.ghost) {
|
||||
classList.push(`${name}--ghost`);
|
||||
}
|
||||
this.setData({
|
||||
className: classList.join(' '),
|
||||
});
|
||||
},
|
||||
getuserinfo(e) {
|
||||
this.triggerEvent('getuserinfo', e.detail);
|
||||
},
|
||||
contact(e) {
|
||||
this.triggerEvent('contact', e.detail);
|
||||
},
|
||||
getphonenumber(e) {
|
||||
this.triggerEvent('getphonenumber', e.detail);
|
||||
},
|
||||
error(e) {
|
||||
this.triggerEvent('error', e.detail);
|
||||
},
|
||||
opensetting(e) {
|
||||
this.triggerEvent('opensetting', e.detail);
|
||||
},
|
||||
launchapp(e) {
|
||||
this.triggerEvent('launchapp', e.detail);
|
||||
},
|
||||
chooseavatar(e) {
|
||||
this.triggerEvent('chooseavatar', e.detail);
|
||||
},
|
||||
handleTap(e) {
|
||||
if (this.data.disabled)
|
||||
return;
|
||||
this.triggerEvent('tap', e);
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
Button = __decorate([
|
||||
wxComponent()
|
||||
], Button);
|
||||
export default Button;
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-icon": "../icon/icon",
|
||||
"t-loading": "../loading/loading"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
<import src="../common/template/icon.wxml" />
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
|
||||
<button
|
||||
style="{{ customStyle }}"
|
||||
data-custom="{{ customDataset }}"
|
||||
class="{{className}}"
|
||||
form-type="{{type}}"
|
||||
open-type="{{disabled ? '' : openType}}"
|
||||
hover-stop-propagation="{{hoverStopPropagation}}"
|
||||
hover-start-time="{{hoverStartTime}}"
|
||||
hover-stay-time="{{hoverStayTime}}"
|
||||
lang="{{lang}}"
|
||||
session-from="{{sessionFrom}}"
|
||||
hover-class="{{disabled ? '' : classPrefix + '--hover'}}"
|
||||
send-message-title="{{sendMessageTitle}}"
|
||||
send-message-path="{{sendMessagePath}}"
|
||||
send-message-img="{{sendMessageImg}}"
|
||||
app-parameter="{{appParameter}}"
|
||||
show-message-card="{{showMessageCard}}"
|
||||
catch:tap="handleTap"
|
||||
bind:getuserinfo="getuserinfo"
|
||||
bind:contact="contact"
|
||||
bind:getphonenumber="getphonenumber"
|
||||
bind:error="error"
|
||||
bind:opensetting="opensetting"
|
||||
bind:launchapp="launchapp"
|
||||
bind:chooseavatar="chooseavatar"
|
||||
aria-label="{{ariaLabel}}"
|
||||
>
|
||||
<template
|
||||
wx:if="{{iconName || _.isNoEmptyObj(iconData)}}"
|
||||
is="icon"
|
||||
data="{{class: classPrefix + '__icon', tClass: prefix + '-class-icon', ariaHidden: true, name: iconName, ...iconData}}"
|
||||
/>
|
||||
<t-loading
|
||||
wx:if="{{loading}}"
|
||||
class="{{classPrefix}}__loading"
|
||||
delay="{{loadingProps.delay || 0}}"
|
||||
duration="{{loadingProps.duration || 800}}"
|
||||
indicator="{{loadingProps.indicator || true}}"
|
||||
inheritColor="{{loadingProps.indicator || false}}"
|
||||
layout="{{loadingProps.layout || 'horizontal'}}"
|
||||
pause="{{loadingProps.pause || false}}"
|
||||
progress="{{loadingProps.progress}}"
|
||||
reverse="{{loadingProps.reverse}}"
|
||||
size="{{loadingProps.size || '40rpx'}}"
|
||||
text="{{loadingProps.text }}"
|
||||
theme="{{loadingProps.theme || 'circular'}}"
|
||||
loading
|
||||
t-class="{{classPrefix}}__loading--wrapper"
|
||||
t-class-indicator="{{classPrefix}}__loading--indicator {{prefix}}-class-loading"
|
||||
></t-loading>
|
||||
<view class="{{classPrefix}}__content">
|
||||
<slot name="content" />
|
||||
<block>{{content}}</block>
|
||||
<slot />
|
||||
</view>
|
||||
</button>
|
||||
@@ -0,0 +1,391 @@
|
||||
.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-button--size-extra-small {
|
||||
font-size: var(--td-button-extra-small-font-size, var(--td-font-size-base, 28rpx));
|
||||
padding-left: var(--td-button-extra-small-padding-horizontal, 16rpx);
|
||||
padding-right: var(--td-button-extra-small-padding-horizontal, 16rpx);
|
||||
height: var(--td-button-extra-small-height, 56rpx);
|
||||
line-height: var(--td-button-extra-small-height, 56rpx);
|
||||
}
|
||||
.t-button--size-extra-small .t-button__icon {
|
||||
font-size: var(--td-button-extra-small-icon-font-size, 36rpx);
|
||||
}
|
||||
.t-button--size-small {
|
||||
font-size: var(--td-button-small-font-size, var(--td-font-size-base, 28rpx));
|
||||
padding-left: var(--td-button-small-padding-horizontal, 24rpx);
|
||||
padding-right: var(--td-button-small-padding-horizontal, 24rpx);
|
||||
height: var(--td-button-small-height, 64rpx);
|
||||
line-height: var(--td-button-small-height, 64rpx);
|
||||
}
|
||||
.t-button--size-small .t-button__icon {
|
||||
font-size: var(--td-button-small-icon-font-size, 36rpx);
|
||||
}
|
||||
.t-button--size-medium {
|
||||
font-size: var(--td-button-medium-font-size, var(--td-font-size-m, 32rpx));
|
||||
padding-left: var(--td-button-medium-padding-horizontal, 32rpx);
|
||||
padding-right: var(--td-button-medium-padding-horizontal, 32rpx);
|
||||
height: var(--td-button-medium-height, 80rpx);
|
||||
line-height: var(--td-button-medium-height, 80rpx);
|
||||
}
|
||||
.t-button--size-medium .t-button__icon {
|
||||
font-size: var(--td-button-medium-icon-font-size, 40rpx);
|
||||
}
|
||||
.t-button--size-large {
|
||||
font-size: var(--td-button-large-font-size, var(--td-font-size-m, 32rpx));
|
||||
padding-left: var(--td-button-large-padding-horizontal, 40rpx);
|
||||
padding-right: var(--td-button-large-padding-horizontal, 40rpx);
|
||||
height: var(--td-button-large-height, 96rpx);
|
||||
line-height: var(--td-button-large-height, 96rpx);
|
||||
}
|
||||
.t-button--size-large .t-button__icon {
|
||||
font-size: var(--td-button-large-icon-font-size, 48rpx);
|
||||
}
|
||||
.t-button--default {
|
||||
color: var(--td-button-default-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
background-color: var(--td-button-default-bg-color, var(--td-gray-color-3, #e7e7e7));
|
||||
}
|
||||
.t-button--default::after {
|
||||
border-width: var(--td-button-border-width, 4rpx);
|
||||
border-color: var(--td-button-default-border-color, var(--td-gray-color-3, #e7e7e7));
|
||||
}
|
||||
.t-button--default.t-button--hover {
|
||||
z-index: 0;
|
||||
}
|
||||
.t-button--default.t-button--hover::after {
|
||||
background-color: var(--td-button-default-active-bg-color, var(--td-gray-color-5, #c5c5c5));
|
||||
}
|
||||
.t-button--default.t-button--disabled {
|
||||
color: var(--td-button-default-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
|
||||
background-color: var(--td-button-default-disabled-bg, var(--td-gray-color-2, #eeeeee));
|
||||
}
|
||||
.t-button--default.t-button--disabled::after {
|
||||
border-color: var(--td-button-default-disabled-border-color, var(--td-gray-color-2, #eeeeee));
|
||||
}
|
||||
.t-button--primary {
|
||||
color: var(--td-button-primary-color, var(--td-text-anti-primary-color, #fff));
|
||||
background-color: var(--td-button-primary-bg-color, var(--td-primary-color, #0052d9));
|
||||
}
|
||||
.t-button--primary::after {
|
||||
border-width: var(--td-button-border-width, 4rpx);
|
||||
border-color: var(--td-button-primary-border-color, var(--td-primary-color, #0052d9));
|
||||
}
|
||||
.t-button--primary.t-button--hover {
|
||||
z-index: 0;
|
||||
}
|
||||
.t-button--primary.t-button--hover::after {
|
||||
background-color: var(--td-button-primary-active-bg-color, var(--td-primary-color-9, #0034b5));
|
||||
}
|
||||
.t-button--primary.t-button--disabled {
|
||||
color: var(--td-button-primary-disabled-color, var(--td-text-anti-primary-color, #fff));
|
||||
background-color: var(--td-button-primary-disabled-bg, var(--td-primary-color-3, #bbd3fb));
|
||||
}
|
||||
.t-button--primary.t-button--disabled::after {
|
||||
border-color: var(--td-button-primary-disabled-border-color, var(--td-primary-color-3, #bbd3fb));
|
||||
}
|
||||
.t-button--light {
|
||||
color: var(--td-button-light-color, var(--td-primary-color, #0052d9));
|
||||
background-color: var(--td-button-light-bg-color, var(--td-primary-color-1, #ecf2fe));
|
||||
}
|
||||
.t-button--light::after {
|
||||
border-width: var(--td-button-border-width, 4rpx);
|
||||
border-color: var(--td-button-light-border-color, var(--td-primary-color-1, #ecf2fe));
|
||||
}
|
||||
.t-button--light.t-button--hover {
|
||||
z-index: 0;
|
||||
}
|
||||
.t-button--light.t-button--hover::after {
|
||||
background-color: var(--td-button-light-active-bg-color, var(--td-primary-color-2, #d4e3fc));
|
||||
}
|
||||
.t-button--light.t-button--disabled {
|
||||
color: var(--td-button-light-disabled-color, var(--td-primary-color-3, #bbd3fb));
|
||||
background-color: var(--td-button-light-disabled-bg, var(--td-primary-color-1, #ecf2fe));
|
||||
}
|
||||
.t-button--light.t-button--disabled::after {
|
||||
border-color: var(--td-button-light-disabled-border-color, var(--td-primary-color-1, #ecf2fe));
|
||||
}
|
||||
.t-button--gdxz {
|
||||
color: var(--td-button-danger-color, var(--td-text-anti-primary-color, #fff));
|
||||
background-color: var(--td-button-danger-bg-color, var(--td-error-color, var(--td-error-color-6, #3CC7C0)));
|
||||
}
|
||||
.t-button--danger {
|
||||
color: var(--td-button-danger-color, var(--td-text-anti-primary-color, #fff));
|
||||
background-color: var(--td-button-danger-bg-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
|
||||
}
|
||||
.t-button--danger::after {
|
||||
border-width: var(--td-button-border-width, 4rpx);
|
||||
border-color: var(--td-button-danger-border-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
|
||||
}
|
||||
.t-button--danger.t-button--hover {
|
||||
z-index: 0;
|
||||
}
|
||||
.t-button--danger.t-button--hover::after {
|
||||
background-color: var(--td-button-danger-active-bg-color, var(--td-error-color-7, #c9353f));
|
||||
}
|
||||
.t-button--danger.t-button--disabled {
|
||||
color: var(--td-button-danger-disabled-color, var(--td-text-anti-primary-color, #fff));
|
||||
background-color: var(--td-button-danger-disabled-bg, var(--td-error-color-3, #f8b9be));
|
||||
}
|
||||
.t-button--danger.t-button--disabled::after {
|
||||
border-color: var(--td-button-danger-disabled-border-color, var(--td-error-color-3, #f8b9be));
|
||||
}
|
||||
.t-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
background-image: none;
|
||||
transition: all 0.3s;
|
||||
touch-action: manipulation;
|
||||
border-radius: var(--td-button-border-radius, var(--td-radius-default, 12rpx));
|
||||
outline: none;
|
||||
font-family: PingFang SC, Microsoft YaHei, Arial Regular;
|
||||
font-weight: var(--td-button-font-weight, 600);
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
/* stylelint-disable-next-line */
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.t-button::after {
|
||||
border-radius: calc(var(--td-button-border-radius, var(--td-radius-default, 12rpx)) * 2);
|
||||
}
|
||||
.t-button--text {
|
||||
color: var(--td-button-default-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
background: none;
|
||||
}
|
||||
.t-button--text::after {
|
||||
border: 0;
|
||||
}
|
||||
.t-button--text.t-button--hover::after {
|
||||
background-color: var(--td-button-text-active-bg-color, var(--td-primary-color-1, #ecf2fe));
|
||||
}
|
||||
.t-button--text.t-button--primary {
|
||||
color: var(--td-button-primary-text-color, var(--td-primary-color, #0052d9));
|
||||
background: none;
|
||||
}
|
||||
.t-button--text.t-button--primary.t-button--disabled {
|
||||
color: var(--td-button-primary-text-disabled-color, var(--td-primary-color-3, #bbd3fb));
|
||||
background: none;
|
||||
}
|
||||
.t-button--text.t-button--danger {
|
||||
color: var(--td-button-danger-text-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
|
||||
background: none;
|
||||
}
|
||||
.t-button--text.t-button--danger.t-button--disabled {
|
||||
color: var(--td-button-danger-text-disabled-color, var(--td-button-danger-disabled-color, var(--td-text-anti-primary-color, #fff)));
|
||||
background: none;
|
||||
}
|
||||
.t-button--text.t-button--light {
|
||||
color: var(--td-button-light-text-color, var(--td-primary-color, #0052d9));
|
||||
background: none;
|
||||
}
|
||||
.t-button--text.t-button--disabled {
|
||||
color: var(--td-button-default-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
|
||||
}
|
||||
.t-button--ghost {
|
||||
background-color: transparent;
|
||||
color: var(--td-button-ghost-color, var(--td-bg-color-block, #fff));
|
||||
}
|
||||
.t-button--ghost::after {
|
||||
border-color: var(--td-button-ghost-border-color, var(--td-button-ghost-color, var(--td-bg-color-block, #fff)));
|
||||
}
|
||||
.t-button--ghost.t-button--hover::after {
|
||||
background: none;
|
||||
}
|
||||
.t-button--ghost.t-button--primary {
|
||||
color: var(--td-button-ghost-primary-color, var(--td-primary-color, #0052d9));
|
||||
}
|
||||
.t-button--ghost.t-button--primary::after {
|
||||
border-color: var(--td-button-ghost-primary-border-color, var(--td-primary-color, #0052d9));
|
||||
}
|
||||
.t-button--ghost.t-button--danger {
|
||||
color: var(--td-button-ghost-danger-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
|
||||
}
|
||||
.t-button--ghost.t-button--danger::after {
|
||||
border-color: var(--td-button-ghost-danger-border-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
|
||||
}
|
||||
.t-button--ghost.t-button--disabled {
|
||||
background-color: transparent;
|
||||
color: var(--td-button-ghost-disabled-color, rgba(255, 255, 255, 0.35));
|
||||
}
|
||||
.t-button--ghost.t-button--disabled::after {
|
||||
border-color: var(--td-button-ghost-disabled-color, rgba(255, 255, 255, 0.35));
|
||||
}
|
||||
.t-button--outline {
|
||||
background-color: transparent;
|
||||
}
|
||||
.t-button--outline::after {
|
||||
border-color: var(--td-button-default-border-color, var(--td-gray-color-3, #e7e7e7));
|
||||
}
|
||||
.t-button--outline.t-button--hover::after {
|
||||
background-color: var(--td-button-outline-active-bg-color, var(--td-gray-color-1, #f3f3f3));
|
||||
}
|
||||
.t-button--outline.t-button--primary {
|
||||
color: var(--td-button-primary-outline-color, var(--td-primary-color, #0052d9));
|
||||
}
|
||||
.t-button--outline.t-button--primary::after {
|
||||
border-color: var(--td-button-primary-outline-border-color, var(--td-button-primary-outline-color, var(--td-primary-color, #0052d9)));
|
||||
}
|
||||
.t-button--outline.t-button--primary.t-button--disabled {
|
||||
background-color: transparent;
|
||||
color: var(--td-button-primary-outline-disabled-color, var(--td-primary-color-3, #bbd3fb));
|
||||
}
|
||||
.t-button--outline.t-button--primary.t-button--disabled::after {
|
||||
border-color: var(--td-button-primary-outline-disabled-color, var(--td-primary-color-3, #bbd3fb));
|
||||
}
|
||||
.t-button--outline.t-button--danger {
|
||||
color: var(--td-button-danger-outline-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
|
||||
}
|
||||
.t-button--outline.t-button--danger::after {
|
||||
border-color: var(--td-button-danger-outline-border-color, var(--td-button-danger-outline-color, var(--td-error-color, var(--td-error-color-6, #e34d59))));
|
||||
}
|
||||
.t-button--outline.t-button--danger.t-button--disabled {
|
||||
background-color: transparent;
|
||||
color: var(--td-button-danger-outline-disabled-color, var(--td-button-danger-disabled-color, var(--td-text-anti-primary-color, #fff)));
|
||||
}
|
||||
.t-button--outline.t-button--danger.t-button--disabled::after {
|
||||
border-color: var(--td-button-danger-outline-disabled-color, var(--td-button-danger-disabled-color, var(--td-text-anti-primary-color, #fff)));
|
||||
}
|
||||
.t-button--outline.t-button--light {
|
||||
color: var(--td-button-light-outline-color, var(--td-primary-color, #0052d9));
|
||||
background-color: var(--td-button-light-outline-bg-color, var(--td-primary-color-1, #ecf2fe));
|
||||
}
|
||||
.t-button--outline.t-button--light::after {
|
||||
border-color: var(--td-button-light-outline-border-color, var(--td-button-light-outline-color, var(--td-primary-color, #0052d9)));
|
||||
}
|
||||
.t-button--outline.t-button--light.t-button--disabled {
|
||||
background-color: transparent;
|
||||
color: var(--td-button-light-outline-disabled-color, var(--td-primary-color-3, #bbd3fb));
|
||||
}
|
||||
.t-button--outline.t-button--light.t-button--disabled::after {
|
||||
border-color: var(--td-button-light-outline-disabled-color, var(--td-primary-color-3, #bbd3fb));
|
||||
}
|
||||
.t-button--dashed {
|
||||
background-color: transparent;
|
||||
border-style: dashed;
|
||||
}
|
||||
.t-button--dashed.t-button--primary {
|
||||
color: var(--td-button-primary-dashed-color, var(--td-primary-color, #0052d9));
|
||||
}
|
||||
.t-button--dashed.t-button--primary::after {
|
||||
border-color: var(--td-button-primary-dashed-border-color, var(--td-button-primary-dashed-color, var(--td-primary-color, #0052d9)));
|
||||
}
|
||||
.t-button--dashed.t-button--primary.t-button--disabled {
|
||||
background-color: transparent;
|
||||
color: var(--td-button-primary-dashed-disabled-color, var(--td-primary-color-3, #bbd3fb));
|
||||
}
|
||||
.t-button--dashed.t-button--primary.t-button--disabled::after {
|
||||
border-color: var(--td-button-primary-dashed-disabled-color, var(--td-primary-color-3, #bbd3fb));
|
||||
}
|
||||
.t-button--dashed.t-button--danger {
|
||||
color: var(--td-button-danger-dashed-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
|
||||
}
|
||||
.t-button--dashed.t-button--danger::after {
|
||||
border-color: var(--td-button-danger-dashed-border-color, var(--td-button-danger-dashed-color, var(--td-error-color, var(--td-error-color-6, #e34d59))));
|
||||
}
|
||||
.t-button--dashed.t-button--danger.t-button--disabled {
|
||||
background-color: transparent;
|
||||
color: var(--td-button-danger-dashed-disabled-color, var(--td-button-danger-disabled-color, var(--td-text-anti-primary-color, #fff)));
|
||||
}
|
||||
.t-button--dashed.t-button--danger.t-button--disabled::after {
|
||||
border-color: var(--td-button-danger-dashed-disabled-color, var(--td-button-danger-disabled-color, var(--td-text-anti-primary-color, #fff)));
|
||||
}
|
||||
.t-button__loading + .t-button__content:not(:empty),
|
||||
.t-button__icon + .t-button__content:not(:empty) {
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
.t-button__icon {
|
||||
border-radius: var(--td-button-icon-border-radius, 8rpx);
|
||||
}
|
||||
.t-button--round.t-button--size-large {
|
||||
border-radius: calc(var(--td-button-large-height, 96rpx) / 2);
|
||||
}
|
||||
.t-button--round.t-button--size-medium {
|
||||
border-radius: calc(var(--td-button-medium-height, 80rpx) / 2);
|
||||
}
|
||||
.t-button--round.t-button--size-small {
|
||||
border-radius: calc(var(--td-button-small-height, 64rpx) / 2);
|
||||
}
|
||||
.t-button--round.t-button--size-extra-small {
|
||||
border-radius: calc(28px / 2);
|
||||
}
|
||||
.t-button--square {
|
||||
padding: 0;
|
||||
}
|
||||
.t-button--square.t-button--size-large {
|
||||
width: var(--td-button-large-height, 96rpx);
|
||||
}
|
||||
.t-button--square.t-button--size-medium {
|
||||
width: var(--td-button-medium-height, 80rpx);
|
||||
}
|
||||
.t-button--square.t-button--size-small {
|
||||
width: var(--td-button-small-height, 64rpx);
|
||||
}
|
||||
.t-button--square.t-button--size-extra-small {
|
||||
width: 28px;
|
||||
}
|
||||
.t-button--circle {
|
||||
padding: 0;
|
||||
}
|
||||
.t-button--circle.t-button--size-large {
|
||||
border-radius: 50%;
|
||||
width: var(--td-button-large-height, 96rpx);
|
||||
}
|
||||
.t-button--circle.t-button--size-medium {
|
||||
border-radius: 50%;
|
||||
width: var(--td-button-medium-height, 80rpx);
|
||||
}
|
||||
.t-button--circle.t-button--size-small {
|
||||
border-radius: 50%;
|
||||
width: var(--td-button-small-height, 64rpx);
|
||||
}
|
||||
.t-button--circle.t-button--size-extra-small {
|
||||
border-radius: 50%;
|
||||
width: 28px;
|
||||
}
|
||||
.t-button--block {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.t-button--disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.t-button__loading--wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.t-button__loading--indicator {
|
||||
color: var(--td-white-color-1, #fff);
|
||||
}
|
||||
.t-button.t-button--hover::after {
|
||||
z-index: -1;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from './props';
|
||||
export * from './type';
|
||||
export * from './button';
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from './props';
|
||||
export * from './type';
|
||||
export * from './button';
|
||||
@@ -0,0 +1,3 @@
|
||||
import { TdButtonProps } from './type';
|
||||
declare const props: TdButtonProps;
|
||||
export default props;
|
||||
@@ -0,0 +1,100 @@
|
||||
const props = {
|
||||
block: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
},
|
||||
customDataset: {
|
||||
type: null,
|
||||
},
|
||||
customStyle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
externalClasses: {
|
||||
type: Array,
|
||||
},
|
||||
ghost: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
icon: {
|
||||
type: null,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
loadingProps: {
|
||||
type: Object,
|
||||
},
|
||||
shape: {
|
||||
type: String,
|
||||
value: 'rectangle',
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
value: 'medium',
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
value: 'default',
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
},
|
||||
variant: {
|
||||
type: String,
|
||||
value: 'base',
|
||||
},
|
||||
openType: {
|
||||
type: String,
|
||||
},
|
||||
hoverStopPropagation: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
hoverStartTime: {
|
||||
type: Number,
|
||||
value: 20,
|
||||
},
|
||||
hoverStayTime: {
|
||||
type: Number,
|
||||
value: 70,
|
||||
},
|
||||
lang: {
|
||||
type: String,
|
||||
value: 'en',
|
||||
},
|
||||
sessionFrom: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
sendMessageTitle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
sendMessagePath: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
sendMessageImg: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
appParameter: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
showMessageCard: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
@@ -0,0 +1,108 @@
|
||||
import { LoadingProps } from '../loading/index';
|
||||
import { SizeEnum } from '../common/common';
|
||||
export interface TdButtonProps {
|
||||
block?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
content?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
customDataset?: {
|
||||
type: ObjectConstructor;
|
||||
value?: any;
|
||||
};
|
||||
customStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
externalClasses?: {
|
||||
type: ArrayConstructor;
|
||||
value?: ['t-class', 't-class-icon', 't-class-loading'];
|
||||
};
|
||||
ghost?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
icon?: {
|
||||
type: null;
|
||||
value?: string | object;
|
||||
};
|
||||
loading?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
loadingProps?: {
|
||||
type: ObjectConstructor;
|
||||
value?: LoadingProps;
|
||||
};
|
||||
shape?: {
|
||||
type: StringConstructor;
|
||||
value?: 'rectangle' | 'square' | 'round' | 'circle';
|
||||
};
|
||||
size?: {
|
||||
type: StringConstructor;
|
||||
value?: SizeEnum;
|
||||
};
|
||||
theme?: {
|
||||
type: StringConstructor;
|
||||
value?: 'default' | 'primary' | 'danger' | 'gdxz';
|
||||
};
|
||||
type?: {
|
||||
type: StringConstructor;
|
||||
value?: 'submit' | 'reset';
|
||||
};
|
||||
variant?: {
|
||||
type: StringConstructor;
|
||||
value?: 'base' | 'outline' | 'text';
|
||||
};
|
||||
openType?: {
|
||||
type: StringConstructor;
|
||||
value?: 'contact' | 'share' | 'getPhoneNumber' | 'getUserInfo' | 'launchApp' | 'openSetting' | 'feedback' | 'chooseAvatar';
|
||||
};
|
||||
hoverStopPropagation?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
hoverStartTime?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
hoverStayTime?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
lang?: {
|
||||
type: StringConstructor;
|
||||
value?: 'en' | 'zh_CN' | 'zh_TW';
|
||||
};
|
||||
sessionFrom?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
sendMessageTitle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
sendMessagePath?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
sendMessageImg?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
appParameter?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
showMessageCard?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export {};
|
||||
@@ -0,0 +1,6 @@
|
||||
export default class Bus {
|
||||
listeners: Map<string, any>;
|
||||
constructor();
|
||||
on(evtName: string, listener: any): void;
|
||||
emit(evtName: string): void;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
export default class Bus {
|
||||
constructor() {
|
||||
this.listeners = new Map();
|
||||
}
|
||||
on(evtName, listener) {
|
||||
const target = this.listeners.get(evtName) || [];
|
||||
target.push(listener);
|
||||
this.listeners.set(evtName, target);
|
||||
}
|
||||
emit(evtName) {
|
||||
const listeners = this.listeners.get(evtName);
|
||||
if (listeners) {
|
||||
listeners.forEach((func) => func());
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
export declare type Classes = Array<string>;
|
||||
export interface Styles {
|
||||
[css: string]: string | number;
|
||||
}
|
||||
export declare type OptionData = {
|
||||
label?: string;
|
||||
value?: string | number;
|
||||
} & {
|
||||
[key: string]: any;
|
||||
};
|
||||
export declare type TreeOptionData = {
|
||||
children?: Array<TreeOptionData>;
|
||||
} & OptionData;
|
||||
export declare type SizeEnum = 'small' | 'medium' | 'large';
|
||||
export declare type HorizontalAlignEnum = 'left' | 'center' | 'right';
|
||||
export declare type VerticalAlignEnum = 'top' | 'middle' | 'bottom';
|
||||
export declare type ClassName = {
|
||||
[className: string]: any;
|
||||
} | ClassName[] | string;
|
||||
export declare type CSSSelector = string;
|
||||
export interface KeysType {
|
||||
value?: string;
|
||||
label?: string;
|
||||
}
|
||||
export interface HTMLElementAttributes {
|
||||
[css: string]: string;
|
||||
}
|
||||
export interface InfinityScroll {
|
||||
bufferSize?: number;
|
||||
isFixedRowHeight?: boolean;
|
||||
rowHeight?: number;
|
||||
threshold?: number;
|
||||
type: 'lazy' | 'virtual';
|
||||
}
|
||||
export declare type TScroll = InfinityScroll;
|
||||
@@ -0,0 +1 @@
|
||||
export {};
|
||||
@@ -0,0 +1,3 @@
|
||||
/// <reference types="miniprogram-api-typings" />
|
||||
declare const TComponent: typeof Component;
|
||||
export default TComponent;
|
||||
@@ -0,0 +1,5 @@
|
||||
const TComponent = (options) => {
|
||||
options.options = Object.assign({ multipleSlots: true, addGlobalClass: true }, options.options);
|
||||
return Component(options);
|
||||
};
|
||||
export default TComponent;
|
||||
@@ -0,0 +1,5 @@
|
||||
declare const _default: {
|
||||
prefix: string;
|
||||
};
|
||||
export default _default;
|
||||
export declare const prefix = "t";
|
||||
@@ -0,0 +1,4 @@
|
||||
export default {
|
||||
prefix: "t",
|
||||
};
|
||||
export const prefix = "t";
|
||||
@@ -0,0 +1,27 @@
|
||||
.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);
|
||||
}
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
import type { TDate, TCalendarType, TCalendarValue } from './type';
|
||||
export default class TCalendar {
|
||||
firstDayOfWeek: number;
|
||||
value: TCalendarValue | TCalendarValue[];
|
||||
type: TCalendarType;
|
||||
minDate: Date;
|
||||
maxDate: Date;
|
||||
format: (day: TDate) => TDate;
|
||||
constructor(options: any);
|
||||
getTrimValue(): Date | Date[];
|
||||
getDays(): any[];
|
||||
getMonths(): any[];
|
||||
select({ cellType, year, month, date }: {
|
||||
cellType: any;
|
||||
year: any;
|
||||
month: any;
|
||||
date: any;
|
||||
}): Date | TCalendarValue[];
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
import { getDateRect, isSameDate, getMonthDateRect, isValidDate, getDate } from '../date';
|
||||
export default class TCalendar {
|
||||
constructor(options) {
|
||||
this.type = 'single';
|
||||
Object.assign(this, options);
|
||||
if (!this.minDate)
|
||||
this.minDate = getDate();
|
||||
if (!this.maxDate)
|
||||
this.maxDate = getDate(6);
|
||||
}
|
||||
getTrimValue() {
|
||||
const { value, type } = this;
|
||||
const format = (val) => {
|
||||
if (val instanceof Date)
|
||||
return val;
|
||||
if (typeof val === 'number')
|
||||
return new Date(val);
|
||||
return new Date();
|
||||
};
|
||||
if (type === 'single' && isValidDate(value))
|
||||
return format(value);
|
||||
if (type === 'multiple' || type === 'range') {
|
||||
if (Array.isArray(value)) {
|
||||
const isValid = value.every((item) => isValidDate(item));
|
||||
return isValid ? value.map((item) => format(item)) : [];
|
||||
}
|
||||
return [];
|
||||
}
|
||||
}
|
||||
getDays() {
|
||||
const raw = '日一二三四五六';
|
||||
const ans = [];
|
||||
let i = this.firstDayOfWeek % 7;
|
||||
while (ans.length < 7) {
|
||||
ans.push(raw[i]);
|
||||
i = (i + 1) % 7;
|
||||
}
|
||||
return ans;
|
||||
}
|
||||
getMonths() {
|
||||
const ans = [];
|
||||
const selectedDate = this.getTrimValue();
|
||||
const { minDate, maxDate, type, format } = this;
|
||||
let { year: minYear, month: minMonth, time: minTime } = getDateRect(minDate);
|
||||
const { year: maxYear, month: maxMonth, time: maxTime } = getDateRect(maxDate);
|
||||
const calcType = (year, month, date) => {
|
||||
const curDate = new Date(year, month, date, 23, 59, 59);
|
||||
if (type === 'single' && selectedDate) {
|
||||
if (isSameDate({ year, month, date }, selectedDate))
|
||||
return 'selected';
|
||||
}
|
||||
if (type === 'multiple' && selectedDate) {
|
||||
const hit = selectedDate.some((item) => isSameDate({ year, month, date }, item));
|
||||
if (hit) {
|
||||
return 'selected';
|
||||
}
|
||||
}
|
||||
if (type === 'range' && selectedDate) {
|
||||
if (Array.isArray(selectedDate)) {
|
||||
const [startDate, endDate] = selectedDate;
|
||||
if (startDate && isSameDate({ year, month, date }, startDate))
|
||||
return 'start';
|
||||
if (endDate && isSameDate({ year, month, date }, endDate))
|
||||
return 'end';
|
||||
if (startDate && endDate && curDate.getTime() > startDate.getTime() && curDate.getTime() < endDate.getTime())
|
||||
return 'centre';
|
||||
}
|
||||
}
|
||||
const minCurDate = new Date(year, month, date, 0, 0, 0);
|
||||
if (curDate.getTime() < minTime || minCurDate.getTime() > maxTime) {
|
||||
return 'disabled';
|
||||
}
|
||||
return '';
|
||||
};
|
||||
while (minYear < maxYear || (minYear === maxYear && minMonth <= maxMonth)) {
|
||||
const target = getMonthDateRect(new Date(minYear, minMonth, 1));
|
||||
const months = [];
|
||||
for (let i = 1; i <= 31; i++) {
|
||||
if (i > target.lastDate)
|
||||
break;
|
||||
const dateObj = {
|
||||
date: new Date(minYear, minMonth, i),
|
||||
day: i,
|
||||
type: calcType(minYear, minMonth, i),
|
||||
};
|
||||
months.push(format ? format(dateObj) : dateObj);
|
||||
}
|
||||
ans.push({
|
||||
year: minYear,
|
||||
month: minMonth,
|
||||
months,
|
||||
weekdayOfFirstDay: target.weekdayOfFirstDay,
|
||||
});
|
||||
const curDate = getDateRect(new Date(minYear, minMonth + 1, 1));
|
||||
minYear = curDate.year;
|
||||
minMonth = curDate.month;
|
||||
}
|
||||
return ans;
|
||||
}
|
||||
select({ cellType, year, month, date }) {
|
||||
const { type } = this;
|
||||
const selectedDate = this.getTrimValue();
|
||||
if (cellType === 'disabled')
|
||||
return;
|
||||
const selected = new Date(year, month, date);
|
||||
this.value = selected;
|
||||
if (type === 'range' && Array.isArray(selectedDate)) {
|
||||
if (selectedDate.length === 1 && selected > selectedDate[0]) {
|
||||
this.value = [selectedDate[0], selected];
|
||||
}
|
||||
else {
|
||||
this.value = [selected];
|
||||
}
|
||||
}
|
||||
else if (type === 'multiple' && Array.isArray(selectedDate)) {
|
||||
const newVal = [...selectedDate];
|
||||
const index = selectedDate.findIndex((item) => isSameDate(item, selected));
|
||||
if (index > -1) {
|
||||
newVal.splice(index, 1);
|
||||
}
|
||||
else {
|
||||
newVal.push(selected);
|
||||
}
|
||||
this.value = newVal;
|
||||
}
|
||||
return this.value;
|
||||
}
|
||||
}
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
export interface TDate {
|
||||
date: Date;
|
||||
day: number;
|
||||
type: TDateType;
|
||||
className?: string;
|
||||
prefix?: string;
|
||||
suffix?: string;
|
||||
}
|
||||
export declare type TCalendarValue = number | Date;
|
||||
export declare type TDateType = 'selected' | 'disabled' | 'start' | 'centre' | 'end' | '';
|
||||
export declare type TCalendarType = 'single' | 'multiple' | 'range';
|
||||
@@ -0,0 +1 @@
|
||||
export {};
|
||||
@@ -0,0 +1,21 @@
|
||||
export declare type CompareDate = Date | number | {
|
||||
year: number;
|
||||
month: number;
|
||||
date: number;
|
||||
};
|
||||
export declare const getDateRect: (date: Date | number) => {
|
||||
year: number;
|
||||
month: number;
|
||||
date: number;
|
||||
day: number;
|
||||
time: number;
|
||||
};
|
||||
export declare const isSameDate: (date1: CompareDate, date2: CompareDate) => boolean;
|
||||
export declare const getMonthDateRect: (date: Date | number) => {
|
||||
year: number;
|
||||
month: number;
|
||||
weekdayOfFirstDay: number;
|
||||
lastDate: number;
|
||||
};
|
||||
export declare const isValidDate: (val: any) => boolean;
|
||||
export declare const getDate: (...args: any[]) => any;
|
||||
@@ -0,0 +1,41 @@
|
||||
export const getDateRect = (date) => {
|
||||
const _date = new Date(date);
|
||||
return {
|
||||
year: _date.getFullYear(),
|
||||
month: _date.getMonth(),
|
||||
date: _date.getDate(),
|
||||
day: _date.getDay(),
|
||||
time: _date.getTime(),
|
||||
};
|
||||
};
|
||||
export const isSameDate = (date1, date2) => {
|
||||
if (date1 instanceof Date || typeof date1 === 'number')
|
||||
date1 = getDateRect(date1);
|
||||
if (date2 instanceof Date || typeof date2 === 'number')
|
||||
date2 = getDateRect(date2);
|
||||
const keys = ['year', 'month', 'date'];
|
||||
return keys.every((key) => date1[key] === date2[key]);
|
||||
};
|
||||
export const getMonthDateRect = (date) => {
|
||||
const { year, month } = getDateRect(date);
|
||||
const firstDay = new Date(year, month, 1);
|
||||
const weekdayOfFirstDay = firstDay.getDay();
|
||||
const lastDate = new Date(+new Date(year, month + 1, 1) - 24 * 3600 * 1000).getDate();
|
||||
return {
|
||||
year,
|
||||
month,
|
||||
weekdayOfFirstDay,
|
||||
lastDate,
|
||||
};
|
||||
};
|
||||
export const isValidDate = (val) => typeof val === 'number' || val instanceof Date;
|
||||
export const getDate = (...args) => {
|
||||
const now = new Date();
|
||||
if (args.length === 0)
|
||||
return now;
|
||||
if (args.length === 1 && args[0] <= 1000) {
|
||||
const { year, month, date } = getDateRect(now);
|
||||
return new Date(year, month + args[0], date);
|
||||
}
|
||||
return Date.apply(null, args);
|
||||
};
|
||||
@@ -0,0 +1,15 @@
|
||||
declare type ControlInstance = {
|
||||
controlled: boolean;
|
||||
initValue: any;
|
||||
set(newVal: any, extObj?: Object, fn?: any): void;
|
||||
get(): any;
|
||||
change(newVal: any, customChangeData?: any, customUpdateFn?: any): void;
|
||||
};
|
||||
declare type ControlOption = {
|
||||
valueKey?: string;
|
||||
defaultValueKey?: string;
|
||||
changeEventName?: string;
|
||||
strict?: boolean;
|
||||
};
|
||||
declare function useControl(this: any, option?: ControlOption): ControlInstance;
|
||||
export { ControlOption, ControlInstance, useControl };
|
||||
@@ -0,0 +1,40 @@
|
||||
const defaultOption = {
|
||||
valueKey: 'value',
|
||||
defaultValueKey: 'defaultValue',
|
||||
changeEventName: 'change',
|
||||
strict: true,
|
||||
};
|
||||
function useControl(option = {}) {
|
||||
const { valueKey, defaultValueKey, changeEventName, strict } = Object.assign(Object.assign({}, defaultOption), option);
|
||||
const props = this.properties || {};
|
||||
const value = props[valueKey];
|
||||
const defaultValue = props[strict ? defaultValueKey : valueKey];
|
||||
let controlled = false;
|
||||
if (strict && typeof value !== 'undefined' && value !== null) {
|
||||
controlled = true;
|
||||
}
|
||||
const set = (newVal, extObj, fn) => {
|
||||
this.setData(Object.assign({ [`_${valueKey}`]: newVal }, extObj), fn);
|
||||
};
|
||||
return {
|
||||
controlled,
|
||||
initValue: controlled ? value : defaultValue,
|
||||
set,
|
||||
get: () => {
|
||||
return this.data[`_${valueKey}`];
|
||||
},
|
||||
change: (newVal, customChangeData, customUpdateFn) => {
|
||||
this.triggerEvent(changeEventName, typeof customChangeData !== 'undefined' ? customChangeData : newVal);
|
||||
if (controlled) {
|
||||
return;
|
||||
}
|
||||
if (typeof customUpdateFn === 'function') {
|
||||
customUpdateFn();
|
||||
}
|
||||
else {
|
||||
set(newVal);
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
export { useControl };
|
||||
@@ -0,0 +1,15 @@
|
||||
export declare const getPrototypeOf: (obj: any) => any;
|
||||
export declare const isObject: (something: any) => boolean;
|
||||
export declare const iterateInheritedPrototype: (callback: (proto: Record<string, any>) => boolean | void, fromCtor: any, toCtor: any, includeToCtor?: boolean) => void;
|
||||
export interface ClassInstanceToObjectOptions {
|
||||
bindTo?: any;
|
||||
excludes?: string[];
|
||||
till?: any;
|
||||
enumerable?: 0 | boolean;
|
||||
configurable?: 0 | boolean;
|
||||
writable?: 0 | boolean;
|
||||
}
|
||||
export declare const toObject: (something: any, options?: ClassInstanceToObjectOptions) => {
|
||||
[key: string]: any;
|
||||
};
|
||||
export declare const isPlainObject: (something: any) => boolean;
|
||||
@@ -0,0 +1,57 @@
|
||||
export const getPrototypeOf = function (obj) {
|
||||
return Object.getPrototypeOf ? Object.getPrototypeOf(obj) : obj.__proto__;
|
||||
};
|
||||
export const isObject = function isObject(something) {
|
||||
const type = typeof something;
|
||||
return something !== null && (type === 'function' || type === 'object');
|
||||
};
|
||||
export const iterateInheritedPrototype = function iterateInheritedPrototype(callback, fromCtor, toCtor, includeToCtor = true) {
|
||||
let proto = fromCtor.prototype || fromCtor;
|
||||
const toProto = toCtor.prototype || toCtor;
|
||||
while (proto) {
|
||||
if (!includeToCtor && proto === toProto)
|
||||
break;
|
||||
if (callback(proto) === false)
|
||||
break;
|
||||
if (proto === toProto)
|
||||
break;
|
||||
proto = getPrototypeOf(proto);
|
||||
}
|
||||
};
|
||||
export const toObject = function toObject(something, options = {}) {
|
||||
const obj = {};
|
||||
if (!isObject(something))
|
||||
return obj;
|
||||
const excludes = options.excludes || ['constructor'];
|
||||
const { enumerable = true, configurable = 0, writable = 0 } = options;
|
||||
const defaultDesc = {};
|
||||
if (enumerable !== 0)
|
||||
defaultDesc.enumerable = enumerable;
|
||||
if (configurable !== 0)
|
||||
defaultDesc.configurable = configurable;
|
||||
if (writable !== 0)
|
||||
defaultDesc.writable = writable;
|
||||
iterateInheritedPrototype((proto) => {
|
||||
Object.getOwnPropertyNames(proto).forEach((key) => {
|
||||
if (excludes.indexOf(key) >= 0)
|
||||
return;
|
||||
if (Object.prototype.hasOwnProperty.call(obj, key))
|
||||
return;
|
||||
const desc = Object.getOwnPropertyDescriptor(proto, key);
|
||||
const fnKeys = ['get', 'set', 'value'];
|
||||
fnKeys.forEach((k) => {
|
||||
if (typeof desc[k] === 'function') {
|
||||
const oldFn = desc[k];
|
||||
desc[k] = function (...args) {
|
||||
return oldFn.apply(Object.prototype.hasOwnProperty.call(options, 'bindTo') ? options.bindTo : this, args);
|
||||
};
|
||||
}
|
||||
});
|
||||
Object.defineProperty(obj, key, Object.assign(Object.assign({}, desc), defaultDesc));
|
||||
});
|
||||
}, something, options.till || Object, false);
|
||||
return obj;
|
||||
};
|
||||
export const isPlainObject = function isPlainObject(something) {
|
||||
return Object.prototype.toString.call(something) === '[object Object]';
|
||||
};
|
||||
@@ -0,0 +1,4 @@
|
||||
export * from './superComponent';
|
||||
export * from './flatTool';
|
||||
export * from './instantiationDecorator';
|
||||
export * from './control';
|
||||
@@ -0,0 +1,4 @@
|
||||
export * from './superComponent';
|
||||
export * from './flatTool';
|
||||
export * from './instantiationDecorator';
|
||||
export * from './control';
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
import { SuperComponent } from './superComponent';
|
||||
export declare const toComponent: (options: Record<string, any>) => Record<string, any>;
|
||||
export declare const wxComponent: () => (constructor: new () => SuperComponent) => void;
|
||||
+135
@@ -0,0 +1,135 @@
|
||||
import { isPlainObject, toObject } from './flatTool';
|
||||
const RawLifeCycles = ['Created', 'Attached', 'Ready', 'Moved', 'Detached', 'Error'];
|
||||
const NativeLifeCycles = RawLifeCycles.map((k) => k.toLowerCase());
|
||||
const ComponentNativeProps = [
|
||||
'properties',
|
||||
'data',
|
||||
'observers',
|
||||
'methods',
|
||||
'behaviors',
|
||||
...NativeLifeCycles,
|
||||
'relations',
|
||||
'externalClasses',
|
||||
'options',
|
||||
'lifetimes',
|
||||
'pageLifeTimes',
|
||||
'definitionFilter',
|
||||
];
|
||||
export const toComponent = function toComponent(options) {
|
||||
const { relations, behaviors = [] } = options;
|
||||
if (options.properties) {
|
||||
Object.keys(options.properties).forEach((k) => {
|
||||
let opt = options.properties[k];
|
||||
if (!isPlainObject(opt)) {
|
||||
opt = { type: opt };
|
||||
}
|
||||
options.properties[k] = opt;
|
||||
});
|
||||
const ariaProps = [
|
||||
{ key: 'ariaHidden', type: Boolean },
|
||||
{ key: 'ariaRole', type: String },
|
||||
{ key: 'ariaLabel', type: String },
|
||||
{ key: 'ariaLabelledby', type: String },
|
||||
{ key: 'ariaDescribedby', type: String },
|
||||
{ key: 'ariaBusy', type: Boolean },
|
||||
];
|
||||
ariaProps.forEach(({ key, type }) => {
|
||||
options.properties[key] = {
|
||||
type,
|
||||
};
|
||||
});
|
||||
}
|
||||
if (!options.methods)
|
||||
options.methods = {};
|
||||
if (!options.lifetimes)
|
||||
options.lifetimes = {};
|
||||
const inits = {};
|
||||
if (relations) {
|
||||
const getRelations = (relation, path) => Behavior({
|
||||
created() {
|
||||
Object.defineProperty(this, `$${relation}`, {
|
||||
get: () => {
|
||||
const nodes = this.getRelationNodes(path) || [];
|
||||
return relation === 'parent' ? nodes[0] : nodes;
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
const map = {};
|
||||
Object.keys(relations).forEach((path) => {
|
||||
const comp = relations[path];
|
||||
const relation = ['parent', 'ancestor'].includes(comp.type) ? 'parent' : 'children';
|
||||
const mixin = getRelations(relation, path);
|
||||
map[relation] = mixin;
|
||||
});
|
||||
behaviors.push(...Object.keys(map).map((key) => map[key]));
|
||||
}
|
||||
options.behaviors = [...behaviors];
|
||||
Object.getOwnPropertyNames(options).forEach((k) => {
|
||||
const desc = Object.getOwnPropertyDescriptor(options, k);
|
||||
if (!desc)
|
||||
return;
|
||||
if (NativeLifeCycles.indexOf(k) < 0 && typeof desc.value === 'function') {
|
||||
Object.defineProperty(options.methods, k, desc);
|
||||
delete options[k];
|
||||
}
|
||||
else if (ComponentNativeProps.indexOf(k) < 0) {
|
||||
inits[k] = desc;
|
||||
}
|
||||
else if (NativeLifeCycles.indexOf(k) >= 0) {
|
||||
options.lifetimes[k] = options[k];
|
||||
}
|
||||
});
|
||||
if (Object.keys(inits).length) {
|
||||
const oldCreated = options.lifetimes.created;
|
||||
const oldAttached = options.lifetimes.attached;
|
||||
const { controlledProps = [] } = options;
|
||||
options.lifetimes.created = function (...args) {
|
||||
Object.defineProperties(this, inits);
|
||||
if (oldCreated)
|
||||
oldCreated.apply(this, args);
|
||||
};
|
||||
options.lifetimes.attached = function (...args) {
|
||||
if (oldAttached)
|
||||
oldAttached.apply(this, args);
|
||||
controlledProps.forEach(({ key }) => {
|
||||
const defaultKey = `default${key.replace(/^(\w)/, (m, m1) => m1.toUpperCase())}`;
|
||||
const props = this.properties;
|
||||
if (props[key] == null) {
|
||||
this._selfControlled = true;
|
||||
}
|
||||
if (props[key] == null && props[defaultKey] != null) {
|
||||
this.setData({
|
||||
[key]: props[defaultKey],
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
options.methods._trigger = function (evtName, detail, opts) {
|
||||
const target = controlledProps.find((item) => item.event == evtName);
|
||||
if (target) {
|
||||
const { key } = target;
|
||||
if (this._selfControlled) {
|
||||
this.setData({
|
||||
[key]: detail[key],
|
||||
});
|
||||
}
|
||||
}
|
||||
this.triggerEvent(evtName, detail, opts);
|
||||
};
|
||||
}
|
||||
return options;
|
||||
};
|
||||
export const wxComponent = function wxComponent() {
|
||||
return function (constructor) {
|
||||
class WxComponent extends constructor {
|
||||
}
|
||||
const current = new WxComponent();
|
||||
current.options = current.options || {};
|
||||
if (current.options.addGlobalClass === undefined) {
|
||||
current.options.addGlobalClass = true;
|
||||
}
|
||||
const obj = toComponent(toObject(current));
|
||||
Component(obj);
|
||||
};
|
||||
};
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
/// <reference types="miniprogram-api-typings" />
|
||||
export interface ComponentsOptionsType extends WechatMiniprogram.Component.ComponentOptions {
|
||||
styleIsolation?: 'isolated' | 'apply-shared' | 'shared' | 'page-isolated' | 'page-apply-shared' | 'page-shared';
|
||||
}
|
||||
export interface RelationsOptions {
|
||||
[componentName: string]: WechatMiniprogram.Component.RelationOption;
|
||||
}
|
||||
export interface SuperComponent<D = {}, P = {}, M = {}> extends WechatMiniprogram.Component.Lifetimes, WechatMiniprogram.Component.OtherOption, WechatMiniprogram.Component.InstanceMethods<D> {
|
||||
properties: P;
|
||||
data: D;
|
||||
options: ComponentsOptionsType;
|
||||
methods: M | Record<string, (...args: any[]) => any>;
|
||||
$global: Function;
|
||||
[x: string]: any;
|
||||
}
|
||||
export declare class SuperComponent<D = {}, P = {}, M = {}> {
|
||||
readonly app: any;
|
||||
constructor();
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
export class SuperComponent {
|
||||
constructor() {
|
||||
this.app = getApp();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
.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);
|
||||
}
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
@keyframes tdesign-fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
.t-float-left {
|
||||
float: left;
|
||||
}
|
||||
.t-float-right {
|
||||
float: right;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
.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);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<template name="badge">
|
||||
<t-badge
|
||||
color="{{color}}"
|
||||
content="{{content}}"
|
||||
count="{{count || 0}}"
|
||||
dot="{{dot}}"
|
||||
max-count="{{maxCount || 99}}"
|
||||
offset="{{offset}}"
|
||||
shape="{{shape || 'circle'}}"
|
||||
show-zero="{{showZero}}"
|
||||
size="{{size || 'medium'}}"
|
||||
t-class="{{tClass}}"
|
||||
t-class-content="{{tClassContent}}"
|
||||
t-class-count="{{tClassCount}}"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,37 @@
|
||||
<template name="button">
|
||||
<t-button
|
||||
block="{{block}}"
|
||||
class="{{class}}"
|
||||
t-class="{{externalClass}}"
|
||||
disabled="{{disabled}}"
|
||||
data-type="{{type}}"
|
||||
data-extra="{{extra}}"
|
||||
icon="{{icon}}"
|
||||
loading="{{loading}}"
|
||||
theme="{{theme}}"
|
||||
ghost="{{ghost}}"
|
||||
shape="{{shape}}"
|
||||
size="{{size}}"
|
||||
variant="{{variant}}"
|
||||
open-type="{{openType}}"
|
||||
hover-stop-propagation="{{hoverStopPropagation}}"
|
||||
hover-start-time="{{hoverStartTime}}"
|
||||
hover-stay-time="{{hoverStayTime}}"
|
||||
lang="{{lang}}"
|
||||
session-from="{{sessionFrom}}"
|
||||
send-message-title="{{sendMessageTitle}}"
|
||||
send-message-path="{{sendMessagePath}}"
|
||||
send-message-img="{{sendMessageImg}}"
|
||||
app-parameter="{{appParameter}}"
|
||||
show-message-card="{{showMessageCard}}"
|
||||
bind:tap="onTplButtonTap"
|
||||
bind:getuserinfo="onTplButtonTap"
|
||||
bind:contact="onTplButtonTap"
|
||||
bind:getphonenumber="onTplButtonTap"
|
||||
bind:error="onTplButtonTap"
|
||||
bind:opensetting="onTplButtonTap"
|
||||
bind:launchapp="onTplButtonTap"
|
||||
aria-label="{{ariaLabel}}"
|
||||
>{{content}}</t-button
|
||||
>
|
||||
</template>
|
||||
@@ -0,0 +1,15 @@
|
||||
<template name="icon">
|
||||
<t-icon
|
||||
customStyle="{{customStyle}}"
|
||||
class="{{class}}"
|
||||
t-class="{{tClass}}"
|
||||
prefix="{{prefix}}"
|
||||
name="{{name}}"
|
||||
size="{{size}}"
|
||||
color="{{color}}"
|
||||
aria-hidden="{{ariaHidden}}"
|
||||
aria-label="{{ariaLabel}}"
|
||||
aria-role="{{ariaRole}}"
|
||||
bind:click="{{bindclick || ''}}"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,18 @@
|
||||
<template name="image">
|
||||
<t-image
|
||||
customStyle="{{customStyle}}"
|
||||
error="{{error || 'default'}}"
|
||||
lazy="{{lazy}}"
|
||||
loading="{{count || 'default'}}"
|
||||
shape="{{shape || 'square'}}"
|
||||
src="{{src}}"
|
||||
mode="{{mode || 'scaleToFill'}}"
|
||||
webp="{{webp}}"
|
||||
showMenuByLongpress="{{showMenuByLongpress}}"
|
||||
bind:error="{{binderror}}"
|
||||
bind:load="{{bindload}}"
|
||||
class="{{class}}"
|
||||
t-class="{{tClass}}"
|
||||
t-class-load="{{tClassLoad}}"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,28 @@
|
||||
/// <reference types="miniprogram-api-typings" />
|
||||
/// <reference types="miniprogram-api-typings" />
|
||||
declare type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
|
||||
export declare const debounce: (func: any, wait?: number) => (...rest: any[]) => void;
|
||||
export declare const throttle: (func: any, wait?: number, options?: any) => (...args: any[]) => void;
|
||||
export declare const classNames: (...args: any[]) => string;
|
||||
export declare const styles: (styleObj: any) => string;
|
||||
export declare const getAnimationFrame: (cb: Function) => WechatMiniprogram.NodesRef;
|
||||
export declare const getRect: (context: any, selector: string, needAll?: boolean) => Promise<any>;
|
||||
export declare const isNumber: (value: any) => boolean;
|
||||
export declare const addUnit: (value?: string | number) => string | undefined;
|
||||
export declare const getCharacterLength: (type: string, str: string, max?: number) => {
|
||||
length: number;
|
||||
characters: string;
|
||||
};
|
||||
export declare const chunk: (arr: any[], size: number) => any[][];
|
||||
export declare const getInstance: (context?: Context, selector?: string) => WechatMiniprogram.Component.TrivialInstance;
|
||||
export declare const unitConvert: (value: number | string) => number;
|
||||
export declare const setIcon: (iconName: any, icon: any, defaultIcon: any) => {
|
||||
[x: string]: any;
|
||||
};
|
||||
export declare const isObject: (val: any) => boolean;
|
||||
export declare const isString: (val: any) => boolean;
|
||||
export declare const toCamel: (str: any) => any;
|
||||
export declare const getCurrentPage: <T>() => T & WechatMiniprogram.OptionalInterface<WechatMiniprogram.Page.ILifetime> & WechatMiniprogram.Page.InstanceProperties & WechatMiniprogram.Page.InstanceMethods<WechatMiniprogram.IAnyObject> & WechatMiniprogram.Page.Data<WechatMiniprogram.IAnyObject> & WechatMiniprogram.IAnyObject;
|
||||
export declare const uniqueFactory: (compName: any) => () => string;
|
||||
export declare const calcIcon: (icon: string | Record<string, any>) => Record<string, any>;
|
||||
export {};
|
||||
@@ -0,0 +1,217 @@
|
||||
import { prefix } from './config';
|
||||
const systemInfo = wx.getSystemInfoSync();
|
||||
export const debounce = function (func, wait = 500) {
|
||||
let timerId;
|
||||
return function (...rest) {
|
||||
if (timerId) {
|
||||
clearTimeout(timerId);
|
||||
}
|
||||
timerId = setTimeout(() => {
|
||||
func.apply(this, rest);
|
||||
}, wait);
|
||||
};
|
||||
};
|
||||
export const throttle = (func, wait = 100, options = null) => {
|
||||
let previous = 0;
|
||||
let timerid = null;
|
||||
if (!options) {
|
||||
options = {
|
||||
leading: true,
|
||||
};
|
||||
}
|
||||
return function (...args) {
|
||||
const now = Date.now();
|
||||
if (!previous && !options.leading)
|
||||
previous = now;
|
||||
const remaining = wait - (now - previous);
|
||||
const context = this;
|
||||
if (remaining <= 0) {
|
||||
if (timerid) {
|
||||
clearTimeout(timerid);
|
||||
timerid = null;
|
||||
}
|
||||
previous = now;
|
||||
func.apply(context, args);
|
||||
}
|
||||
};
|
||||
};
|
||||
export const classNames = function (...args) {
|
||||
const hasOwn = {}.hasOwnProperty;
|
||||
const classes = [];
|
||||
args.forEach((arg) => {
|
||||
if (!arg)
|
||||
return;
|
||||
const argType = typeof arg;
|
||||
if (argType === 'string' || argType === 'number') {
|
||||
classes.push(arg);
|
||||
}
|
||||
else if (Array.isArray(arg) && arg.length) {
|
||||
const inner = classNames(...arg);
|
||||
if (inner) {
|
||||
classes.push(inner);
|
||||
}
|
||||
}
|
||||
else if (argType === 'object') {
|
||||
for (const key in arg) {
|
||||
if (hasOwn.call(arg, key) && arg[key]) {
|
||||
classes.push(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
return classes.join(' ');
|
||||
};
|
||||
export const styles = function (styleObj) {
|
||||
return Object.keys(styleObj)
|
||||
.map((styleKey) => `${styleKey}: ${styleObj[styleKey]}`)
|
||||
.join('; ');
|
||||
};
|
||||
export const getAnimationFrame = function (cb) {
|
||||
return wx
|
||||
.createSelectorQuery()
|
||||
.selectViewport()
|
||||
.boundingClientRect()
|
||||
.exec(() => {
|
||||
cb();
|
||||
});
|
||||
};
|
||||
export const getRect = function (context, selector, needAll = false) {
|
||||
return new Promise((resolve, reject) => {
|
||||
wx.createSelectorQuery()
|
||||
.in(context)[needAll ? 'selectAll' : 'select'](selector)
|
||||
.boundingClientRect((rect) => {
|
||||
if (rect) {
|
||||
resolve(rect);
|
||||
}
|
||||
else {
|
||||
reject(rect);
|
||||
}
|
||||
})
|
||||
.exec();
|
||||
});
|
||||
};
|
||||
const isDef = function (value) {
|
||||
return value !== undefined && value !== null;
|
||||
};
|
||||
export const isNumber = function (value) {
|
||||
return /^\d+(\.\d+)?$/.test(value);
|
||||
};
|
||||
export const addUnit = function (value) {
|
||||
if (!isDef(value)) {
|
||||
return undefined;
|
||||
}
|
||||
value = String(value);
|
||||
return isNumber(value) ? `${value}px` : value;
|
||||
};
|
||||
export const getCharacterLength = (type, str, max) => {
|
||||
if (!str || str.length === 0) {
|
||||
return {
|
||||
length: 0,
|
||||
characters: '',
|
||||
};
|
||||
}
|
||||
if (type === 'maxcharacter') {
|
||||
let len = 0;
|
||||
for (let i = 0; i < str.length; i += 1) {
|
||||
let currentStringLength = 0;
|
||||
if (str.charCodeAt(i) > 127 || str.charCodeAt(i) === 94) {
|
||||
currentStringLength = 2;
|
||||
}
|
||||
else {
|
||||
currentStringLength = 1;
|
||||
}
|
||||
if (len + currentStringLength > max) {
|
||||
return {
|
||||
length: len,
|
||||
characters: str.slice(0, i),
|
||||
};
|
||||
}
|
||||
len += currentStringLength;
|
||||
}
|
||||
return {
|
||||
length: len,
|
||||
characters: str,
|
||||
};
|
||||
}
|
||||
else if (type === 'maxlength') {
|
||||
const length = str.length > max ? max : str.length;
|
||||
return {
|
||||
length,
|
||||
characters: str.slice(0, length),
|
||||
};
|
||||
}
|
||||
return {
|
||||
length: str.length,
|
||||
characters: str,
|
||||
};
|
||||
};
|
||||
export const chunk = (arr, size) => Array.from({ length: Math.ceil(arr.length / size) }, (v, i) => arr.slice(i * size, i * size + size));
|
||||
export const getInstance = function (context, selector) {
|
||||
if (!context) {
|
||||
const pages = getCurrentPages();
|
||||
const page = pages[pages.length - 1];
|
||||
context = page.$$basePage || page;
|
||||
}
|
||||
const instance = context ? context.selectComponent(selector) : null;
|
||||
if (!instance) {
|
||||
console.warn('未找到组件,请检查selector是否正确');
|
||||
return null;
|
||||
}
|
||||
return instance;
|
||||
};
|
||||
export const unitConvert = (value) => {
|
||||
var _a;
|
||||
if (typeof value === 'string') {
|
||||
if (value.includes('rpx')) {
|
||||
return (parseInt(value, 10) * ((_a = systemInfo === null || systemInfo === void 0 ? void 0 : systemInfo.screenWidth) !== null && _a !== void 0 ? _a : 750)) / 750;
|
||||
}
|
||||
return parseInt(value, 10);
|
||||
}
|
||||
return value;
|
||||
};
|
||||
export const setIcon = (iconName, icon, defaultIcon) => {
|
||||
if (icon) {
|
||||
if (typeof icon === 'string') {
|
||||
return {
|
||||
[`${iconName}Name`]: icon,
|
||||
[`${iconName}Data`]: {},
|
||||
};
|
||||
}
|
||||
else if (typeof icon === 'object') {
|
||||
return {
|
||||
[`${iconName}Name`]: '',
|
||||
[`${iconName}Data`]: icon,
|
||||
};
|
||||
}
|
||||
else {
|
||||
return {
|
||||
[`${iconName}Name`]: defaultIcon,
|
||||
[`${iconName}Data`]: {},
|
||||
};
|
||||
}
|
||||
}
|
||||
return {
|
||||
[`${iconName}Name`]: '',
|
||||
[`${iconName}Data`]: {},
|
||||
};
|
||||
};
|
||||
export const isObject = (val) => typeof val === 'object' && val != null;
|
||||
export const isString = (val) => typeof val === 'string';
|
||||
export const toCamel = (str) => str.replace(/-(\w)/g, (match, m1) => m1.toUpperCase());
|
||||
export const getCurrentPage = function () {
|
||||
const pages = getCurrentPages();
|
||||
return pages[pages.length - 1];
|
||||
};
|
||||
export const uniqueFactory = (compName) => {
|
||||
let number = 0;
|
||||
return () => `${prefix}_${compName}_${number++}`;
|
||||
};
|
||||
export const calcIcon = (icon) => {
|
||||
if (typeof icon === 'string') {
|
||||
return { name: icon };
|
||||
}
|
||||
if (isObject(icon)) {
|
||||
return icon;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
@@ -0,0 +1,72 @@
|
||||
/* utils */
|
||||
|
||||
/**
|
||||
* addUnit */
|
||||
// 为 css 添加单位
|
||||
function addUnit(value) {
|
||||
var REGEXP = getRegExp('^\d+(.\d+)?$');
|
||||
if (value == null) {
|
||||
return undefined;
|
||||
}
|
||||
return REGEXP.test('' + value) ? value + 'px' : value;
|
||||
}
|
||||
|
||||
function isString(string) {
|
||||
return string && string.constructor === 'String';
|
||||
}
|
||||
|
||||
function isArray(array) {
|
||||
return array && array.constructor === 'Array';
|
||||
}
|
||||
|
||||
function isObject(obj) {
|
||||
return obj && obj.constructor === 'Object';
|
||||
}
|
||||
|
||||
var isNoEmptyObj = function (obj) {
|
||||
return isObject(obj) && JSON.stringify(obj) !== '{}';
|
||||
};
|
||||
|
||||
function includes(arr, value) {
|
||||
if (!arr || !isArray(arr)) return false;
|
||||
|
||||
var i = 0;
|
||||
var len = arr.length;
|
||||
|
||||
for (; i < len; i++) {
|
||||
if (arr[i] === value) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function cls(base, arr) {
|
||||
var res = [base];
|
||||
var i = 0;
|
||||
for (size = arr.length; i < size; i++) {
|
||||
var item = arr[i];
|
||||
|
||||
if (item && item.constructor === 'Array') {
|
||||
var key = arr[i][0];
|
||||
var value = arr[i][1];
|
||||
|
||||
if (value) {
|
||||
res.push(base + '--' + key);
|
||||
}
|
||||
} else if (typeof item === 'string') {
|
||||
if (item) {
|
||||
res.push(base + '--' + item);
|
||||
}
|
||||
}
|
||||
}
|
||||
return res.join(' ');
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
addUnit: addUnit,
|
||||
isString: isString,
|
||||
isArray: isArray,
|
||||
isObject: isObject,
|
||||
isNoEmptyObj: isNoEmptyObj,
|
||||
includes: includes,
|
||||
cls: cls,
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export declare function canIUseFormFieldButton(): boolean;
|
||||
@@ -0,0 +1,37 @@
|
||||
let systemInfo;
|
||||
function getSystemInfo() {
|
||||
if (systemInfo == null) {
|
||||
systemInfo = wx.getSystemInfoSync();
|
||||
}
|
||||
return systemInfo;
|
||||
}
|
||||
function compareVersion(v1, v2) {
|
||||
v1 = v1.split('.');
|
||||
v2 = v2.split('.');
|
||||
const len = Math.max(v1.length, v2.length);
|
||||
while (v1.length < len) {
|
||||
v1.push('0');
|
||||
}
|
||||
while (v2.length < len) {
|
||||
v2.push('0');
|
||||
}
|
||||
for (let i = 0; i < len; i++) {
|
||||
const num1 = parseInt(v1[i]);
|
||||
const num2 = parseInt(v2[i]);
|
||||
if (num1 > num2) {
|
||||
return 1;
|
||||
}
|
||||
else if (num1 < num2) {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
function judgeByVersion(version) {
|
||||
const currentSDKVersion = getSystemInfo().SDKVersion;
|
||||
return compareVersion(currentSDKVersion, version) >= 0;
|
||||
}
|
||||
export function canIUseFormFieldButton() {
|
||||
const version = '2.10.3';
|
||||
return judgeByVersion(version);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
### Dialog Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
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/tree/develop/src/dialog/type.ts) | N
|
||||
close-btn | Boolean / Object | false | `0.31.0` | N
|
||||
close-on-overlay-click | Boolean | undefined | \- | N
|
||||
confirm-btn | String / Object / Slot | - | \- | N
|
||||
content | String / Slot | - | \- | N
|
||||
custom-style | String | - | `0.25.0` | N
|
||||
external-classes | Array | - | `['t-class', 't-class-content', 't-class-confirm', 't-class-cancel']` | N
|
||||
overlay-props | Object | {} | \- | N
|
||||
prevent-scroll-through | Boolean | true | \- | N
|
||||
show-overlay | Boolean | true | \- | N
|
||||
title | String / Slot | - | \- | 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 | - | \-
|
||||
@@ -0,0 +1,85 @@
|
||||
---
|
||||
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"
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
按钮的样式，默认使用 `variant = text`，如果任意按钮改变了 `variant`，那么全部按钮都改变成这个。
|
||||
|
||||
### 组件类型
|
||||
#### 反馈类对话框
|
||||
|
||||
{{ base }}
|
||||
|
||||
> 使用这种方式，对话框的 `visible` 是受控的，需要手动设置额 `visible` 为 `false` 才会关闭对话框。
|
||||
|
||||
#### 确认类对话框
|
||||
|
||||
{{ confirm }}
|
||||
|
||||
#### 输入类对话框
|
||||
|
||||
{{ with-input }}
|
||||
|
||||
#### 带图片对话框
|
||||
|
||||
{{ with-image }}
|
||||
|
||||
### 组件状态
|
||||
|
||||
{{ status }}
|
||||
|
||||
### 组件用法
|
||||
#### 命令调用
|
||||
|
||||
{{ 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 组件属性。使用 Slot 自定义按钮时，需自行控制取消事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | N
|
||||
close-btn | Boolean / Object | false | `0.31.0`。是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；使用 Object 时透传至图标组件 | N
|
||||
close-on-overlay-click | Boolean | undefined | 点击蒙层时是否触发关闭事件 | N
|
||||
confirm-btn | String / Object / Slot | - | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 Slot 自定义按钮时，需自行控制确认事件 | N
|
||||
content | String / Slot | - | 内容 | N
|
||||
custom-style | String | - | `0.25.0`。自定义组件样式 | 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 | - | 控制对话框是否显示 | 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 | - | 如果蒙层存在，点击蒙层时触发
|
||||
@@ -0,0 +1,28 @@
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
export default class Dialog extends SuperComponent {
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
addGlobalClass: 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;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
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';
|
||||
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,
|
||||
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,
|
||||
class: [...cls, `${classPrefix}__button--${key}`],
|
||||
externalClass: [...externalCls, `${prefix}-class-${key}`],
|
||||
variant: rect.buttonVariant,
|
||||
};
|
||||
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);
|
||||
}
|
||||
});
|
||||
this.setData(Object.assign({}, rect));
|
||||
},
|
||||
};
|
||||
this.methods = {
|
||||
onTplButtonTap(e) {
|
||||
var _a, _b;
|
||||
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 = 'openType' in button;
|
||||
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 = ((_b = e.detail) === null || _b === void 0 ? void 0 : _b.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();
|
||||
}
|
||||
},
|
||||
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.triggerEvent('overlayClick');
|
||||
},
|
||||
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;
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-popup": "../popup/popup",
|
||||
"t-icon": "../icon/icon",
|
||||
"t-button": "../button/button"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
<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"
|
||||
custom-style="{{ customStyle }}"
|
||||
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">
|
||||
<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="22" />
|
||||
</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, externalClass: prefix + '-class-action', class: 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>
|
||||
@@ -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(' ');
|
||||
};
|
||||
@@ -0,0 +1,139 @@
|
||||
.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-border-radius, 16rpx);
|
||||
background-color: var(--td-bg-color-block, #fff);
|
||||
}
|
||||
.t-dialog__close-btn {
|
||||
position: absolute;
|
||||
top: 16rpx;
|
||||
right: 16rpx;
|
||||
color: var(--td-dialog-close-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
|
||||
}
|
||||
.t-dialog__content {
|
||||
padding: var(--td-spacer-4, 64rpx) var(--td-spacer-3, 48rpx) 0;
|
||||
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);
|
||||
line-height: var(--td-text-line-height, 1.5);
|
||||
}
|
||||
.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-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
}
|
||||
.t-dialog__header + .t-dialog__body {
|
||||
margin-top: 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-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: 48rpx;
|
||||
}
|
||||
.t-dialog__footer--column {
|
||||
flex-flow: column-reverse;
|
||||
}
|
||||
.t-dialog__footer--column .t-dialog__button {
|
||||
width: 100%;
|
||||
}
|
||||
.t-dialog__footer--full {
|
||||
padding: 64rpx 0 0;
|
||||
}
|
||||
.t-dialog-button {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.t-dialog-button:after {
|
||||
border-radius: 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: 24rpx;
|
||||
}
|
||||
.t-dialog__button--vertical + .t-dialog__button--vertical {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
.t-dialog__button--text {
|
||||
flex: 1;
|
||||
--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-color, #e7e7e7);
|
||||
border-left: 1px solid var(--td-border-color, #e7e7e7);
|
||||
transform: scale(0.5);
|
||||
transform-origin: 0 0;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
border-radius: 0;
|
||||
}
|
||||
.t-dialog input {
|
||||
height: var(--td-dialog-input-height, 96rpx);
|
||||
padding: 0 24rpx;
|
||||
text-align: left;
|
||||
margin-top: 32rpx;
|
||||
border-radius: var(--td-dialog-input-raidus, 8rpx);
|
||||
background-color: var(--td-dialog-input-bg-color, var(--td-gray-color-1, #f3f3f3));
|
||||
}
|
||||
.t-dialog .placeholder {
|
||||
color: var(--td-dialog-input-placeholder-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
|
||||
line-height: var(--td-dialog-input-height, 96rpx);
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
});
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,3 @@
|
||||
import { TdDialogProps } from './type';
|
||||
declare const props: TdDialogProps;
|
||||
export default props;
|
||||
@@ -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: undefined,
|
||||
},
|
||||
confirmBtn: {
|
||||
type: null,
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
},
|
||||
customStyle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
externalClasses: {
|
||||
type: Array,
|
||||
},
|
||||
overlayProps: {
|
||||
type: Object,
|
||||
value: {},
|
||||
},
|
||||
preventScrollThrough: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
showOverlay: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
value: 11500,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
@@ -0,0 +1,63 @@
|
||||
import { ButtonProps } from '../button/index';
|
||||
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 | object;
|
||||
};
|
||||
closeOnOverlayClick?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
confirmBtn?: {
|
||||
type: null;
|
||||
value?: string | ButtonProps | null;
|
||||
};
|
||||
content?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
customStyle?: {
|
||||
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;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export {};
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
title: Icon 图标
|
||||
description: 图标。
|
||||
spline: base
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%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-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
|
||||
## 引入
|
||||
|
||||
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"t-icon": "tdesign-miniprogram/icon/icon"
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础组件图标
|
||||
|
||||
{{ base }}
|
||||
|
||||
### 自定义组件图标
|
||||
|
||||
{{ custom }}
|
||||
|
||||
自定义图标用法，下面以 `iconfont` 为例
|
||||
|
||||
#### 准备图标文件
|
||||
|
||||
文件后缀应为`.wxss`，如下方代码块所示：
|
||||
|
||||
```css
|
||||
@font-face {
|
||||
font-family: 'icon'; // 使用自定义的字体名称
|
||||
···
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-family: 'icon' !important; // 字体名称
|
||||
···
|
||||
}
|
||||
|
||||
.icon-a-0:before { // icon 图标。注意 FontClass 前缀与 font-family 保持一致
|
||||
content: '\e64d';
|
||||
}
|
||||
```
|
||||
- 添加所需图标，下载图标。图标库一般会提供 **在线链接** 或者 **下载至本地** 等使用方式。**在线链接** 方式会指向一个 `.css` 文件，可以下载或复制其内容，将其修改成后缀名为 `.wxss` 的文件
|
||||
- 将 `.wxss` 文件中的 `FontClass/Symbol前缀` 与 `Font Family` 两项内容保持一致，如: `FontClass/Symbol` 前缀为 `icon-`，则 `Font Family` 为 `icon`。
|
||||
|
||||
> 注：若是采用 `下载至本地` 方式，需关注 `.css` 和 `.ttf` 文件。由于微信小程序不支持处理 `ttf、woff、eot` 等文件，但支持 `base64`，所以需要将 `.ttf` 文件转换为 `base64` (可借助转换工具，如 [transfonter.org](https://transfonter.org/)，会得到一个 `stylesheet.css` 文件)，然后将 `.css` 文件中的 `@font-face {}` 内容替换为 `stylesheet.css` 中的 `base64` 内容，最后将 `.css` 文件修改后缀为 `.wxss`
|
||||
|
||||
#### 引入自定义图标
|
||||
|
||||
- 全局引入：在项目 `app.wxss`，使用 `@import` 引入上述的 `.wxss` 文件
|
||||
- 局部引入：在 `page` 对应的 `.wxss` 中，使用 `@import` 引入上述的 `.wxss` 文件
|
||||
|
||||
#### 自定义图标的使用
|
||||
|
||||
`<t-icon>` 组件中的 `prefix` 属性值与前面设置的 `Font Family` 保持一致，即 `prefix="icon"`，`name` 属性值为自定义图标名称，如图标的 `className` 为 `icon-a-1h`，则 `name="a-1h"`。
|
||||
|
||||
### 图片链接
|
||||
|
||||
{{ iconImage }}
|
||||
|
||||
### 全部图标
|
||||
|
||||
<td-icons-view />
|
||||
|
||||
## API
|
||||
|
||||
#### Props
|
||||
|
||||
| 属性 | 值类型 | 默认值 | 必传 | 说明 |
|
||||
| ----------- | -------- | ---------- | ---- |----------------------------------------------------------------- |
|
||||
| name | String | - | Y | 图标名称或图片链接 |
|
||||
| size | String | inherit | N | 图标大小, 如 `20`, `20px`, `48rpx`, 默认单位是 `px` |
|
||||
| color | String | initial | N | 图标颜色 |
|
||||
| prefix | String | - | N | 自定义图标前缀 |
|
||||
| custom-style | String | - | N | 自定义组件样式 |
|
||||
| external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、图片图标、基础图标等元素类名。`['t-class']` | N
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件 | event.detail | 说明 |
|
||||
| ---------- | ------------ | -------------- |
|
||||
| bind:click | - | 点击图标时触发 |
|
||||
@@ -0,0 +1,18 @@
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
export default class Icon extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
properties: import("./type").TdIconProps;
|
||||
data: {
|
||||
componentPrefix: string;
|
||||
classPrefix: string;
|
||||
isImage: boolean;
|
||||
iconStyle: any;
|
||||
};
|
||||
observers: {
|
||||
'name, color, size, customStyle'(): void;
|
||||
};
|
||||
methods: {
|
||||
onTap(event: any): void;
|
||||
setIconStyle(): void;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
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 { styles, addUnit } from '../common/utils';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-icon`;
|
||||
let Icon = class Icon extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [`${prefix}-class`];
|
||||
this.properties = props;
|
||||
this.data = {
|
||||
componentPrefix: prefix,
|
||||
classPrefix: name,
|
||||
isImage: false,
|
||||
iconStyle: undefined,
|
||||
};
|
||||
this.observers = {
|
||||
'name, color, size, customStyle'() {
|
||||
this.setIconStyle();
|
||||
},
|
||||
};
|
||||
this.methods = {
|
||||
onTap(event) {
|
||||
this.triggerEvent('click', event.detail);
|
||||
},
|
||||
setIconStyle() {
|
||||
const { name, color, size, customStyle } = this.properties;
|
||||
const isImage = name.indexOf('/') !== -1;
|
||||
const sizeValue = addUnit(size);
|
||||
const sizeStyle = isImage ? { width: sizeValue, height: sizeValue } : {};
|
||||
const colorStyle = color ? { color: color } : {};
|
||||
const fontStyle = size ? { 'font-size': sizeValue } : {};
|
||||
this.setData({
|
||||
isImage,
|
||||
iconStyle: `${styles(Object.assign(Object.assign(Object.assign({}, colorStyle), fontStyle), sizeStyle))}${customStyle ? `;${customStyle}` : ''}`,
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
Icon = __decorate([
|
||||
wxComponent()
|
||||
], Icon);
|
||||
export default Icon;
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
<view
|
||||
class="{{ prefix ? prefix : classPrefix}} {{componentPrefix}}-class"
|
||||
style="{{ iconStyle }}"
|
||||
bind:tap="onTap"
|
||||
aria-hidden="{{ariaHidden}}"
|
||||
aria-label="{{ariaLabel}}"
|
||||
aria-role="{{ariaRole}}"
|
||||
>
|
||||
<view wx:if="{{ isImage }}" class="{{classPrefix}}--image">
|
||||
<image src="{{ name }}" mode="aspectFit" class="{{classPrefix}}__image" />
|
||||
</view>
|
||||
<label wx:else class="{{ prefix ? prefix : classPrefix }}-{{ name }} {{ classPrefix }}-base"> </label>
|
||||
</view>
|
||||
@@ -0,0 +1,770 @@
|
||||
.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);
|
||||
}
|
||||
@font-face {
|
||||
font-family: t;
|
||||
src: url('https://tdesign.gtimg.com/icon/0.1.2/fonts/t.eot'), url('https://tdesign.gtimg.com/icon/0.1.2/fonts/t.eot?#iefix') format('ded-opentype'), url('https://tdesign.gtimg.com/icon/0.1.2/fonts/t.woff') format('woff'), url('https://tdesign.gtimg.com/icon/0.1.2/fonts/t.ttf') format('truetype'), url('https://tdesign.gtimg.com/icon/0.1.2/fonts/t.svg') format('svg');
|
||||
/* iOS 4.1- */
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
.t-icon--image {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.t-icon__image {
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.t-icon-base {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
display: block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.t-icon {
|
||||
/* stylelint-disable-next-line declaration-no-important */
|
||||
font-family: t !important;
|
||||
/* prevent issues with browser extensions that change fonts */
|
||||
}
|
||||
.t-icon-add-circle:before {
|
||||
content: '\E001';
|
||||
}
|
||||
.t-icon-add-rectangle:before {
|
||||
content: '\E002';
|
||||
}
|
||||
.t-icon-add:before {
|
||||
content: '\E003';
|
||||
}
|
||||
.t-icon-app:before {
|
||||
content: '\E004';
|
||||
}
|
||||
.t-icon-arrow-down-rectangle:before {
|
||||
content: '\E005';
|
||||
}
|
||||
.t-icon-arrow-down:before {
|
||||
content: '\E006';
|
||||
}
|
||||
.t-icon-arrow-left:before {
|
||||
content: '\E007';
|
||||
}
|
||||
.t-icon-arrow-right:before {
|
||||
content: '\E008';
|
||||
}
|
||||
.t-icon-arrow-up:before {
|
||||
content: '\E009';
|
||||
}
|
||||
.t-icon-attach:before {
|
||||
content: '\E00A';
|
||||
}
|
||||
.t-icon-backtop-rectangle:before {
|
||||
content: '\E00B';
|
||||
}
|
||||
.t-icon-backtop:before {
|
||||
content: '\E00C';
|
||||
}
|
||||
.t-icon-backward:before {
|
||||
content: '\E00D';
|
||||
}
|
||||
.t-icon-barcode:before {
|
||||
content: '\E00E';
|
||||
}
|
||||
.t-icon-books:before {
|
||||
content: '\E00F';
|
||||
}
|
||||
.t-icon-browse-off:before {
|
||||
content: '\E010';
|
||||
}
|
||||
.t-icon-browse:before {
|
||||
content: '\E011';
|
||||
}
|
||||
.t-icon-bulletpoint:before {
|
||||
content: '\E012';
|
||||
}
|
||||
.t-icon-calendar:before {
|
||||
content: '\E013';
|
||||
}
|
||||
.t-icon-call:before {
|
||||
content: '\E014';
|
||||
}
|
||||
.t-icon-caret-down-small:before {
|
||||
content: '\E015';
|
||||
}
|
||||
.t-icon-caret-down:before {
|
||||
content: '\E016';
|
||||
}
|
||||
.t-icon-caret-left-small:before {
|
||||
content: '\E017';
|
||||
}
|
||||
.t-icon-caret-left:before {
|
||||
content: '\E018';
|
||||
}
|
||||
.t-icon-caret-right-small:before {
|
||||
content: '\E019';
|
||||
}
|
||||
.t-icon-caret-right:before {
|
||||
content: '\E01A';
|
||||
}
|
||||
.t-icon-caret-up-small:before {
|
||||
content: '\E01B';
|
||||
}
|
||||
.t-icon-caret-up:before {
|
||||
content: '\E01C';
|
||||
}
|
||||
.t-icon-cart:before {
|
||||
content: '\E01D';
|
||||
}
|
||||
.t-icon-chart-bar:before {
|
||||
content: '\E01E';
|
||||
}
|
||||
.t-icon-chart-bubble:before {
|
||||
content: '\E01F';
|
||||
}
|
||||
.t-icon-chart-pie:before {
|
||||
content: '\E020';
|
||||
}
|
||||
.t-icon-chart:before {
|
||||
content: '\E021';
|
||||
}
|
||||
.t-icon-chat:before {
|
||||
content: '\E022';
|
||||
}
|
||||
.t-icon-check-circle-filled:before {
|
||||
content: '\E023';
|
||||
}
|
||||
.t-icon-check-circle:before {
|
||||
content: '\E024';
|
||||
}
|
||||
.t-icon-check-rectangle-filled:before {
|
||||
content: '\E025';
|
||||
}
|
||||
.t-icon-check-rectangle:before {
|
||||
content: '\E026';
|
||||
}
|
||||
.t-icon-check:before {
|
||||
content: '\E027';
|
||||
}
|
||||
.t-icon-chevron-down-circle:before {
|
||||
content: '\E028';
|
||||
}
|
||||
.t-icon-chevron-down-rectangle:before {
|
||||
content: '\E029';
|
||||
}
|
||||
.t-icon-chevron-down:before {
|
||||
content: '\E02A';
|
||||
}
|
||||
.t-icon-chevron-left-circle:before {
|
||||
content: '\E02B';
|
||||
}
|
||||
.t-icon-chevron-left-double:before {
|
||||
content: '\E02C';
|
||||
}
|
||||
.t-icon-chevron-left-rectangle:before {
|
||||
content: '\E02D';
|
||||
}
|
||||
.t-icon-chevron-left:before {
|
||||
content: '\E02E';
|
||||
}
|
||||
.t-icon-chevron-right-circle:before {
|
||||
content: '\E02F';
|
||||
}
|
||||
.t-icon-chevron-right-double:before {
|
||||
content: '\E030';
|
||||
}
|
||||
.t-icon-chevron-right-rectangle:before {
|
||||
content: '\E031';
|
||||
}
|
||||
.t-icon-chevron-right:before {
|
||||
content: '\E032';
|
||||
}
|
||||
.t-icon-chevron-up-circle:before {
|
||||
content: '\E033';
|
||||
}
|
||||
.t-icon-chevron-up-rectangle:before {
|
||||
content: '\E034';
|
||||
}
|
||||
.t-icon-chevron-up:before {
|
||||
content: '\E035';
|
||||
}
|
||||
.t-icon-circle:before {
|
||||
content: '\E036';
|
||||
}
|
||||
.t-icon-clear:before {
|
||||
content: '\E037';
|
||||
}
|
||||
.t-icon-close-circle-filled:before {
|
||||
content: '\E038';
|
||||
}
|
||||
.t-icon-close-circle:before {
|
||||
content: '\E039';
|
||||
}
|
||||
.t-icon-close-rectangle:before {
|
||||
content: '\E03A';
|
||||
}
|
||||
.t-icon-close:before {
|
||||
content: '\E03B';
|
||||
}
|
||||
.t-icon-cloud-download:before {
|
||||
content: '\E03C';
|
||||
}
|
||||
.t-icon-cloud-upload:before {
|
||||
content: '\E03D';
|
||||
}
|
||||
.t-icon-cloud:before {
|
||||
content: '\E03E';
|
||||
}
|
||||
.t-icon-code:before {
|
||||
content: '\E03F';
|
||||
}
|
||||
.t-icon-control-platform:before {
|
||||
content: '\E040';
|
||||
}
|
||||
.t-icon-creditcard:before {
|
||||
content: '\E041';
|
||||
}
|
||||
.t-icon-dashboard:before {
|
||||
content: '\E042';
|
||||
}
|
||||
.t-icon-delete:before {
|
||||
content: '\E043';
|
||||
}
|
||||
.t-icon-desktop:before {
|
||||
content: '\E044';
|
||||
}
|
||||
.t-icon-discount-filled:before {
|
||||
content: '\E045';
|
||||
}
|
||||
.t-icon-discount:before {
|
||||
content: '\E046';
|
||||
}
|
||||
.t-icon-download:before {
|
||||
content: '\E047';
|
||||
}
|
||||
.t-icon-edit-1:before {
|
||||
content: '\E048';
|
||||
}
|
||||
.t-icon-edit:before {
|
||||
content: '\E049';
|
||||
}
|
||||
.t-icon-ellipsis:before {
|
||||
content: '\E04A';
|
||||
}
|
||||
.t-icon-enter:before {
|
||||
content: '\E04B';
|
||||
}
|
||||
.t-icon-error-circle-filled:before {
|
||||
content: '\E04C';
|
||||
}
|
||||
.t-icon-error-circle:before {
|
||||
content: '\E04D';
|
||||
}
|
||||
.t-icon-error:before {
|
||||
content: '\E04E';
|
||||
}
|
||||
.t-icon-file-add:before {
|
||||
content: '\E04F';
|
||||
}
|
||||
.t-icon-file-copy:before {
|
||||
content: '\E050';
|
||||
}
|
||||
.t-icon-file-excel:before {
|
||||
content: '\E051';
|
||||
}
|
||||
.t-icon-file-icon:before {
|
||||
content: '\E052';
|
||||
}
|
||||
.t-icon-file-image:before {
|
||||
content: '\E053';
|
||||
}
|
||||
.t-icon-file-paste:before {
|
||||
content: '\E054';
|
||||
}
|
||||
.t-icon-file-pdf:before {
|
||||
content: '\E055';
|
||||
}
|
||||
.t-icon-file-powerpoint:before {
|
||||
content: '\E056';
|
||||
}
|
||||
.t-icon-file-unknown:before {
|
||||
content: '\E057';
|
||||
}
|
||||
.t-icon-file-word:before {
|
||||
content: '\E058';
|
||||
}
|
||||
.t-icon-file:before {
|
||||
content: '\E059';
|
||||
}
|
||||
.t-icon-filter-clear:before {
|
||||
content: '\E05A';
|
||||
}
|
||||
.t-icon-filter:before {
|
||||
content: '\E05B';
|
||||
}
|
||||
.t-icon-flag:before {
|
||||
content: '\E05C';
|
||||
}
|
||||
.t-icon-folder-add:before {
|
||||
content: '\E05D';
|
||||
}
|
||||
.t-icon-folder-open:before {
|
||||
content: '\E05E';
|
||||
}
|
||||
.t-icon-folder:before {
|
||||
content: '\E05F';
|
||||
}
|
||||
.t-icon-fork:before {
|
||||
content: '\E060';
|
||||
}
|
||||
.t-icon-format-horizontal-align-bottom:before {
|
||||
content: '\E061';
|
||||
}
|
||||
.t-icon-format-horizontal-align-center:before {
|
||||
content: '\E062';
|
||||
}
|
||||
.t-icon-format-horizontal-align-top:before {
|
||||
content: '\E063';
|
||||
}
|
||||
.t-icon-format-vertical-align-center:before {
|
||||
content: '\E064';
|
||||
}
|
||||
.t-icon-format-vertical-align-left:before {
|
||||
content: '\E065';
|
||||
}
|
||||
.t-icon-format-vertical-align-right:before {
|
||||
content: '\E066';
|
||||
}
|
||||
.t-icon-forward:before {
|
||||
content: '\E067';
|
||||
}
|
||||
.t-icon-fullscreen-exit:before {
|
||||
content: '\E068';
|
||||
}
|
||||
.t-icon-fullscreen:before {
|
||||
content: '\E069';
|
||||
}
|
||||
.t-icon-gender-female:before {
|
||||
content: '\E06A';
|
||||
}
|
||||
.t-icon-gender-male:before {
|
||||
content: '\E06B';
|
||||
}
|
||||
.t-icon-gift:before {
|
||||
content: '\E06C';
|
||||
}
|
||||
.t-icon-heart-filled:before {
|
||||
content: '\E06D';
|
||||
}
|
||||
.t-icon-heart:before {
|
||||
content: '\E06E';
|
||||
}
|
||||
.t-icon-help-circle-filled:before {
|
||||
content: '\E06F';
|
||||
}
|
||||
.t-icon-help-circle:before {
|
||||
content: '\E070';
|
||||
}
|
||||
.t-icon-help:before {
|
||||
content: '\E071';
|
||||
}
|
||||
.t-icon-history:before {
|
||||
content: '\E072';
|
||||
}
|
||||
.t-icon-home:before {
|
||||
content: '\E073';
|
||||
}
|
||||
.t-icon-hourglass:before {
|
||||
content: '\E074';
|
||||
}
|
||||
.t-icon-image-error:before {
|
||||
content: '\E075';
|
||||
}
|
||||
.t-icon-image:before {
|
||||
content: '\E076';
|
||||
}
|
||||
.t-icon-info-circle-filled:before {
|
||||
content: '\E077';
|
||||
}
|
||||
.t-icon-info-circle:before {
|
||||
content: '\E078';
|
||||
}
|
||||
.t-icon-internet:before {
|
||||
content: '\E079';
|
||||
}
|
||||
.t-icon-jump:before {
|
||||
content: '\E07A';
|
||||
}
|
||||
.t-icon-laptop:before {
|
||||
content: '\E07B';
|
||||
}
|
||||
.t-icon-layers:before {
|
||||
content: '\E07C';
|
||||
}
|
||||
.t-icon-link-unlink:before {
|
||||
content: '\E07D';
|
||||
}
|
||||
.t-icon-link:before {
|
||||
content: '\E07E';
|
||||
}
|
||||
.t-icon-loading:before {
|
||||
content: '\E07F';
|
||||
}
|
||||
.t-icon-location:before {
|
||||
content: '\E080';
|
||||
}
|
||||
.t-icon-lock-off:before {
|
||||
content: '\E081';
|
||||
}
|
||||
.t-icon-lock-on:before {
|
||||
content: '\E082';
|
||||
}
|
||||
.t-icon-login:before {
|
||||
content: '\E083';
|
||||
}
|
||||
.t-icon-logo-android:before {
|
||||
content: '\E084';
|
||||
}
|
||||
.t-icon-logo-apple-filled:before {
|
||||
content: '\E085';
|
||||
}
|
||||
.t-icon-logo-apple:before {
|
||||
content: '\E086';
|
||||
}
|
||||
.t-icon-logo-chrome-filled:before {
|
||||
content: '\E087';
|
||||
}
|
||||
.t-icon-logo-chrome:before {
|
||||
content: '\E088';
|
||||
}
|
||||
.t-icon-logo-codepen:before {
|
||||
content: '\E089';
|
||||
}
|
||||
.t-icon-logo-github-filled:before {
|
||||
content: '\E08A';
|
||||
}
|
||||
.t-icon-logo-github:before {
|
||||
content: '\E08B';
|
||||
}
|
||||
.t-icon-logo-ie-filled:before {
|
||||
content: '\E08C';
|
||||
}
|
||||
.t-icon-logo-ie:before {
|
||||
content: '\E08D';
|
||||
}
|
||||
.t-icon-logo-qq:before {
|
||||
content: '\E08E';
|
||||
}
|
||||
.t-icon-logo-wechat:before {
|
||||
content: '\E08F';
|
||||
}
|
||||
.t-icon-logo-wecom:before {
|
||||
content: '\E090';
|
||||
}
|
||||
.t-icon-logo-windows-filled:before {
|
||||
content: '\E091';
|
||||
}
|
||||
.t-icon-logo-windows:before {
|
||||
content: '\E092';
|
||||
}
|
||||
.t-icon-logout:before {
|
||||
content: '\E093';
|
||||
}
|
||||
.t-icon-mail:before {
|
||||
content: '\E094';
|
||||
}
|
||||
.t-icon-menu-fold:before {
|
||||
content: '\E095';
|
||||
}
|
||||
.t-icon-menu-unfold:before {
|
||||
content: '\E096';
|
||||
}
|
||||
.t-icon-minus-circle-filled:before {
|
||||
content: '\E097';
|
||||
}
|
||||
.t-icon-minus-circle:before {
|
||||
content: '\E098';
|
||||
}
|
||||
.t-icon-minus-rectangle:before {
|
||||
content: '\E099';
|
||||
}
|
||||
.t-icon-mirror:before {
|
||||
content: '\E09A';
|
||||
}
|
||||
.t-icon-mobile-vibrate:before {
|
||||
content: '\E09B';
|
||||
}
|
||||
.t-icon-mobile:before {
|
||||
content: '\E09C';
|
||||
}
|
||||
.t-icon-money-circle:before {
|
||||
content: '\E09D';
|
||||
}
|
||||
.t-icon-more:before {
|
||||
content: '\E09E';
|
||||
}
|
||||
.t-icon-move:before {
|
||||
content: '\E09F';
|
||||
}
|
||||
.t-icon-next:before {
|
||||
content: '\E0A0';
|
||||
}
|
||||
.t-icon-notification-filled:before {
|
||||
content: '\E0A1';
|
||||
}
|
||||
.t-icon-notification:before {
|
||||
content: '\E0A2';
|
||||
}
|
||||
.t-icon-order-adjustment-column:before {
|
||||
content: '\E0A3';
|
||||
}
|
||||
.t-icon-order-ascending:before {
|
||||
content: '\E0A4';
|
||||
}
|
||||
.t-icon-order-descending:before {
|
||||
content: '\E0A5';
|
||||
}
|
||||
.t-icon-page-first:before {
|
||||
content: '\E0A6';
|
||||
}
|
||||
.t-icon-page-last:before {
|
||||
content: '\E0A7';
|
||||
}
|
||||
.t-icon-pause-circle-filled:before {
|
||||
content: '\E0A8';
|
||||
}
|
||||
.t-icon-photo:before {
|
||||
content: '\E0A9';
|
||||
}
|
||||
.t-icon-pin-filled:before {
|
||||
content: '\E0AA';
|
||||
}
|
||||
.t-icon-pin:before {
|
||||
content: '\E0AB';
|
||||
}
|
||||
.t-icon-play-circle-filled:before {
|
||||
content: '\E0AC';
|
||||
}
|
||||
.t-icon-play-circle-stroke:before {
|
||||
content: '\E0AD';
|
||||
}
|
||||
.t-icon-play-circle:before {
|
||||
content: '\E0AE';
|
||||
}
|
||||
.t-icon-play:before {
|
||||
content: '\E0AF';
|
||||
}
|
||||
.t-icon-poweroff:before {
|
||||
content: '\E0B0';
|
||||
}
|
||||
.t-icon-precise-monitor:before {
|
||||
content: '\E0B1';
|
||||
}
|
||||
.t-icon-previous:before {
|
||||
content: '\E0B2';
|
||||
}
|
||||
.t-icon-print:before {
|
||||
content: '\E0B3';
|
||||
}
|
||||
.t-icon-qrcode:before {
|
||||
content: '\E0B4';
|
||||
}
|
||||
.t-icon-queue:before {
|
||||
content: '\E0B5';
|
||||
}
|
||||
.t-icon-rectangle:before {
|
||||
content: '\E0B6';
|
||||
}
|
||||
.t-icon-refresh:before {
|
||||
content: '\E0B7';
|
||||
}
|
||||
.t-icon-relativity:before {
|
||||
content: '\E0B8';
|
||||
}
|
||||
.t-icon-remove:before {
|
||||
content: '\E0B9';
|
||||
}
|
||||
.t-icon-rollback:before {
|
||||
content: '\E0BA';
|
||||
}
|
||||
.t-icon-rollfront:before {
|
||||
content: '\E0BB';
|
||||
}
|
||||
.t-icon-root-list:before {
|
||||
content: '\E0BC';
|
||||
}
|
||||
.t-icon-rotation:before {
|
||||
content: '\E0BD';
|
||||
}
|
||||
.t-icon-round:before {
|
||||
content: '\E0BE';
|
||||
}
|
||||
.t-icon-save:before {
|
||||
content: '\E0BF';
|
||||
}
|
||||
.t-icon-scan:before {
|
||||
content: '\E0C0';
|
||||
}
|
||||
.t-icon-search:before {
|
||||
content: '\E0C1';
|
||||
}
|
||||
.t-icon-secured:before {
|
||||
content: '\E0C2';
|
||||
}
|
||||
.t-icon-server:before {
|
||||
content: '\E0C3';
|
||||
}
|
||||
.t-icon-service:before {
|
||||
content: '\E0C4';
|
||||
}
|
||||
.t-icon-setting:before {
|
||||
content: '\E0C5';
|
||||
}
|
||||
.t-icon-share:before {
|
||||
content: '\E0C6';
|
||||
}
|
||||
.t-icon-shop:before {
|
||||
content: '\E0C7';
|
||||
}
|
||||
.t-icon-slash:before {
|
||||
content: '\E0C8';
|
||||
}
|
||||
.t-icon-sound:before {
|
||||
content: '\E0C9';
|
||||
}
|
||||
.t-icon-star-filled:before {
|
||||
content: '\E0CA';
|
||||
}
|
||||
.t-icon-star:before {
|
||||
content: '\E0CB';
|
||||
}
|
||||
.t-icon-stop-circle-1:before {
|
||||
content: '\E0CC';
|
||||
}
|
||||
.t-icon-stop-circle-filled:before {
|
||||
content: '\E0CD';
|
||||
}
|
||||
.t-icon-stop-circle:before {
|
||||
content: '\E0CE';
|
||||
}
|
||||
.t-icon-stop:before {
|
||||
content: '\E0CF';
|
||||
}
|
||||
.t-icon-swap-left:before {
|
||||
content: '\E0D0';
|
||||
}
|
||||
.t-icon-swap-right:before {
|
||||
content: '\E0D1';
|
||||
}
|
||||
.t-icon-swap:before {
|
||||
content: '\E0D2';
|
||||
}
|
||||
.t-icon-thumb-down:before {
|
||||
content: '\E0D3';
|
||||
}
|
||||
.t-icon-thumb-up:before {
|
||||
content: '\E0D4';
|
||||
}
|
||||
.t-icon-time-filled:before {
|
||||
content: '\E0D5';
|
||||
}
|
||||
.t-icon-time:before {
|
||||
content: '\E0D6';
|
||||
}
|
||||
.t-icon-tips:before {
|
||||
content: '\E0D7';
|
||||
}
|
||||
.t-icon-tools:before {
|
||||
content: '\E0D8';
|
||||
}
|
||||
.t-icon-unfold-less:before {
|
||||
content: '\E0D9';
|
||||
}
|
||||
.t-icon-unfold-more:before {
|
||||
content: '\E0DA';
|
||||
}
|
||||
.t-icon-upload:before {
|
||||
content: '\E0DB';
|
||||
}
|
||||
.t-icon-usb:before {
|
||||
content: '\E0DC';
|
||||
}
|
||||
.t-icon-user-add:before {
|
||||
content: '\E0DD';
|
||||
}
|
||||
.t-icon-user-avatar:before {
|
||||
content: '\E0DE';
|
||||
}
|
||||
.t-icon-user-circle:before {
|
||||
content: '\E0DF';
|
||||
}
|
||||
.t-icon-user-clear:before {
|
||||
content: '\E0E0';
|
||||
}
|
||||
.t-icon-user-talk:before {
|
||||
content: '\E0E1';
|
||||
}
|
||||
.t-icon-user:before {
|
||||
content: '\E0E2';
|
||||
}
|
||||
.t-icon-usergroup-add:before {
|
||||
content: '\E0E3';
|
||||
}
|
||||
.t-icon-usergroup-clear:before {
|
||||
content: '\E0E4';
|
||||
}
|
||||
.t-icon-usergroup:before {
|
||||
content: '\E0E5';
|
||||
}
|
||||
.t-icon-video:before {
|
||||
content: '\E0E6';
|
||||
}
|
||||
.t-icon-view-column:before {
|
||||
content: '\E0E7';
|
||||
}
|
||||
.t-icon-view-list:before {
|
||||
content: '\E0E8';
|
||||
}
|
||||
.t-icon-view-module:before {
|
||||
content: '\E0E9';
|
||||
}
|
||||
.t-icon-wallet:before {
|
||||
content: '\E0EA';
|
||||
}
|
||||
.t-icon-wifi:before {
|
||||
content: '\E0EB';
|
||||
}
|
||||
.t-icon-zoom-in:before {
|
||||
content: '\E0EC';
|
||||
}
|
||||
.t-icon-zoom-out:before {
|
||||
content: '\E0ED';
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
import { TdIconProps } from './type';
|
||||
declare const props: TdIconProps;
|
||||
export default props;
|
||||
@@ -0,0 +1,24 @@
|
||||
const props = {
|
||||
customStyle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
value: '',
|
||||
required: true,
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
value: undefined,
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
value: undefined,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
@@ -0,0 +1,27 @@
|
||||
export interface TdIconProps {
|
||||
customStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
required?: boolean;
|
||||
};
|
||||
color?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
required?: boolean;
|
||||
};
|
||||
name: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
required?: boolean;
|
||||
};
|
||||
size?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
required?: boolean;
|
||||
};
|
||||
prefix?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
reuqired?: boolean;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export {};
|
||||
@@ -0,0 +1,22 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
|
||||
### Loading Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
custom-style `v0.25.0` | String | - | \- | N
|
||||
delay | Number | 0 | \- | N
|
||||
duration | Number | 800 | \- | N
|
||||
external-classes | Array | - | `['t-class', 't-class-text', 't-class-indicator']` | N
|
||||
indicator | Boolean | true | \- | N
|
||||
inherit-color | Boolean | false | \- | N
|
||||
layout | String | horizontal | options：horizontal/vertical | N
|
||||
loading | Boolean | true | \- | N
|
||||
pause | Boolean | false | \- | N
|
||||
progress | Number | - | \- | N
|
||||
reverse | Boolean | - | \- | N
|
||||
size | String | '40rpx' | \- | N
|
||||
text | String / Slot | - | \- | N
|
||||
theme | String | circular | options：circular/spinner/bar/error/dots | N
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
title: Loading 加载
|
||||
description: 用于表示页面或操作的加载状态，给予用户反馈的同时减缓等待的焦虑感，由一个或一组反馈动效组成。
|
||||
spline: message
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-95%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-95%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-83%25-blue" /></span>
|
||||
## 引入
|
||||
|
||||
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"t-loading": "tdesign-miniprogram/loading/loading"
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 纯icon
|
||||
|
||||
{{ base }}
|
||||
|
||||
### icon加文字横向
|
||||
|
||||
{{ horizontal }}
|
||||
|
||||
### icon加文字竖向
|
||||
|
||||
{{ vertical }}
|
||||
|
||||
### 纯文字
|
||||
|
||||
{{ text }}
|
||||
|
||||
### 加载失败
|
||||
|
||||
{{ error }}
|
||||
|
||||
### 状态
|
||||
|
||||
{{ status }}
|
||||
|
||||
### 加载速度
|
||||
|
||||
{{ duration }}
|
||||
|
||||
### 规格
|
||||
|
||||
{{ size }}
|
||||
|
||||
## API
|
||||
### Loading Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
custom-style `v0.25.0` | String | - | 自定义组件样式 | N
|
||||
delay | Number | 0 | 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N
|
||||
duration | Number | 800 | 加载动画执行完成一次的时间，单位：毫秒 | N
|
||||
external-classes | Array | - | 组件类名，分别用于设置加载组件外层元素，加载组件文本，加载组件指示符，加载指示符内侧同心圆等元素类名。`['t-class', 't-class-text', 't-class-indicator']` | N
|
||||
indicator | Boolean | true | 是否显示加载指示符 | N
|
||||
inherit-color | Boolean | false | 是否继承父元素颜色 | N
|
||||
layout | String | horizontal | 对齐方式。可选项：horizontal/vertical | N
|
||||
loading | Boolean | true | 是否处于加载状态 | N
|
||||
pause | Boolean | false | 是否暂停动画 | N
|
||||
progress | Number | - | 加载进度 | N
|
||||
reverse | Boolean | - | 加载动画是否反向 | N
|
||||
size | String | '40rpx' | 尺寸，示例：40rpx/20px | N
|
||||
text | String / Slot | - | 加载提示文案 | N
|
||||
theme | String | circular | 加载组件类型。可选项：circular/spinner/bar/error/dots | N
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from './props';
|
||||
export * from './type';
|
||||
export * from './loading';
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from './props';
|
||||
export * from './type';
|
||||
export * from './loading';
|
||||
@@ -0,0 +1,81 @@
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
import type { TdLoadingProps } from './type';
|
||||
export interface LoadingProps extends TdLoadingProps {
|
||||
}
|
||||
export default class Loading extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
show: boolean;
|
||||
};
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
properties: {
|
||||
customStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
delay?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
duration?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
externalClasses?: {
|
||||
type: ArrayConstructor;
|
||||
value?: ["t-class", "t-class-text", "t-class-indicator"];
|
||||
};
|
||||
indicator?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
inheritColor?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
layout?: {
|
||||
type: StringConstructor;
|
||||
value?: "horizontal" | "vertical";
|
||||
};
|
||||
loading?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
pause?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
progress?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
reverse?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
size?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
text?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
theme?: {
|
||||
type: StringConstructor;
|
||||
value?: "error" | "circular" | "spinner" | "bar" | "dots";
|
||||
};
|
||||
};
|
||||
timer: any;
|
||||
observers: {
|
||||
loading(this: any, cur: any): void;
|
||||
};
|
||||
lifetimes: {
|
||||
detached(): void;
|
||||
};
|
||||
refreshPage(): void;
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
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}-loading`;
|
||||
let Loading = class Loading extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [`${prefix}-class`, `${prefix}-class-text`, `${prefix}-class-indicator`];
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
show: true,
|
||||
};
|
||||
this.options = {
|
||||
multipleSlots: true,
|
||||
};
|
||||
this.properties = Object.assign({}, props);
|
||||
this.timer = null;
|
||||
this.observers = {
|
||||
loading(cur) {
|
||||
const { delay } = this.properties;
|
||||
if (this.timer) {
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
if (cur) {
|
||||
if (delay) {
|
||||
this.timer = setTimeout(() => {
|
||||
this.setData({ show: cur });
|
||||
this.timer = null;
|
||||
}, delay);
|
||||
}
|
||||
else {
|
||||
this.setData({ show: cur });
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.setData({ show: cur });
|
||||
}
|
||||
},
|
||||
};
|
||||
this.lifetimes = {
|
||||
detached() {
|
||||
clearTimeout(this.timer);
|
||||
},
|
||||
};
|
||||
}
|
||||
refreshPage() {
|
||||
this.triggerEvent('reload');
|
||||
}
|
||||
};
|
||||
Loading = __decorate([
|
||||
wxComponent()
|
||||
], Loading);
|
||||
export default Loading;
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
<wxs src="../common/utils.wxs" module="utils" />
|
||||
<view
|
||||
style="{{ customStyle }};{{ !text && theme != 'error' && 'width: ' + utils.addUnit(size) + '; height: ' + utils.addUnit(size)}}"
|
||||
class="{{prefix}}-class"
|
||||
>
|
||||
<view
|
||||
wx:if="{{theme === 'bar' && theme !== 'error'}}"
|
||||
style="{{progress >= 0 ? 'width:' + progress + '%' : ''}}"
|
||||
class="{{prefix}}-class-indicator {{classPrefix}}__bar {{classPrefix}}__bar--{{progress < 0 ? 'animation' : progress < 100 ? 'static': ''}} {{progress >= 100 || !loading ? classPrefix + '__bar--loaded' : ''}}"
|
||||
></view>
|
||||
<view class="{{classPrefix}} {{classPrefix + '--' + layout}}" style="{{show ? '' : 'display:none'}}" wx:else>
|
||||
<view
|
||||
wx:if="{{indicator && theme != 'error'}}"
|
||||
class="{{prefix}}-class-indicator {{classPrefix}}__spinner {{classPrefix}}__spinner--{{ theme }} {{reverse ? 'reverse' : ''}}"
|
||||
style="width: {{ utils.addUnit(size) }}; height: {{ utils.addUnit(size) }}; {{inheritColor ? 'color: inherit' : ''}} {{indicator ? '' : 'display:none'}}; {{duration ? 'animation-duration: ' + duration / 1000 + 's;' : ''}} animation-play-state: {{pause ? 'paused' : 'running'}};"
|
||||
>
|
||||
<view wx:if="{{ theme === 'spinner' }}" wx:for="{{12}}" wx:key="index" class="{{classPrefix}}__dot" />
|
||||
<view wx:if="{{ theme === 'circular' }}" class="{{classPrefix}}__circular" />
|
||||
<block wx:if="{{ theme === 'dots' }}">
|
||||
<view
|
||||
class="{{classPrefix}}__dot"
|
||||
style="{{duration ? 'animation-duration: ' + duration/1000 + 's; animation-delay:' + 0 + 's;' : ''}} animation-play-state: {{pause ? 'paused' : 'running'}};"
|
||||
></view>
|
||||
<view
|
||||
class="{{classPrefix}}__dot"
|
||||
style="{{duration ? 'animation-duration: ' + duration/1000 + 's; animation-delay:' + duration * 1 / 3000 + 's;' : ''}} animation-play-state: {{pause ? 'paused' : 'running'}};"
|
||||
></view>
|
||||
<view
|
||||
class="{{classPrefix}}__dot"
|
||||
style="{{duration ? 'animation-duration: ' + duration/1000 + 's; animation-delay:' + duration * 2 / 3000 + 's;' : ''}} animation-play-state: {{pause ? 'paused' : 'running'}};"
|
||||
></view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="{{utils.cls(classPrefix + '__text', [layout])}} {{prefix}}-class-text">
|
||||
<view wx:if="{{theme === 'error'}}">
|
||||
加载失败
|
||||
<text class="{{classPrefix}}__refresh-btn" bind:tap="refreshPage">刷新</text>
|
||||
</view>
|
||||
<block wx:if="{{text && text !== 'slot'}}">{{text}}</block>
|
||||
<slot name="text" />
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,241 @@
|
||||
.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-loading {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.t-loading__spinner {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
animation: rotate 0.8s linear infinite;
|
||||
color: var(--td-loading-color, var(--td-primary-color, #0052d9));
|
||||
}
|
||||
.t-loading__spinner.reverse {
|
||||
animation-name: rotateReverse;
|
||||
}
|
||||
.t-loading__spinner--spinner {
|
||||
animation-timing-function: steps(12);
|
||||
color: var(--td-font-gray-1, rgba(0, 0, 0, 0.9));
|
||||
}
|
||||
.t-loading__spinner--spinner .t-loading__dot {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.t-loading__spinner--spinner .t-loading__dot::before {
|
||||
display: block;
|
||||
width: 5rpx;
|
||||
height: 25%;
|
||||
margin: 0 auto;
|
||||
background-color: currentColor;
|
||||
border-radius: 40%;
|
||||
content: ' ';
|
||||
}
|
||||
.t-loading__spinner--circular .t-loading__circular {
|
||||
border-radius: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: conic-gradient(from 180deg at 50% 50%, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 60deg, currentColor 330deg, rgba(255, 255, 255, 0) 360deg);
|
||||
mask: radial-gradient(transparent calc(50% - 1rpx), #fff 50%);
|
||||
/* stylelint-disable-next-line */
|
||||
-webkit-mask: radial-gradient(transparent calc(50% - 1rpx), #fff 50%);
|
||||
}
|
||||
.t-loading__spinner--dots {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
animation: none;
|
||||
}
|
||||
.t-loading__spinner--dots .t-loading__dot {
|
||||
width: 20%;
|
||||
height: 20%;
|
||||
border-radius: 50%;
|
||||
background-color: currentColor;
|
||||
animation-duration: 1.8s;
|
||||
animation-name: dotting;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
.t-loading__text {
|
||||
font-size: var(--td-loading-text-font-size, 24rpx);
|
||||
line-height: var(--td-loading-text-line-height, 40rpx);
|
||||
}
|
||||
.t-loading__text--vertical:not(:first-child):not(:empty) {
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
.t-loading__text--horizontal:not(:first-child):not(:empty) {
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
.t-loading--vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
.t-loading--horizontal {
|
||||
flex-direction: row;
|
||||
vertical-align: top;
|
||||
}
|
||||
.t-loading__refresh-btn {
|
||||
margin-left: 16rpx;
|
||||
color: var(--td-loading-color, var(--td-primary-color, #0052d9));
|
||||
}
|
||||
.t-loading__bar {
|
||||
height: 6rpx;
|
||||
width: 80%;
|
||||
transition: 0.5s;
|
||||
background-color: var(--td-loading-color, var(--td-primary-color, #0052d9));
|
||||
display: none;
|
||||
}
|
||||
.t-loading__bar--static {
|
||||
display: block;
|
||||
}
|
||||
.t-loading__bar--loaded {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
animation: t-bar-loaded 1s ease-out;
|
||||
}
|
||||
.t-loading__bar--animation {
|
||||
animation: t-bar 8s linear;
|
||||
display: block;
|
||||
}
|
||||
@keyframes t-bar {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
50% {
|
||||
width: 70%;
|
||||
}
|
||||
100% {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
@keyframes t-bar-loaded {
|
||||
0% {
|
||||
height: 6rpx;
|
||||
opacity: 1;
|
||||
width: 90%;
|
||||
}
|
||||
50% {
|
||||
height: 6rpx;
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
}
|
||||
100% {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.t-loading__dot:nth-of-type(1) {
|
||||
transform: rotate(30deg);
|
||||
opacity: 0;
|
||||
}
|
||||
.t-loading__dot:nth-of-type(2) {
|
||||
transform: rotate(60deg);
|
||||
opacity: 0.08333333;
|
||||
}
|
||||
.t-loading__dot:nth-of-type(3) {
|
||||
transform: rotate(90deg);
|
||||
opacity: 0.16666667;
|
||||
}
|
||||
.t-loading__dot:nth-of-type(4) {
|
||||
transform: rotate(120deg);
|
||||
opacity: 0.25;
|
||||
}
|
||||
.t-loading__dot:nth-of-type(5) {
|
||||
transform: rotate(150deg);
|
||||
opacity: 0.33333333;
|
||||
}
|
||||
.t-loading__dot:nth-of-type(6) {
|
||||
transform: rotate(180deg);
|
||||
opacity: 0.41666667;
|
||||
}
|
||||
.t-loading__dot:nth-of-type(7) {
|
||||
transform: rotate(210deg);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.t-loading__dot:nth-of-type(8) {
|
||||
transform: rotate(240deg);
|
||||
opacity: 0.58333333;
|
||||
}
|
||||
.t-loading__dot:nth-of-type(9) {
|
||||
transform: rotate(270deg);
|
||||
opacity: 0.66666667;
|
||||
}
|
||||
.t-loading__dot:nth-of-type(10) {
|
||||
transform: rotate(300deg);
|
||||
opacity: 0.75;
|
||||
}
|
||||
.t-loading__dot:nth-of-type(11) {
|
||||
transform: rotate(330deg);
|
||||
opacity: 0.83333333;
|
||||
}
|
||||
.t-loading__dot:nth-of-type(12) {
|
||||
transform: rotate(360deg);
|
||||
opacity: 0.91666667;
|
||||
}
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotateReverse {
|
||||
from {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
@keyframes dotting {
|
||||
0% {
|
||||
opacity: 0.15;
|
||||
}
|
||||
1% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
33% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
34% {
|
||||
opacity: 0.15;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
import { TdLoadingProps } from './type';
|
||||
declare const props: TdLoadingProps;
|
||||
export default props;
|
||||
@@ -0,0 +1,55 @@
|
||||
const props = {
|
||||
customStyle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
delay: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
value: 800,
|
||||
},
|
||||
externalClasses: {
|
||||
type: Array,
|
||||
},
|
||||
indicator: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
inheritColor: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
value: 'horizontal',
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
pause: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
progress: {
|
||||
type: Number,
|
||||
},
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
value: '40rpx',
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
value: 'circular',
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
@@ -0,0 +1,58 @@
|
||||
export interface TdLoadingProps {
|
||||
customStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
delay?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
duration?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
externalClasses?: {
|
||||
type: ArrayConstructor;
|
||||
value?: ['t-class', 't-class-text', 't-class-indicator'];
|
||||
};
|
||||
indicator?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
inheritColor?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
layout?: {
|
||||
type: StringConstructor;
|
||||
value?: 'horizontal' | 'vertical';
|
||||
};
|
||||
loading?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
pause?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
progress?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
reverse?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
size?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
text?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
theme?: {
|
||||
type: StringConstructor;
|
||||
value?: 'circular' | 'spinner' | 'bar' | 'error' | 'dots';
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export {};
|
||||
@@ -0,0 +1,29 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
### Message Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
action | String / Slot | - | operation | N
|
||||
align | String | left | options：left/center。Typescript：`MessageAlignType` `type MessageAlignType = 'left' \| 'center'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N
|
||||
close-btn | String / Boolean / Object / Slot | false | \- | N
|
||||
content | String / Slot | - | \- | N
|
||||
custom-style `v0.25.0` | String | - | \- | N
|
||||
duration | Number | 3000 | \- | N
|
||||
external-classes | Array | - | `['t-class', 't-class-content', 't-class-icon', 't-class-action', 't-class-close-btn']` | N
|
||||
icon | String / Boolean / Object/ Slot | true | Typescript：`boolean \| 'info' \| 'bell'` | N
|
||||
marquee | Boolean / Object | false | Typescript：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N
|
||||
offset | Array | - | Typescript：`Array<string \| number>` | N
|
||||
theme | String | info | options：info/success/warning/error。Typescript：`MessageThemeList` `type MessageThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N
|
||||
visible | Boolean | false | \- | N
|
||||
default-visible | Boolean | false | uncontrolled property | N
|
||||
z-index | Number | 15000 | \- | N
|
||||
|
||||
### Message Events
|
||||
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
action-btn-click | - | \-
|
||||
close-btn-click | - | \-
|
||||
duration-end | \- | \-
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
title: Message 消息通知
|
||||
description: 用于轻量级反馈或提示，不会打断用户操作。
|
||||
spline: message
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-89%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-86%25-blue" /></span>
|
||||
## 引入
|
||||
|
||||
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"t-message": "tdesign-miniprogram/message/message"
|
||||
}
|
||||
```
|
||||
|
||||
### 引入 API
|
||||
|
||||
若以 API 形式调用 Message，则需在页面 `page.js` 中引入组件 API：
|
||||
|
||||
```js
|
||||
import Message from 'tdesign-miniprogram/message/index';
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 组件类型
|
||||
|
||||
弹窗内容为纯文本、标题和副标题、带输入框，用 API `Message.info` 方法调用反馈类对话框。
|
||||
|
||||
|
||||
{{ base }}
|
||||
|
||||
|
||||
### 组件状态
|
||||
|
||||
消息通知类型为普通（info）、警示（warning）、成功（success）、错误（error）
|
||||
|
||||
{{ theme }}
|
||||
|
||||
## API
|
||||
### Message Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
action | String / Slot | - | 操作 | N
|
||||
align | String | left | 文本对齐方式。可选项：left/center。TS 类型：`MessageAlignType` `type MessageAlignType = 'left' \| 'center'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N
|
||||
close-btn | String / Boolean / Object / Slot | false | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'user'，则显示组件内置图标，为 'slot' 则表示使用插槽。值类型为 object ，则会透传至 icon 组件。| N
|
||||
content | String / Slot | - | 用于自定义消息弹出内容 | N
|
||||
custom-style `v0.25.0` | String | - | 自定义组件样式 | N
|
||||
duration | Number | 3000 | 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器。 | N
|
||||
external-classes | Array | - | 样式类名，分别用于设置 组件外层、消息内容、左侧图标、操作按钮、关闭按钮等元素类名。`['t-class', 't-class-content', 't-class-icon', 't-class-action', 't-class-close-btn']` | N
|
||||
icon | String / Boolean / Object / Slot | true | 消息提醒前面的图标，可以自定义。值为 true 则根据 theme 显示对应的图标，值为 false 则不显示图标。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'info'，则显示组件内置图标，为 'slot' 则表示使用插槽。值类型为 object ，则会透传至 icon 组件。| N
|
||||
marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number
|
||||
; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N
|
||||
offset | Array | - | 相对于 placement 的偏移量，默认单位 rpx。示例：[-10, 20] 或 ['10rpx', '8rpx']。TS 类型：`Array<string \| number>` | N
|
||||
theme | String | info | 消息组件风格。可选项：info/success/warning/error。TS 类型：`MessageThemeList` `type MessageThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N
|
||||
visible | Boolean | false | 是否显示，隐藏时默认销毁组件 | N
|
||||
default-visible | Boolean | false | 是否显示，隐藏时默认销毁组件。非受控属性 | N
|
||||
z-index | Number | 15000 | 元素层级，样式默认为 15000 | N
|
||||
|
||||
### Message Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
action-btn-click | - | 当操作按钮存在时，用户点击操作按钮时触发
|
||||
close-btn-click | - | 当关闭按钮存在时，用户点击关闭按钮触发
|
||||
duration-end | \- | 计时结束后触发
|
||||
@@ -0,0 +1,17 @@
|
||||
/// <reference types="miniprogram-api-typings" />
|
||||
/// <reference types="miniprogram-api-typings" />
|
||||
/// <reference types="miniprogram-api-typings" />
|
||||
import { MessageProps } from './message.interface';
|
||||
declare type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
|
||||
interface MessageActionOptionsType extends Optional<MessageProps> {
|
||||
context?: Context;
|
||||
selector?: string;
|
||||
}
|
||||
declare const _default: {
|
||||
info(options: MessageActionOptionsType): WechatMiniprogram.Component.TrivialInstance;
|
||||
success(options: MessageActionOptionsType): WechatMiniprogram.Component.TrivialInstance;
|
||||
warning(options: MessageActionOptionsType): WechatMiniprogram.Component.TrivialInstance;
|
||||
error(options: MessageActionOptionsType): WechatMiniprogram.Component.TrivialInstance;
|
||||
hide(options: MessageActionOptionsType): void;
|
||||
};
|
||||
export default _default;
|
||||
@@ -0,0 +1,46 @@
|
||||
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 { MessageType } from './message.interface';
|
||||
import { getInstance } from '../common/utils';
|
||||
const showMessage = function (options, theme = MessageType.info) {
|
||||
const { context, selector = '#t-message' } = options, otherOptions = __rest(options, ["context", "selector"]);
|
||||
const instance = getInstance(context, selector);
|
||||
if (instance) {
|
||||
instance.resetData(() => {
|
||||
instance.setData(Object.assign({ theme }, otherOptions), instance.show.bind(instance));
|
||||
});
|
||||
return instance;
|
||||
}
|
||||
console.error('未找到组件,请确认 selector && context 是否正确');
|
||||
};
|
||||
export default {
|
||||
info(options) {
|
||||
return showMessage(options, MessageType.info);
|
||||
},
|
||||
success(options) {
|
||||
return showMessage(options, MessageType.success);
|
||||
},
|
||||
warning(options) {
|
||||
return showMessage(options, MessageType.warning);
|
||||
},
|
||||
error(options) {
|
||||
return showMessage(options, MessageType.error);
|
||||
},
|
||||
hide(options) {
|
||||
const { context, selector = '#t-message' } = Object.assign({}, options);
|
||||
const instance = getInstance(context, selector);
|
||||
if (!instance) {
|
||||
return;
|
||||
}
|
||||
instance.hide();
|
||||
},
|
||||
};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user