分包医生
This commit is contained in:
zoujiandong
@@ -1,25 +0,0 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
### ActionSheet Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
align | String | center | `0.29.0`。options：center/left | N
|
||||
cancel-text | String | - | \- | N
|
||||
count | Number | 8 | \- | N
|
||||
custom-style | String | - | `0.25.0` | N
|
||||
description | String | - | `0.29.0` | N
|
||||
items | Array | - | required。Typescript：`Array<string \| ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | Y
|
||||
show-cancel | Boolean | true | \- | N
|
||||
theme | String | list | options：list/grid | N
|
||||
visible | Boolean | false | required | Y
|
||||
default-visible | Boolean | undefined | required。uncontrolled property | Y
|
||||
|
||||
### ActionSheet Events
|
||||
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
cancel | \- | \-
|
||||
close | \- | \-
|
||||
selected | `(selected: ActionSheetItem \| string, index: number)` | \-
|
||||
@@ -1,107 +0,0 @@
|
||||
---
|
||||
title: ActionSheet 动作面板
|
||||
description: 由用户操作后触发的一种特定的模态弹出框 ，呈现一组与当前情境相关的两个或多个选项。
|
||||
spline: data
|
||||
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-89%25-blue" /></span>
|
||||
|
||||
<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
|
||||
<svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
|
||||
<path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
|
||||
</svg>
|
||||
该组件于 0.9.0 版本上线，请留意版本。
|
||||
</div>
|
||||
|
||||
## 引入
|
||||
|
||||
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"t-action-sheet": "tdesign-miniprogram/action-sheet/action-sheet",
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 组件类型
|
||||
|
||||
列表型动作面板
|
||||
|
||||
{{ list }}
|
||||
|
||||
宫格型动作面板
|
||||
|
||||
{{ grid }}
|
||||
|
||||
### 组件状态
|
||||
|
||||
宫格型动作面板
|
||||
|
||||
{{ status }}
|
||||
|
||||
### 组件样式
|
||||
|
||||
列表型对齐方式
|
||||
|
||||
{{ align }}
|
||||
|
||||
### 支持指令调用
|
||||
|
||||
```javascript
|
||||
import ActionSheet, { ActionSheetTheme } from 'tdesign-miniprogram/action-sheet/index';
|
||||
|
||||
// 指令调用不同于组件引用不需要传入visible
|
||||
const basicListOption: ActionSheetShowOption = {
|
||||
theme: ActionSheetTheme.List,
|
||||
selector: '#t-action-sheet',
|
||||
items: [
|
||||
{
|
||||
label: '默认选项',
|
||||
},
|
||||
{
|
||||
label: '失效选项',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
label: '警告选项',
|
||||
color: '#e34d59',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const handler = ActionSheet.show(basicListOption);
|
||||
```
|
||||
|
||||
指令调用的关闭如下
|
||||
|
||||
```javascript
|
||||
handler.close();
|
||||
```
|
||||
|
||||
|
||||
## API
|
||||
### ActionSheet Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
align | String | center | `0.29.0`。水平对齐方式。可选项：center/left | N
|
||||
cancel-text | String | - | 设置取消按钮的文本 | N
|
||||
count | Number | 8 | 设置每页展示菜单的数量，仅当 type=grid 时有效 | N
|
||||
custom-style | String | - | `0.25.0`。自定义组件样式 | N
|
||||
description | String | - | `0.29.0`。动作面板描述文字 | N
|
||||
items | Array | - | 必需。菜单项。TS 类型：`Array<string \| ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | Y
|
||||
show-cancel | Boolean | true | 是否显示取消按钮 | N
|
||||
theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N
|
||||
visible | Boolean | false | 必需。显示与隐藏 | Y
|
||||
default-visible | Boolean | undefined | 必需。显示与隐藏。非受控属性 | Y
|
||||
|
||||
### ActionSheet Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
cancel | \- | 点击取消按钮时触发
|
||||
close | \- | 关闭时触发
|
||||
selected | `(selected: ActionSheetItem \| string, index: number)` | 选择菜单项时触发
|
||||
@@ -1,70 +0,0 @@
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
export default class ActionSheet extends SuperComponent {
|
||||
static show: (options: import("./show").ActionSheetShowOption) => WechatMiniprogram.Component.TrivialInstance;
|
||||
externalClasses: string[];
|
||||
properties: {
|
||||
align?: {
|
||||
type: StringConstructor;
|
||||
value?: "center" | "left";
|
||||
};
|
||||
cancelText?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
count?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
customStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
description?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
items: {
|
||||
type: ArrayConstructor;
|
||||
value?: (string | import("./type").ActionSheetItem)[];
|
||||
};
|
||||
showCancel?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
theme?: {
|
||||
type: StringConstructor;
|
||||
value?: "list" | "grid";
|
||||
};
|
||||
visible: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
defaultVisible: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
};
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
gridThemeItems: any[];
|
||||
currentSwiperIndex: number;
|
||||
};
|
||||
controlledProps: {
|
||||
key: string;
|
||||
event: string;
|
||||
}[];
|
||||
ready(): void;
|
||||
methods: {
|
||||
onSwiperChange(e: WechatMiniprogram.TouchEvent): void;
|
||||
splitGridThemeActions(): void;
|
||||
show(options: any): void;
|
||||
memoInitialData(): void;
|
||||
close(): void;
|
||||
onPopupVisibleChange({ detail }: {
|
||||
detail: any;
|
||||
}): void;
|
||||
onSelect(event: WechatMiniprogram.TouchEvent): void;
|
||||
onCancel(): void;
|
||||
};
|
||||
}
|
||||
@@ -1,91 +0,0 @@
|
||||
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 { chunk } from '../common/utils';
|
||||
import { SuperComponent, wxComponent } from '../common/src/index';
|
||||
import config from '../common/config';
|
||||
import { ActionSheetTheme, show } from './show';
|
||||
import props from './props';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-action-sheet`;
|
||||
let ActionSheet = class ActionSheet extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-cancel`];
|
||||
this.properties = Object.assign({}, props);
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
gridThemeItems: [],
|
||||
currentSwiperIndex: 0,
|
||||
};
|
||||
this.controlledProps = [
|
||||
{
|
||||
key: 'visible',
|
||||
event: 'visible-change',
|
||||
},
|
||||
];
|
||||
this.methods = {
|
||||
onSwiperChange(e) {
|
||||
const { detail: { current }, } = e;
|
||||
this.setData({
|
||||
currentSwiperIndex: current,
|
||||
});
|
||||
},
|
||||
splitGridThemeActions() {
|
||||
if (this.data.theme !== ActionSheetTheme.Grid)
|
||||
return;
|
||||
this.setData({
|
||||
gridThemeItems: chunk(this.data.items, this.data.count),
|
||||
});
|
||||
},
|
||||
show(options) {
|
||||
this.setData(Object.assign(Object.assign(Object.assign({}, this.initialData), options), { visible: true }));
|
||||
this.splitGridThemeActions();
|
||||
this.autoClose = true;
|
||||
this._trigger('visible-change', { visible: true });
|
||||
},
|
||||
memoInitialData() {
|
||||
this.initialData = Object.assign(Object.assign({}, this.properties), this.data);
|
||||
},
|
||||
close() {
|
||||
this._trigger('visible-change', { visible: false });
|
||||
},
|
||||
onPopupVisibleChange({ detail }) {
|
||||
if (!detail.visible) {
|
||||
this._trigger('visible-change', { visible: false });
|
||||
}
|
||||
if (this.autoClose) {
|
||||
this.setData({ visible: false });
|
||||
this.autoClose = false;
|
||||
}
|
||||
},
|
||||
onSelect(event) {
|
||||
const { currentSwiperIndex, items, gridThemeItems, count, theme } = this.data;
|
||||
const { index } = event.currentTarget.dataset;
|
||||
const isSwiperMode = theme === ActionSheetTheme.Grid;
|
||||
const item = isSwiperMode ? gridThemeItems[currentSwiperIndex][index] : items[index];
|
||||
const realIndex = isSwiperMode ? index + currentSwiperIndex * count : index;
|
||||
if (item) {
|
||||
this.triggerEvent('selected', { selected: item, index: realIndex });
|
||||
this._trigger('visible-change', { visible: false });
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
this.triggerEvent('cancel');
|
||||
},
|
||||
};
|
||||
}
|
||||
ready() {
|
||||
this.memoInitialData();
|
||||
this.splitGridThemeActions();
|
||||
}
|
||||
};
|
||||
ActionSheet.show = show;
|
||||
ActionSheet = __decorate([
|
||||
wxComponent()
|
||||
], ActionSheet);
|
||||
export default ActionSheet;
|
||||
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-icon": "../icon/icon",
|
||||
"t-popup": "../popup/popup",
|
||||
"t-grid": "../grid/grid",
|
||||
"t-grid-item": "../grid-item/grid-item",
|
||||
"t-swiper-nav": "../swiper-nav/swiper-nav"
|
||||
}
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
<wxs src="./action-sheet.wxs" module="this" />
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
<import src="./template/list.wxml" />
|
||||
<import src="./template/grid.wxml" />
|
||||
|
||||
<view id="{{classPrefix}}" style="{{customStyle}}" class="{{classPrefix}} {{prefix}}-class">
|
||||
<t-popup visible="{{visible}}" placement="bottom" bind:visible-change="onPopupVisibleChange">
|
||||
<view
|
||||
class="{{_.cls(classPrefix + '__content', [['grid', gridThemeItems.length]])}} {{prefix}}-class-content"
|
||||
tabindex="0"
|
||||
>
|
||||
<view wx:if="{{description}}" tabindex="0" class="{{_.cls(classPrefix + '__description', [align])}}"
|
||||
>{{description}}</view
|
||||
>
|
||||
<block wx:if="{{gridThemeItems.length}}">
|
||||
<template is="grid" data="{{classPrefix, prefix, gridThemeItems, count, currentSwiperIndex}}" />
|
||||
</block>
|
||||
<view wx:elif="{{items && items.length}}" class="{{classPrefix}}__list">
|
||||
<block wx:for="{{ items }}" wx:key="index">
|
||||
<template
|
||||
is="list"
|
||||
data="{{index, classPrefix, listThemeItemClass: _.cls(classPrefix + '__list-item', [align, [disabled, item.disabled]]), item}}"
|
||||
/>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<slot />
|
||||
<view wx:if="{{showCancel}}" class="{{classPrefix}}__footer {{classPrefix}}__safe">
|
||||
<view class="{{classPrefix}}__gap-{{theme}}" />
|
||||
<view
|
||||
class="{{classPrefix}}__cancel {{prefix}}-class-cancel"
|
||||
hover-class="{{classPrefix}}__cancel--hover"
|
||||
hover-stay-time="70"
|
||||
bind:tap="onCancel"
|
||||
aria-role="button"
|
||||
>
|
||||
{{ cancelText }}
|
||||
</view>
|
||||
</view>
|
||||
</t-popup>
|
||||
</view>
|
||||
@@ -1,19 +0,0 @@
|
||||
var getListThemeItemClass = function (props) {
|
||||
var classPrefix = props.classPrefix;
|
||||
var item = props.item;
|
||||
var prefix = props.prefix;
|
||||
var classList = [classPrefix + '__list-item'];
|
||||
if (item.disabled) {
|
||||
classList.push(prefix + '-is-disabled');
|
||||
}
|
||||
return classList.join(' ');
|
||||
};
|
||||
|
||||
var isImage = function (name) {
|
||||
return name.indexOf('/') !== -1;
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
getListThemeItemClass: getListThemeItemClass,
|
||||
isImage: isImage,
|
||||
};
|
||||
@@ -1,169 +0,0 @@
|
||||
.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-action-sheet__content {
|
||||
color: var(--td-action-sheet-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
border-top-left-radius: var(--td-action-sheet-border-radius, var(--td-radius-extra-large, 24rpx));
|
||||
border-top-right-radius: var(--td-action-sheet-border-radius, var(--td-radius-extra-large, 24rpx));
|
||||
background-color: var(--td-bg-color-block, #fff);
|
||||
overflow: hidden;
|
||||
}
|
||||
.t-action-sheet__content--grid {
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
.t-action-sheet__content:focus {
|
||||
outline: 0;
|
||||
}
|
||||
.t-action-sheet__grid {
|
||||
padding-bottom: 16rpx;
|
||||
}
|
||||
.t-action-sheet__grid--swiper {
|
||||
padding-bottom: 48rpx;
|
||||
}
|
||||
.t-action-sheet__description {
|
||||
color: var(--td-action-sheet-description-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
|
||||
line-height: 44rpx;
|
||||
font-size: 28rpx;
|
||||
text-align: var(--td-action-sheet-text-align, center);
|
||||
padding: 24rpx 32rpx;
|
||||
position: relative;
|
||||
}
|
||||
.t-action-sheet__description:focus {
|
||||
outline: 0;
|
||||
}
|
||||
.t-action-sheet__description::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: unset;
|
||||
bottom: 0;
|
||||
left: unset;
|
||||
right: unset;
|
||||
background-color: var(--td-action-sheet-border-color, var(--td-gray-color-1, #f3f3f3));
|
||||
}
|
||||
.t-action-sheet__description::after {
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.t-action-sheet__description--left {
|
||||
text-align: left;
|
||||
}
|
||||
.t-action-sheet__description--left::after {
|
||||
left: 32rpx;
|
||||
}
|
||||
.t-action-sheet__list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
height: var(--td-action-sheet-list-item-height, 112rpx);
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
.t-action-sheet__list-item::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: unset;
|
||||
bottom: 0;
|
||||
left: unset;
|
||||
right: unset;
|
||||
background-color: var(--td-action-sheet-border-color, var(--td-gray-color-1, #f3f3f3));
|
||||
}
|
||||
.t-action-sheet__list-item::after {
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.t-action-sheet__list-item:focus {
|
||||
outline: 0;
|
||||
}
|
||||
.t-action-sheet__list-item--left {
|
||||
justify-content: start;
|
||||
}
|
||||
.t-action-sheet__list-item--left::after {
|
||||
left: 32rpx;
|
||||
}
|
||||
.t-action-sheet__list-item--disabled {
|
||||
color: var(--td-action-sheet-list-item-disabled-color, var(--td-text-disabled-color, rgba(0, 0, 0, 0.26)));
|
||||
}
|
||||
.t-action-sheet__list-item-text {
|
||||
font-size: var(--td-font-size-m, 32rpx);
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.t-action-sheet__list-item-icon {
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
.t-action-sheet__swiper-wrap {
|
||||
margin-top: 8rpx;
|
||||
position: relative;
|
||||
}
|
||||
.t-action-sheet__footer {
|
||||
background-color: var(--td-bg-color-block, #fff);
|
||||
}
|
||||
.t-action-sheet__gap-list {
|
||||
height: 16rpx;
|
||||
background-color: var(--td-action-sheet-border-color, var(--td-gray-color-1, #f3f3f3));
|
||||
}
|
||||
.t-action-sheet__gap-grid {
|
||||
height: 1rpx;
|
||||
background-color: var(--td-action-sheet-border-color, var(--td-gray-color-1, #f3f3f3));
|
||||
}
|
||||
.t-action-sheet__cancel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: var(--td-action-sheet-cancel-height, 96rpx);
|
||||
}
|
||||
.t-action-sheet__dots {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 32rpx;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.t-action-sheet__dots-item {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
background-color: #dcdcdc;
|
||||
border-radius: 50%;
|
||||
margin: 0 16rpx;
|
||||
transition: all 0.4s ease-in;
|
||||
}
|
||||
.t-action-sheet__dots-item.t-is-active {
|
||||
background-color: #0052d9;
|
||||
}
|
||||
.t-action-sheet__safe {
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
import ActionSheet from './action-sheet';
|
||||
export * from './show';
|
||||
export default ActionSheet;
|
||||
@@ -1,3 +0,0 @@
|
||||
import ActionSheet from './action-sheet';
|
||||
export * from './show';
|
||||
export default ActionSheet;
|
||||
@@ -1,3 +0,0 @@
|
||||
import { TdActionSheetProps } from './type';
|
||||
declare const props: TdActionSheetProps;
|
||||
export default props;
|
||||
@@ -1,42 +0,0 @@
|
||||
const props = {
|
||||
align: {
|
||||
type: String,
|
||||
value: 'center',
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
value: '取消',
|
||||
},
|
||||
count: {
|
||||
type: Number,
|
||||
value: 8,
|
||||
},
|
||||
customStyle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
},
|
||||
showCancel: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
value: 'list',
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
value: null,
|
||||
},
|
||||
defaultVisible: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
@@ -1,29 +0,0 @@
|
||||
/// <reference types="miniprogram-api-typings" />
|
||||
/// <reference types="miniprogram-api-typings" />
|
||||
export interface ActionSheetItem {
|
||||
label: string;
|
||||
color?: string;
|
||||
disabled?: boolean;
|
||||
icon?: string;
|
||||
}
|
||||
declare type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
|
||||
export declare enum ActionSheetTheme {
|
||||
List = "list",
|
||||
Grid = "grid"
|
||||
}
|
||||
interface ActionSheetProps {
|
||||
visible: boolean;
|
||||
items: Array<string | ActionSheetItem>;
|
||||
defaultVisible?: boolean;
|
||||
cancelText?: string;
|
||||
count?: number;
|
||||
showCancel?: boolean;
|
||||
theme?: ActionSheetTheme;
|
||||
}
|
||||
export interface ActionSheetShowOption extends Omit<ActionSheetProps, 'visible'> {
|
||||
context?: Context;
|
||||
selector?: string;
|
||||
}
|
||||
export declare const show: (options: ActionSheetShowOption) => WechatMiniprogram.Component.TrivialInstance;
|
||||
export declare const close: (options: ActionSheetShowOption) => void;
|
||||
export {};
|
||||
@@ -1,33 +0,0 @@
|
||||
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 { getInstance } from '../common/utils';
|
||||
export var ActionSheetTheme;
|
||||
(function (ActionSheetTheme) {
|
||||
ActionSheetTheme["List"] = "list";
|
||||
ActionSheetTheme["Grid"] = "grid";
|
||||
})(ActionSheetTheme || (ActionSheetTheme = {}));
|
||||
export const show = function (options) {
|
||||
const _a = Object.assign({}, options), { context, selector = '#t-action-sheet' } = _a, otherOptions = __rest(_a, ["context", "selector"]);
|
||||
const instance = getInstance(context, selector);
|
||||
if (instance) {
|
||||
instance.show(Object.assign({}, otherOptions));
|
||||
return instance;
|
||||
}
|
||||
console.error('未找到组件,请确认 selector && context 是否正确');
|
||||
};
|
||||
export const close = function (options) {
|
||||
const { context, selector = '#t-action-sheet' } = Object.assign({}, options);
|
||||
const instance = getInstance(context, selector);
|
||||
if (instance) {
|
||||
instance.close();
|
||||
}
|
||||
};
|
||||
@@ -1,49 +0,0 @@
|
||||
<template name="grid">
|
||||
<block wx:if="{{gridThemeItems.length === 1}}">
|
||||
<t-grid align="center" t-class="{{classPrefix}}__grid" column="{{count / 2}}" class="{{classPrefix}}__single-wrap">
|
||||
<t-grid-item
|
||||
t-class="{{classPrefix}}__grid-item"
|
||||
class="{{classPrefix}}__square"
|
||||
wx:for="{{gridThemeItems[0]}}"
|
||||
wx:key="index"
|
||||
bind:tap="onSelect"
|
||||
data-index="{{index}}"
|
||||
icon="{{item.icon}}"
|
||||
text="{{item.label}}"
|
||||
image="{{item.image}}"
|
||||
>
|
||||
</t-grid-item>
|
||||
</t-grid>
|
||||
</block>
|
||||
<block wx:elif="{{gridThemeItems.length > 1}}">
|
||||
<view class="{{classPrefix}}__swiper-wrap">
|
||||
<swiper style="height: 456rpx" autoplay="{{false}}" current="{{currentSwiperIndex}}" bindchange="onSwiperChange">
|
||||
<swiper-item wx:for="{{gridThemeItems}}" wx:key="index">
|
||||
<t-grid align="center" t-class="{{classPrefix}}__grid {{classPrefix}}__grid--swiper" column="{{count / 2}}">
|
||||
<t-grid-item
|
||||
t-class="{{classPrefix}}__grid-item"
|
||||
class="{{classPrefix}}__square"
|
||||
wx:for="{{item}}"
|
||||
wx:key="index"
|
||||
data-index="{{index}}"
|
||||
bind:tap="onSelect"
|
||||
icon="{{item.icon}}"
|
||||
text="{{item.label}}"
|
||||
image="{{item.image}}"
|
||||
>
|
||||
</t-grid-item>
|
||||
</t-grid>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="{{classPrefix}}__nav">
|
||||
<view class="{{classPrefix}}__dots">
|
||||
<view
|
||||
wx:for="{{gridThemeItems.length}}"
|
||||
wx:key="index"
|
||||
class="{{classPrefix}}__dots-item {{index === currentSwiperIndex ? prefix + '-is-active' : ''}}"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</template>
|
||||
@@ -1,14 +0,0 @@
|
||||
<template name="list">
|
||||
<view
|
||||
data-index="{{index}}"
|
||||
style="{{ item.color ? 'color: ' + item.color : '' }}"
|
||||
class="{{listThemeItemClass}}"
|
||||
bind:tap="onSelect"
|
||||
aria-role="{{ariaRole || 'button'}}"
|
||||
aria-label="{{item.label || item}}"
|
||||
tabindex="0"
|
||||
>
|
||||
<t-icon wx:if="{{item.icon}}" name="{{item.icon}}" class="{{classPrefix}}__list-item-icon" size="48rpx"></t-icon>
|
||||
<view class="{{classPrefix}}__list-item-text">{{item.label || item}}</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -1,47 +0,0 @@
|
||||
export interface TdActionSheetProps {
|
||||
align?: {
|
||||
type: StringConstructor;
|
||||
value?: 'center' | 'left';
|
||||
};
|
||||
cancelText?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
count?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
customStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
description?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
items: {
|
||||
type: ArrayConstructor;
|
||||
value?: Array<string | ActionSheetItem>;
|
||||
};
|
||||
showCancel?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
theme?: {
|
||||
type: StringConstructor;
|
||||
value?: 'list' | 'grid';
|
||||
};
|
||||
visible: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
defaultVisible: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
}
|
||||
export interface ActionSheetItem {
|
||||
label: string;
|
||||
color?: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export {};
|
||||
@@ -1,20 +0,0 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
|
||||
### BackTop Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
custom-style `v0.25.0` | String | - | \- | N
|
||||
external-classes | Array | - | `['t-class', 't-class-icon', 't-class-text']` | N
|
||||
fixed | Boolean | true | \- | N
|
||||
icon | String / Boolean / Object / Slot | - | \- | N
|
||||
text | String | '' | \- | N
|
||||
theme | String | round | options：round/half-round/round-dark/half-round-dark | N
|
||||
|
||||
### BackTop Events
|
||||
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
to-top | \- | \-
|
||||
@@ -1,43 +0,0 @@
|
||||
---
|
||||
title: BackTop 返回顶部
|
||||
description: 用于当页面过长往下滑动时，帮助用户快速回到页面顶部。
|
||||
spline: navigation
|
||||
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-back-top": "tdesign-miniprogram/back-top/back-top",
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
<img src="https://tdesign.gtimg.com/miniprogram/readme/backtop-1.png" width="375px" height="50%">
|
||||
|
||||
### 基础返回顶部
|
||||
|
||||
{{ base }}
|
||||
|
||||
## API
|
||||
### BackTop Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
custom-style `v0.25.0` | String | - | 自定义组件样式 | N
|
||||
external-classes | Array | - | 组件类名，分别用于设置外层元素、图标、文本内容等元素类名。`['t-class', 't-class-icon', 't-class-text']` | N
|
||||
fixed | Boolean | true | 是否绝对定位固定到屏幕右下方 | N
|
||||
icon | String / Boolean / Object / Slot | true | 图标。值为 `false` 表示不显示图标，值为 `'slot'` 表示使用插槽。不传表示使用默认图标 `'backtop'` | N
|
||||
text | String | '' | 文案 | N
|
||||
theme | String | round | 预设的样式类型。可选项：round/half-round/round-dark/half-round-dark | N
|
||||
|
||||
### BackTop Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
to-top | \- | 点击触发
|
||||
@@ -1,23 +0,0 @@
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
export default class BackTop extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
properties: import("./type").TdBackTopProps;
|
||||
relations: RelationsOptions;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
};
|
||||
observers: {
|
||||
icon(): void;
|
||||
};
|
||||
lifetimes: {
|
||||
ready(): void;
|
||||
};
|
||||
methods: {
|
||||
setIcon(): void;
|
||||
toTop(): void;
|
||||
};
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
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}-back-top`;
|
||||
let BackTop = class BackTop extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [`${prefix}-class`, `${prefix}-class-icon`, `${prefix}-class-text`];
|
||||
this.options = {
|
||||
multipleSlots: true,
|
||||
};
|
||||
this.properties = props;
|
||||
this.relations = {
|
||||
'../pull-down-refresh/pull-down-refresh': {
|
||||
type: 'ancestor',
|
||||
},
|
||||
};
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
};
|
||||
this.observers = {
|
||||
icon() {
|
||||
this.setIcon();
|
||||
},
|
||||
};
|
||||
this.lifetimes = {
|
||||
ready() {
|
||||
this.setIcon();
|
||||
},
|
||||
};
|
||||
this.methods = {
|
||||
setIcon() {
|
||||
const { icon } = this.properties;
|
||||
if (!icon) {
|
||||
this.setData({ iconName: '', iconData: {} });
|
||||
}
|
||||
else if (typeof icon === 'string') {
|
||||
this.setData({
|
||||
iconName: icon,
|
||||
iconData: {},
|
||||
});
|
||||
}
|
||||
else if (typeof icon === 'object') {
|
||||
this.setData({
|
||||
iconName: '',
|
||||
iconData: icon,
|
||||
});
|
||||
}
|
||||
else {
|
||||
this.setData({ iconName: 'backtop', iconData: {} });
|
||||
}
|
||||
},
|
||||
toTop() {
|
||||
var _a;
|
||||
this.triggerEvent('to-top');
|
||||
if (this.$parent) {
|
||||
(_a = this.$parent) === null || _a === void 0 ? void 0 : _a.setScrollTop(0);
|
||||
}
|
||||
else {
|
||||
wx.pageScrollTo({
|
||||
scrollTop: 0,
|
||||
duration: 300,
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
BackTop = __decorate([
|
||||
wxComponent()
|
||||
], BackTop);
|
||||
export default BackTop;
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-icon": "../icon/icon"
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
<import src="../common/template/icon.wxml" />
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
|
||||
<view
|
||||
style="{{ customStyle }}"
|
||||
class="{{prefix}}-class {{classPrefix}} {{fixed ? classPrefix + '--fixed' : ''}} {{classPrefix + '--' + theme}}"
|
||||
bindtap="toTop"
|
||||
aria-role="button"
|
||||
>
|
||||
<view wx:if="{{iconName || _.isNoEmptyObj(iconData)}}" class="{{classPrefix}}__icon" aria-hidden>
|
||||
<slot wx:if="{{iconName === 'slot'}}" name="icon" />
|
||||
<template wx:else is="icon" data="{{tClass: prefix + '-class-icon', name: iconName, ...iconData}}"> </template>
|
||||
</view>
|
||||
<view wx:if="{{!!text}}" class="{{classPrefix}}__text--{{theme}} {{prefix}}-class-text">{{text}}</view>
|
||||
<slot />
|
||||
</view>
|
||||
@@ -1,89 +0,0 @@
|
||||
.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-back-top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
transition: height 0.2s;
|
||||
height: auto;
|
||||
}
|
||||
.t-back-top--fixed {
|
||||
position: fixed;
|
||||
right: var(--td-spacer, 16rpx);
|
||||
bottom: var(--td-spacer-2, 32rpx);
|
||||
}
|
||||
.t-back-top--round,
|
||||
.t-back-top--round-dark {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: var(--td-back-top-round-border-radius, var(--td-radius-circle, 50%));
|
||||
}
|
||||
.t-back-top--round,
|
||||
.t-back-top--half-round {
|
||||
color: var(--td-back-top-round-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
border: 1rpx solid var(--td-back-top-round-border-color, var(--td-gray-color-4, #dcdcdc));
|
||||
background-color: var(--td-back-top-round-bg-color, var(--td-white-color-1, #fff));
|
||||
}
|
||||
.t-back-top--round-dark,
|
||||
.t-back-top--half-round-dark {
|
||||
color: var(--td-back-top-round-dark-color, var(--td-font-white-1, #ffffff));
|
||||
background-color: var(--td-back-top-round-dark-bg-color, var(--td-gray-color-14, #181818));
|
||||
}
|
||||
.t-back-top--half-round,
|
||||
.t-back-top--half-round-dark {
|
||||
width: 120rpx;
|
||||
height: 80rpx;
|
||||
border-radius: var(--td-back-top-half-round-border-radius, var(--td-radius-round, 999px)) 0 0 var(--td-back-top-half-round-border-radius, var(--td-radius-round, 999px));
|
||||
flex-direction: row;
|
||||
right: 0;
|
||||
}
|
||||
.t-back-top__text--round,
|
||||
.t-back-top__text--round-dark,
|
||||
.t-back-top__text--half-round,
|
||||
.t-back-top__text--half-round-dark {
|
||||
font-size: var(--td-font-size, 20rpx);
|
||||
line-height: 24rpx;
|
||||
}
|
||||
.t-back-top__text--half-round,
|
||||
.t-back-top__text--half-round-dark {
|
||||
width: 2em;
|
||||
}
|
||||
.t-back-top__icon:not(:empty) + .t-back-top__text--half-round,
|
||||
.t-back-top__icon:not(:empty) + .t-back-top__text--half-round-dark {
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
.t-back-top__icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 44rpx;
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
import { TdBackTopProps } from './type';
|
||||
declare const props: TdBackTopProps;
|
||||
export default props;
|
||||
@@ -1,26 +0,0 @@
|
||||
const props = {
|
||||
customStyle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
externalClasses: {
|
||||
type: Array,
|
||||
},
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
icon: {
|
||||
type: null,
|
||||
value: true,
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
value: 'round',
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
@@ -1,26 +0,0 @@
|
||||
export interface TdBackTopProps {
|
||||
customStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
externalClasses?: {
|
||||
type: ArrayConstructor;
|
||||
value?: ['t-class', 't-class-icon', 't-class-text'];
|
||||
};
|
||||
fixed?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
icon?: {
|
||||
type: null;
|
||||
value?: boolean | string | object;
|
||||
};
|
||||
text?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
theme?: {
|
||||
type: StringConstructor;
|
||||
value?: 'round' | 'half-round' | 'round-dark' | 'half-round-dark';
|
||||
};
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export {};
|
||||
@@ -1,29 +0,0 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
### Calendar Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
auto-close | Boolean | true | `0.34.0` | N
|
||||
confirm-btn | String / Object / Slot | '' | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts) | N
|
||||
custom-style | String | - | `0.25.0` | N
|
||||
first-day-of-week | Number | 0 | \- | N
|
||||
format | Function | - | Typescript：`CalendarFormatType ` `type CalendarFormatType = (day: TDate) => TDate` `type TDateType = 'selected' \| 'disabled' \| 'start' \| 'centre' \| 'end' \| ''` `interface TDate { date: Date; day: number; type: TDateType; className?: string; prefix?: string; suffix?: string;}`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts) | N
|
||||
max-date | Number | - | \- | N
|
||||
min-date | Number | - | \- | N
|
||||
title | String / Slot | - | \- | N
|
||||
type | String | single | options：single/multiple/range | N
|
||||
use-popup | Boolean | true | `0.32.0` | N
|
||||
value | Number / Array | - | Typescript：`number \| number[]` | N
|
||||
default-value | Number / Array | undefined | uncontrolled property。Typescript：`number \| number[]` | N
|
||||
visible | Boolean | false | \- | N
|
||||
|
||||
### Calendar Events
|
||||
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
change | `(value: timestamp)` | `0.28.0`
|
||||
close | `(trigger: CalendarTrigger)` | `0.34.0`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts)。<br/>`type CalendarTrigger = 'close-btn' \| 'confirm-btn' \| 'overlay'`<br/>
|
||||
confirm | `(value: timestamp)` | \-
|
||||
select | `(value: timestamp)` | `0.28.0`
|
||||
@@ -1,81 +0,0 @@
|
||||
---
|
||||
title: Calendar 日历
|
||||
description: 按照日历形式展示数据或日期的容器。
|
||||
spline: form
|
||||
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>
|
||||
|
||||
<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
|
||||
<svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
|
||||
<path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
|
||||
</svg>
|
||||
该组件于 0.22.0 版本上线，请留意版本。
|
||||
</div>
|
||||
|
||||
## 引入
|
||||
|
||||
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"t-calendar": "tdesign-miniprogram/calendar/calendar"
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 组件类型
|
||||
#### 单个选择日期
|
||||
|
||||
{{ base }}
|
||||
|
||||
#### 多个选择日期
|
||||
|
||||
{{ multiple }}
|
||||
|
||||
#### 区间选择日期
|
||||
|
||||
{{ range }}
|
||||
|
||||
### 组件样式
|
||||
|
||||
#### 自定义文案
|
||||
|
||||
{{ custom-text }}
|
||||
|
||||
#### 自定义区间
|
||||
|
||||
{{ custom-range }}
|
||||
|
||||
#### 不使用 Popup
|
||||
|
||||
{{ without-popup }}
|
||||
|
||||
## API
|
||||
### Calendar Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
auto-close | Boolean | true | `0.34.0`。自动关闭；在点击关闭按钮、确认按钮、遮罩层时自动关闭，不需要手动设置 visible | N
|
||||
confirm-btn | String / Object / Slot | '' | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts) | N
|
||||
custom-style | String | - | `0.25.0`。自定义组件样式 | N
|
||||
first-day-of-week | Number | 0 | 第一天从星期几开始，默认 0 = 周日 | N
|
||||
format | Function | - | 用于格式化日期的函数。TS 类型：`CalendarFormatType ` `type CalendarFormatType = (day: TDate) => TDate` `type TDateType = 'selected' \| 'disabled' \| 'start' \| 'centre' \| 'end' \| ''` `interface TDate { date: Date; day: number; type: TDateType; className?: string; prefix?: string; suffix?: string;}`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts) | N
|
||||
max-date | Number | - | 最大可选的日期，不传则默认半年后 | N
|
||||
min-date | Number | - | 最小可选的日期，不传则默认今天 | N
|
||||
title | String / Slot | - | 标题，不传默认为“请选择日期” | N
|
||||
type | String | single | 日历的选择类型，single = 单选；multiple = 多选; range = 区间选择。可选项：single/multiple/range | N
|
||||
use-popup | Boolean | true | `0.32.0`。是否使用弹出层包裹日历 | N
|
||||
value | Number / Array | - | 当前选择的日期，不传则默认今天，当 type = multiple 或 range 时传入数组。TS 类型：`number \| number[]` | N
|
||||
default-value | Number / Array | undefined | 当前选择的日期，不传则默认今天，当 type = multiple 或 range 时传入数组。非受控属性。TS 类型：`number \| number[]` | N
|
||||
visible | Boolean | false | 是否显示日历；`usePopup` 为 true 时有效 | N
|
||||
|
||||
### Calendar Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
change | `(value: timestamp)` | `0.28.0`。不显示 confirm-btn 时，完成选择时触发（暂不支持 type = multiple）
|
||||
close | `(trigger: CalendarTrigger)` | `0.34.0`。关闭按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts)。<br/>`type CalendarTrigger = 'close-btn' \| 'confirm-btn' \| 'overlay'`<br/>
|
||||
confirm | `(value: timestamp)` | 点击确认按钮时触发
|
||||
select | `(value: timestamp)` | `0.28.0`。点击日期时触发
|
||||
@@ -1,43 +0,0 @@
|
||||
/// <reference types="miniprogram-api-typings" />
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
import { TdCalendarProps } from './type';
|
||||
export interface CalendarProps extends TdCalendarProps {
|
||||
}
|
||||
export default class Calendar extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
options: WechatMiniprogram.Component.ComponentOptions;
|
||||
properties: TdCalendarProps;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
months: any[];
|
||||
scrollIntoView: string;
|
||||
innerConfirmBtn: {
|
||||
content: string;
|
||||
};
|
||||
};
|
||||
controlledProps: {
|
||||
key: string;
|
||||
event: string;
|
||||
}[];
|
||||
lifetimes: {
|
||||
ready(): void;
|
||||
};
|
||||
observers: {
|
||||
confirmBtn(v: any): void;
|
||||
'firstDayOfWeek,minDate,maxDate'(firstDayOfWeek: any, minDate: any, maxDate: any): void;
|
||||
value(v: any): void;
|
||||
visible(v: any): void;
|
||||
};
|
||||
methods: {
|
||||
initialValue(): void;
|
||||
scrollIntoView(): void;
|
||||
calcMonths(): void;
|
||||
close(trigger: any): void;
|
||||
onVisibleChange(): void;
|
||||
handleClose(): void;
|
||||
handleSelect(e: any): void;
|
||||
onTplButtonTap(): void;
|
||||
toTime(val: any): any;
|
||||
};
|
||||
}
|
||||
@@ -1,159 +0,0 @@
|
||||
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 TCalendar from '../common/shared/calendar/index';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-calendar`;
|
||||
let Calendar = class Calendar extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [`${prefix}-class`];
|
||||
this.options = {
|
||||
multipleSlots: true,
|
||||
styleIsolation: 'apply-shared',
|
||||
};
|
||||
this.properties = props;
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
months: [],
|
||||
scrollIntoView: '',
|
||||
innerConfirmBtn: { content: '确定' },
|
||||
};
|
||||
this.controlledProps = [
|
||||
{
|
||||
key: 'value',
|
||||
event: 'confirm',
|
||||
},
|
||||
{
|
||||
key: 'value',
|
||||
event: 'change',
|
||||
},
|
||||
];
|
||||
this.lifetimes = {
|
||||
ready() {
|
||||
this.base = new TCalendar(this.properties);
|
||||
this.initialValue();
|
||||
this.setData({
|
||||
days: this.base.getDays(),
|
||||
});
|
||||
this.calcMonths();
|
||||
},
|
||||
};
|
||||
this.observers = {
|
||||
confirmBtn(v) {
|
||||
if (typeof v === 'string') {
|
||||
this.setData({ innerConfirmBtn: v === 'slot' ? 'slot' : { content: v } });
|
||||
}
|
||||
else if (typeof v === 'object') {
|
||||
this.setData({ innerConfirmBtn: v });
|
||||
}
|
||||
},
|
||||
'firstDayOfWeek,minDate,maxDate'(firstDayOfWeek, minDate, maxDate) {
|
||||
if (this.base) {
|
||||
this.base.firstDayOfWeek = firstDayOfWeek;
|
||||
this.base.minDate = minDate;
|
||||
this.base.maxDate = maxDate;
|
||||
this.calcMonths();
|
||||
}
|
||||
},
|
||||
value(v) {
|
||||
if (this.base) {
|
||||
this.base.value = v;
|
||||
}
|
||||
},
|
||||
visible(v) {
|
||||
if (v) {
|
||||
this.scrollIntoView();
|
||||
if (this.base) {
|
||||
this.base.value = this.data.value;
|
||||
this.calcMonths();
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
this.methods = {
|
||||
initialValue() {
|
||||
const { value, type, minDate } = this.data;
|
||||
if (!value) {
|
||||
const today = new Date();
|
||||
const now = minDate || new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime();
|
||||
const initialValue = type === 'single' ? now : [now];
|
||||
if (type === 'range') {
|
||||
initialValue[1] = now + 24 * 3600 * 1000;
|
||||
}
|
||||
this.setData({
|
||||
value: initialValue,
|
||||
});
|
||||
this.base.value = initialValue;
|
||||
}
|
||||
},
|
||||
scrollIntoView() {
|
||||
const { value } = this.data;
|
||||
if (!value)
|
||||
return;
|
||||
const date = new Date(Array.isArray(value) ? value[0] : value);
|
||||
if (date) {
|
||||
this.setData({
|
||||
scrollIntoView: `year_${date.getFullYear()}_month_${date.getMonth()}`,
|
||||
});
|
||||
}
|
||||
},
|
||||
calcMonths() {
|
||||
const months = this.base.getMonths();
|
||||
this.setData({
|
||||
months,
|
||||
});
|
||||
},
|
||||
close(trigger) {
|
||||
if (this.data.autoClose) {
|
||||
this.setData({ visible: false });
|
||||
}
|
||||
this.triggerEvent('close', { trigger });
|
||||
},
|
||||
onVisibleChange() {
|
||||
this.close('overlay');
|
||||
},
|
||||
handleClose() {
|
||||
this.close('close-btn');
|
||||
},
|
||||
handleSelect(e) {
|
||||
const { date, year, month } = e.currentTarget.dataset;
|
||||
if (date.type === 'disabled')
|
||||
return;
|
||||
const rawValue = this.base.select({ cellType: date.type, year, month, date: date.day });
|
||||
const value = this.toTime(rawValue);
|
||||
this.calcMonths();
|
||||
if (this.data.confirmBtn == null) {
|
||||
if (this.data.type === 'single' || rawValue.length === 2) {
|
||||
this.setData({ visible: false });
|
||||
this._trigger('change', { value });
|
||||
}
|
||||
}
|
||||
this.triggerEvent('select', { value });
|
||||
},
|
||||
onTplButtonTap() {
|
||||
const rawValue = this.base.getTrimValue();
|
||||
const value = this.toTime(rawValue);
|
||||
this.close('confirm-btn');
|
||||
this._trigger('confirm', { value });
|
||||
},
|
||||
toTime(val) {
|
||||
if (Array.isArray(val)) {
|
||||
return val.map((item) => item.getTime());
|
||||
}
|
||||
return val.getTime();
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
Calendar = __decorate([
|
||||
wxComponent()
|
||||
], Calendar);
|
||||
export default Calendar;
|
||||
@@ -1,8 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-popup": "../popup/popup",
|
||||
"t-button": "../button/button",
|
||||
"t-icon": "../icon/icon"
|
||||
}
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
<wxs src="./calendar.wxs" module="this" />
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
|
||||
<t-popup wx:if="{{usePopup}}" visible="{{visible}}" bind:visible-change="onVisibleChange" placement="bottom">
|
||||
<include src="./template.wxml" />
|
||||
</t-popup>
|
||||
<include wx:else src="./template.wxml" />
|
||||
@@ -1,30 +0,0 @@
|
||||
function getDateLabel(monthItem, dateItem) {
|
||||
var weekdayText = ['日', '一', '二', '三', '四', '五', '六'];
|
||||
var weekday = (monthItem.weekdayOfFirstDay + dateItem.day - 1) % 7;
|
||||
var label = monthItem.month + 1 + '月' + dateItem.day + '日, 星期' + weekdayText[weekday];
|
||||
if (dateItem.type === 'start') {
|
||||
label = '开始日期：' + label;
|
||||
}
|
||||
if (dateItem.type === 'end') {
|
||||
label = '结束日期：' + label;
|
||||
}
|
||||
if (isDateSelected(dateItem)) {
|
||||
label = '已选中, ' + label;
|
||||
}
|
||||
if (dateItem.prefix) {
|
||||
label += ', ' + dateItem.prefix;
|
||||
}
|
||||
if (dateItem.suffix) {
|
||||
label += ', ' + dateItem.suffix;
|
||||
}
|
||||
return label;
|
||||
}
|
||||
|
||||
function isDateSelected(dateItem) {
|
||||
return ['start', 'end', 'selected', 'centre'].indexOf(dateItem.type) >= 0;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
getDateLabel: getDateLabel,
|
||||
isDateSelected: isDateSelected,
|
||||
};
|
||||
@@ -1,186 +0,0 @@
|
||||
.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-calendar {
|
||||
position: relative;
|
||||
z-index: 9999;
|
||||
background: var(--td-calendar-bg-color, var(--td-bg-color-block, #fff));
|
||||
overflow-x: hidden;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
.t-calendar--popup {
|
||||
border-top-left-radius: var(--td-calendar-radius, 24rpx);
|
||||
border-top-right-radius: var(--td-calendar-radius, 24rpx);
|
||||
}
|
||||
.t-calendar__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--td-calendar-title-font-size, 18px);
|
||||
font-weight: 600;
|
||||
color: var(--td-calendar-title-color, var(--td-text-level-1-color, #000000));
|
||||
height: 52rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
.t-calendar__close-btn {
|
||||
position: absolute;
|
||||
top: 32rpx;
|
||||
right: 32rpx;
|
||||
margin: -24rpx;
|
||||
padding: 24rpx;
|
||||
}
|
||||
.t-calendar__days {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
grid-column-gap: 8rpx;
|
||||
padding: 0 32rpx;
|
||||
text-align: center;
|
||||
line-height: 92rpx;
|
||||
}
|
||||
.t-calendar__days-item {
|
||||
height: 92rpx;
|
||||
font-size: 28rpx;
|
||||
color: var(--td-calendar-days-color, var(--td-text-level-2-color, #444444));
|
||||
}
|
||||
.t-calendar__content {
|
||||
min-height: 400rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.t-calendar__month {
|
||||
font-size: 28rpx;
|
||||
color: var(--td-calendar-title-color, var(--td-text-level-1-color, #000000));
|
||||
font-weight: 600;
|
||||
padding: 32rpx 0 0;
|
||||
}
|
||||
.t-calendar__months {
|
||||
height: 60vh;
|
||||
padding: 0 32rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.t-calendar__months::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.t-calendar__dates {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
grid-column-gap: 8rpx;
|
||||
}
|
||||
.t-calendar__dates-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
height: 120rpx;
|
||||
line-height: 48rpx;
|
||||
font-weight: 600;
|
||||
margin-top: 16rpx;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.t-calendar__dates-item-prefix,
|
||||
.t-calendar__dates-item-suffix {
|
||||
position: absolute;
|
||||
font-size: 20rpx;
|
||||
line-height: 32rpx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
}
|
||||
.t-calendar__dates-item-prefix {
|
||||
top: 8rpx;
|
||||
}
|
||||
.t-calendar__dates-item-suffix {
|
||||
bottom: 8rpx;
|
||||
color: var(--td-calendar-item-suffix-color, var(--td-text-level-3-color, #888888));
|
||||
}
|
||||
.t-calendar__dates-item-suffix--selected,
|
||||
.t-calendar__dates-item-suffix--start,
|
||||
.t-calendar__dates-item-suffix--end {
|
||||
color: var(--td-calendar-selected-color, var(--td-text-anti-primary-color, #fff));
|
||||
}
|
||||
.t-calendar__dates-item-suffix--disabled {
|
||||
color: var(--td-calendar-item-disabled-color, var(--td-text-level-4-color, #bbbbbb));
|
||||
}
|
||||
.t-calendar__dates-item--selected,
|
||||
.t-calendar__dates-item--start,
|
||||
.t-calendar__dates-item--end {
|
||||
background: var(--td-calendar-active-color, var(--td-primary-color, #0052d9));
|
||||
color: var(--td-calendar-selected-color, var(--td-text-anti-primary-color, #fff));
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
.t-calendar__dates-item--start {
|
||||
border-radius: 8rpx 0 0 8rpx;
|
||||
}
|
||||
.t-calendar__dates-item--end {
|
||||
border-radius: 0 8rpx 8rpx 0;
|
||||
}
|
||||
.t-calendar__dates-item--start + .t-calendar__dates-item--end::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 8rpx;
|
||||
height: 100%;
|
||||
background: var(--td-calendar-active-color, var(--td-primary-color, #0052d9));
|
||||
}
|
||||
.t-calendar__dates-item--start + .t-calendar__dates-item--end:before {
|
||||
left: -8rpx;
|
||||
}
|
||||
.t-calendar__dates-item--centre {
|
||||
border-radius: 0;
|
||||
background-color: var(--td-calendar-item-centre-color, var(--td-primary-color-1, #ecf2fe));
|
||||
}
|
||||
.t-calendar__dates-item--centre::before,
|
||||
.t-calendar__dates-item--centre::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 8rpx;
|
||||
height: 100%;
|
||||
background-color: var(--td-calendar-item-centre-color, var(--td-primary-color-1, #ecf2fe));
|
||||
}
|
||||
.t-calendar__dates-item--centre:before {
|
||||
left: -8rpx;
|
||||
}
|
||||
.t-calendar__dates-item--centre:after {
|
||||
right: -8rpx;
|
||||
}
|
||||
.t-calendar__dates-item--disabled {
|
||||
color: var(--td-calendar-item-disabled-color, var(--td-text-level-4-color, #bbbbbb));
|
||||
cursor: default;
|
||||
}
|
||||
.t-calendar__footer {
|
||||
padding: 32rpx;
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
export * from './type';
|
||||
export * from './calendar';
|
||||
@@ -1,2 +0,0 @@
|
||||
export * from './type';
|
||||
export * from './calendar';
|
||||
@@ -1,3 +0,0 @@
|
||||
import { TdCalendarProps } from './type';
|
||||
declare const props: TdCalendarProps;
|
||||
export default props;
|
||||
@@ -1,50 +0,0 @@
|
||||
const props = {
|
||||
autoClose: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
confirmBtn: {
|
||||
type: null,
|
||||
value: '',
|
||||
},
|
||||
customStyle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
firstDayOfWeek: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
},
|
||||
format: {
|
||||
type: null,
|
||||
},
|
||||
maxDate: {
|
||||
type: Number,
|
||||
},
|
||||
minDate: {
|
||||
type: Number,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
value: 'single',
|
||||
},
|
||||
usePopup: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
value: {
|
||||
type: null,
|
||||
value: null,
|
||||
},
|
||||
defaultValue: {
|
||||
type: null,
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
@@ -1,67 +0,0 @@
|
||||
<import src="../common/template/button.wxml" />
|
||||
|
||||
<view class="{{_.cls(classPrefix, [['popup', usePopup]])}}" style="{{customStyle}}">
|
||||
<view class="{{classPrefix}}__title" tabindex="0">
|
||||
<slot wx:if="{{title === 'slot'}}" name="title" />
|
||||
<text wx:else>{{ title || '请选择日期' }}</text>
|
||||
</view>
|
||||
<t-icon
|
||||
wx:if="{{usePopup}}"
|
||||
name="close"
|
||||
class="{{classPrefix}}__close-btn"
|
||||
size="24"
|
||||
aria-role="button"
|
||||
aria-label="关闭"
|
||||
bind:tap="handleClose"
|
||||
/>
|
||||
<view aria-hidden class="{{classPrefix}}__days">
|
||||
<view wx:for="{{days}}" wx:key="index" class="{{classPrefix}}__days-item">{{ item }}</view>
|
||||
</view>
|
||||
<scroll-view
|
||||
class="{{classPrefix}}__months"
|
||||
scroll-into-view="{{scrollIntoView}}"
|
||||
scroll-y
|
||||
enhanced
|
||||
show-scrollbar="{{false}}"
|
||||
>
|
||||
<block wx:for="{{months}}" wx:key="index">
|
||||
<view class="{{classPrefix}}__month" id="year_{{item.year}}_month_{{item.month}}"
|
||||
>{{ item.year }} 年 {{ item.month + 1 }} 月</view
|
||||
>
|
||||
<view class="{{classPrefix}}__dates">
|
||||
<view wx:for="{{(item.weekdayOfFirstDay - firstDayOfWeek + 7) % 7}}" wx:key="index" />
|
||||
<block wx:for="{{item.months}}" wx:for-index="dateIndex" wx:for-item="dateItem" wx:key="dateIndex">
|
||||
<view
|
||||
class="{{classPrefix}}__dates-item {{dateItem.className}} {{classPrefix}}__dates-item--{{dateItem.type}}"
|
||||
data-year="{{item.year}}"
|
||||
data-month="{{item.month}}"
|
||||
data-date="{{dateItem}}"
|
||||
aria-role="button"
|
||||
aria-label="{{this.getDateLabel(item, dateItem)}}"
|
||||
aria-disabled="{{dateItem.type === 'disabled'}}"
|
||||
bind:tap="handleSelect"
|
||||
>
|
||||
<view wx:if="{{dateItem.prefix}}" class="{{classPrefix}}__dates-item-prefix">{{ dateItem.prefix }}</view>
|
||||
{{ dateItem.day }}
|
||||
<view
|
||||
wx:if="{{dateItem.suffix}}"
|
||||
class="{{classPrefix}}__dates-item-suffix {{classPrefix}}__dates-item-suffix--{{dateItem.type}}"
|
||||
>
|
||||
{{ dateItem.suffix }}
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
<view wx:if="{{innerConfirmBtn != null && usePopup}}" class="{{classPrefix}}__footer">
|
||||
<slot wx:if="{{innerConfirmBtn === 'slot'}}" name="confirm-btn" />
|
||||
<block wx:elif="{{innerConfirmBtn}}">
|
||||
<!-- <t-button block theme="primary" v-bind="confirmBtn" bind:tap="handleConfirm" /> -->
|
||||
<template
|
||||
is="button"
|
||||
data="{{ block: true, theme: 'primary', class: 't-calendar__confirm-btn', ...innerConfirmBtn }}"
|
||||
/>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
@@ -1,65 +0,0 @@
|
||||
import { ButtonProps } from '../button/index';
|
||||
export interface TdCalendarProps {
|
||||
autoClose?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
confirmBtn?: {
|
||||
type: null;
|
||||
value?: string | ButtonProps | null;
|
||||
};
|
||||
customStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
firstDayOfWeek?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
format?: {
|
||||
type: undefined;
|
||||
value?: CalendarFormatType;
|
||||
};
|
||||
maxDate?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
minDate?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
title?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
type?: {
|
||||
type: StringConstructor;
|
||||
value?: 'single' | 'multiple' | 'range';
|
||||
};
|
||||
usePopup?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
value?: {
|
||||
type: null;
|
||||
value?: number | number[];
|
||||
};
|
||||
defaultValue?: {
|
||||
type: null;
|
||||
value?: number | number[];
|
||||
};
|
||||
visible?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
}
|
||||
export declare type CalendarFormatType = (day: TDate) => TDate;
|
||||
export declare type TDateType = 'selected' | 'disabled' | 'start' | 'centre' | 'end' | '';
|
||||
export interface TDate {
|
||||
date: Date;
|
||||
day: number;
|
||||
type: TDateType;
|
||||
className?: string;
|
||||
prefix?: string;
|
||||
suffix?: string;
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export {};
|
||||
@@ -1,26 +0,0 @@
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
import type { TdCollapsePanelProps } from './type';
|
||||
export interface CollapsePanelProps extends TdCollapsePanelProps {
|
||||
}
|
||||
export default class CollapsePanel extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
relations: RelationsOptions;
|
||||
properties: TdCollapsePanelProps;
|
||||
data: {
|
||||
prefix: string;
|
||||
expanded: boolean;
|
||||
classPrefix: string;
|
||||
classBasePrefix: string;
|
||||
ultimateExpandIcon: boolean;
|
||||
ultimateDisabled: boolean;
|
||||
};
|
||||
methods: {
|
||||
set(data: Record<string, object | any>): Promise<unknown>;
|
||||
updateExpanded(activeValues: any): void;
|
||||
updateStyle(expanded: boolean): Promise<void>;
|
||||
onClick(): void;
|
||||
};
|
||||
}
|
||||
@@ -1,90 +0,0 @@
|
||||
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 { getRect } from '../common/utils';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-collapse-panel`;
|
||||
let CollapsePanel = class CollapsePanel extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-header`];
|
||||
this.options = {
|
||||
multipleSlots: true,
|
||||
};
|
||||
this.relations = {
|
||||
'../collapse/collapse': {
|
||||
type: 'ancestor',
|
||||
linked(target) {
|
||||
this.parent = target;
|
||||
const { value, defaultExpandAll, expandMutex, expandIcon, disabled } = target.properties;
|
||||
const activeValues = defaultExpandAll && !expandMutex ? [this.properties.value] : value;
|
||||
this.setData({
|
||||
ultimateExpandIcon: expandIcon || this.properties.expandIcon,
|
||||
ultimateDisabled: this.properties.disabled == null ? disabled : this.properties.disabled,
|
||||
});
|
||||
this.updateExpanded(activeValues);
|
||||
},
|
||||
},
|
||||
};
|
||||
this.properties = props;
|
||||
this.data = {
|
||||
prefix,
|
||||
expanded: false,
|
||||
classPrefix: name,
|
||||
classBasePrefix: prefix,
|
||||
ultimateExpandIcon: false,
|
||||
ultimateDisabled: false,
|
||||
};
|
||||
this.methods = {
|
||||
set(data) {
|
||||
this.setData(data);
|
||||
return new Promise((resolve) => wx.nextTick(resolve));
|
||||
},
|
||||
updateExpanded(activeValues) {
|
||||
if (!this.parent) {
|
||||
return;
|
||||
}
|
||||
const { value } = this.properties;
|
||||
const expanded = activeValues.includes(value);
|
||||
if (expanded === this.properties.expanded)
|
||||
return;
|
||||
this.setData({ expanded });
|
||||
this.updateStyle(expanded);
|
||||
},
|
||||
updateStyle(expanded) {
|
||||
return getRect(this, `.${name}__content`)
|
||||
.then((rect) => rect.height)
|
||||
.then((height) => {
|
||||
const animation = wx.createAnimation({
|
||||
duration: 0,
|
||||
timingFunction: 'ease-in-out',
|
||||
});
|
||||
if (expanded) {
|
||||
animation.height(height).top(0).step({ duration: 300 }).height('auto').step();
|
||||
}
|
||||
else {
|
||||
animation.height(height).top(1).step({ duration: 1 }).height(0).step({ duration: 300 });
|
||||
}
|
||||
this.setData({ animation: animation.export() });
|
||||
});
|
||||
},
|
||||
onClick() {
|
||||
const { ultimateDisabled } = this.data;
|
||||
const { value } = this.properties;
|
||||
if (ultimateDisabled)
|
||||
return;
|
||||
this.parent.switch(value);
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
CollapsePanel = __decorate([
|
||||
wxComponent()
|
||||
], CollapsePanel);
|
||||
export default CollapsePanel;
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-cell": "../cell/cell"
|
||||
}
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
<wxs src="../common/utils.wxs" module="utils" />
|
||||
|
||||
<view style="{{ customStyle }}" class="{{classPrefix}} {{classPrefix}}--{{placement}} {{prefix}}-class">
|
||||
<view
|
||||
class="{{classPrefix}}__title"
|
||||
aria-role="button"
|
||||
aria-expanded="{{expanded}}"
|
||||
aria-disabled="{{ultimateDisabled}}"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<t-cell
|
||||
title="{{header}}"
|
||||
note="{{headerRightContent}}"
|
||||
bordered
|
||||
right-icon="{{ ultimateExpandIcon ? (expanded ? 'chevron-up' : 'chevron-down') : '' }}"
|
||||
t-class="{{classPrefix}}__header {{classPrefix}}__header--{{placement}} {{prefix}}-class-header"
|
||||
t-class-title="class-title {{ultimateDisabled ? 'class-title--disabled' : ''}}"
|
||||
t-class-note="class-note {{ultimateDisabled ? 'class-note--disabled' : ''}}"
|
||||
t-class-right-icon="class-right-icon {{classPrefix}}__arrow--{{placement}} {{ultimateDisabled ? 'class-right-icon--disabled' : ''}}"
|
||||
t-class-hover="class-header-hover"
|
||||
>
|
||||
<slot name="header" slot="title" />
|
||||
<slot name="header-right-content" slot="note" />
|
||||
<slot name="expand-icon" slot="right-icon" />
|
||||
</t-cell>
|
||||
</view>
|
||||
<view class="{{classPrefix}}__wrapper" animation="{{animation}}" aria-hidden="{{expanded ? '' : true}}">
|
||||
<view class="{{classPrefix}}__content {{prefix}}-class-content">
|
||||
{{content}}
|
||||
<slot />
|
||||
<slot name="content" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -1,167 +0,0 @@
|
||||
.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-collapse-panel {
|
||||
position: relative;
|
||||
background-color: var(--td-collapse-panel-bg-color, var(--td-bg-color-block, #fff));
|
||||
}
|
||||
.t-collapse-panel::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: unset;
|
||||
bottom: 0;
|
||||
left: unset;
|
||||
right: unset;
|
||||
background-color: var(--td-collapse-border-color, var(--td-border-color, #e7e7e7));
|
||||
}
|
||||
.t-collapse-panel::after {
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.t-collapse-panel--disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
.t-collapse-panel--disabled .t-collapse-panel__content,
|
||||
.t-collapse-panel--disabled .t-collapse-panel__header {
|
||||
opacity: 0.3;
|
||||
}
|
||||
.t-collapse-panel--top {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.t-collapse-panel__header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-left: var(--td-collapse-horizontal-padding, 32rpx);
|
||||
height: var(--td-collapse-header-height, 96rpx);
|
||||
color: var(--td-collapse-header-text-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
}
|
||||
.t-collapse-panel__header--top {
|
||||
position: relative;
|
||||
}
|
||||
.t-collapse-panel__header--top::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: unset;
|
||||
left: unset;
|
||||
right: unset;
|
||||
background-color: var(--td-collapse-border-color, var(--td-border-color, #e7e7e7));
|
||||
}
|
||||
.t-collapse-panel__header--top::after {
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.t-collapse-panel__header--bottom {
|
||||
position: relative;
|
||||
}
|
||||
.t-collapse-panel__header--bottom::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: unset;
|
||||
bottom: 0;
|
||||
left: unset;
|
||||
right: unset;
|
||||
background-color: var(--td-collapse-border-color, var(--td-border-color, #e7e7e7));
|
||||
}
|
||||
.t-collapse-panel__header--bottom::after {
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.t-collapse-panel__header:after {
|
||||
left: 32rpx;
|
||||
}
|
||||
.t-collapse-panel__header-right {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
.t-collapse-panel__header-icon {
|
||||
height: 100%;
|
||||
padding-left: 8px;
|
||||
width: 44px;
|
||||
padding-right: 8px;
|
||||
color: var(--td-collapse-icon-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
|
||||
}
|
||||
.t-collapse-panel__extra {
|
||||
font-size: var(--td-collapse-extra-font-size, var(--td-font-size-m, 32rpx));
|
||||
}
|
||||
.t-collapse-panel__body {
|
||||
position: relative;
|
||||
}
|
||||
.t-collapse-panel__body::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: unset;
|
||||
bottom: 0;
|
||||
left: unset;
|
||||
right: unset;
|
||||
background-color: var(--td-collapse-border-color, var(--td-border-color, #e7e7e7));
|
||||
}
|
||||
.t-collapse-panel__body::after {
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.t-collapse-panel__wrapper {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.t-collapse-panel__content {
|
||||
color: var(--td-collapse-content-text-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
font-size: var(--td-collapse-content-font-size, var(--td-font-size-base, 28rpx));
|
||||
padding: var(--td-collapse-content-padding, 32rpx);
|
||||
line-height: var(--td-collapse-content-line-height, 1.5);
|
||||
}
|
||||
.t-collapse-panel__arrow--top {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.class-title {
|
||||
font-size: var(--td-collapse-title-font-size, var(--td-font-size-m, 32rpx));
|
||||
}
|
||||
.class-title--disabled {
|
||||
color: var(--td-text-disabled-color, rgba(0, 0, 0, 0.26));
|
||||
}
|
||||
.class-note--disabled {
|
||||
color: var(--td-text-disabled-color, rgba(0, 0, 0, 0.26)) !important;
|
||||
}
|
||||
.class-right-icon--disabled {
|
||||
color: var(--td-text-disabled-color, rgba(0, 0, 0, 0.26)) !important;
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
import { TdCollapsePanelProps } from './type';
|
||||
declare const props: TdCollapsePanelProps;
|
||||
export default props;
|
||||
@@ -1,34 +0,0 @@
|
||||
const props = {
|
||||
content: {
|
||||
type: String,
|
||||
},
|
||||
customStyle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: undefined,
|
||||
},
|
||||
expandIcon: {
|
||||
type: Boolean,
|
||||
value: undefined,
|
||||
},
|
||||
externalClasses: {
|
||||
type: Array,
|
||||
},
|
||||
header: {
|
||||
type: String,
|
||||
},
|
||||
headerRightContent: {
|
||||
type: String,
|
||||
},
|
||||
placement: {
|
||||
type: String,
|
||||
value: 'bottom',
|
||||
},
|
||||
value: {
|
||||
type: null,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
@@ -1,38 +0,0 @@
|
||||
export interface TdCollapsePanelProps {
|
||||
content?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
customStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
expandIcon?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
externalClasses?: {
|
||||
type: ArrayConstructor;
|
||||
value?: ['t-class', 't-class-header', 't-class-content'];
|
||||
};
|
||||
header?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
headerRightContent?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
placement?: {
|
||||
type: StringConstructor;
|
||||
value?: 'bottom' | 'top';
|
||||
};
|
||||
value?: {
|
||||
type: null;
|
||||
value?: string | number;
|
||||
};
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export {};
|
||||
@@ -1,35 +0,0 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
### Collapse Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
custom-style | String | - | `0.25.0` | N
|
||||
default-expand-all | Boolean | false | \- | N
|
||||
disabled | Boolean | - | \- | N
|
||||
expand-icon | Boolean / Slot | true | \- | N
|
||||
expand-mutex | Boolean | false | \- | N
|
||||
theme | String | default | options：default/card | N
|
||||
value | Array | [] | Typescript：`CollapseValue` `type CollapseValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/collapse/type.ts) | N
|
||||
default-value | Array | undefined | uncontrolled property。Typescript：`CollapseValue` `type CollapseValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/collapse/type.ts) | N
|
||||
|
||||
### Collapse Events
|
||||
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
change | `(value: CollapseValue)` | \-
|
||||
|
||||
### CollapsePanel Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
content | String / Slot | - | \- | N
|
||||
custom-style | String | - | `0.25.0` | N
|
||||
disabled | Boolean | undefined | \- | N
|
||||
expand-icon | Boolean / Slot | undefined | \- | N
|
||||
external-classes | Array | - | `['t-class', 't-class-header', 't-class-content']` | N
|
||||
header | String / Slot | - | \- | N
|
||||
header-right-content | String / Slot | - | \- | N
|
||||
placement | String | bottom | `0.34.0`。options：bottom/top | N
|
||||
value | String / Number | - | \- | N
|
||||
@@ -1,83 +0,0 @@
|
||||
---
|
||||
title: Collapse 折叠面板
|
||||
description: 用于对复杂区域进行分组和隐藏 常用于订单信息展示等
|
||||
spline: data
|
||||
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-99%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-87%25-blue" /></span>
|
||||
|
||||
<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
|
||||
<svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
|
||||
<path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
|
||||
</svg>
|
||||
该组件于 0.7.3 版本上线，请留意版本。
|
||||
</div>
|
||||
|
||||
## 引入
|
||||
|
||||
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"t-collapse": "tdesign-miniprogram/collapse/collapse",
|
||||
"t-collapse-panel": "tdesign-miniprogram/collapse-panel/collapse-panel"
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 类型
|
||||
|
||||
基础折叠面板
|
||||
|
||||
{{ base }}
|
||||
|
||||
|
||||
带操作说明
|
||||
|
||||
{{ action }}
|
||||
|
||||
手风琴模式
|
||||
|
||||
{{ accordion }}
|
||||
|
||||
### 样式
|
||||
|
||||
卡片折叠面板
|
||||
|
||||
{{ theme }}
|
||||
|
||||
## API
|
||||
### Collapse Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
custom-style | String | - | `0.25.0`。自定义组件样式 | N
|
||||
default-expand-all | Boolean | false | 默认是否展开全部 | N
|
||||
disabled | Boolean | - | 是否禁用面板展开/收起操作 | N
|
||||
expand-icon | Boolean / Slot | true | 展开图标。值为 undefined 或 false 则不显示展开图标；值为 true 显示默认图标；值类型为函数，则表示完全自定义展开图标 | N
|
||||
expand-mutex | Boolean | false | 每个面板互斥展开，每次只展开一个面板 | N
|
||||
theme | String | default | 折叠面板风格。可选项：default/card | N
|
||||
value | Array | [] | 展开的面板集合。TS 类型：`CollapseValue` `type CollapseValue = Array<string \| number>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/collapse/type.ts) | N
|
||||
default-value | Array | undefined | 展开的面板集合。非受控属性。TS 类型：`CollapseValue` `type CollapseValue = Array<string \| number>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/collapse/type.ts) | N
|
||||
|
||||
### Collapse Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
change | `(value: CollapseValue)` | 切换面板时触发，返回变化的值
|
||||
|
||||
### CollapsePanel Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
content | String / Slot | - | 折叠面板内容 | N
|
||||
custom-style | String | - | `0.25.0`。自定义组件样式 | N
|
||||
disabled | Boolean | undefined | 禁止当前面板展开，优先级大于 Collapse 的同名属性 | N
|
||||
expand-icon | Boolean / Slot | undefined | 当前折叠面板展开图标，优先级大于 Collapse 的同名属性 | N
|
||||
external-classes | Array | - | 组件类名，用于组件外层元素、标题、内容。`['t-class', 't-class-header', 't-class-content']` | N
|
||||
header | String / Slot | - | 面板头内容 | N
|
||||
header-right-content | String / Slot | - | 面板头的右侧区域，一般用于呈现面板操作 | N
|
||||
placement | String | bottom | `0.34.0`。选项卡内容的位置。可选项：bottom/top | N
|
||||
value | String / Number | - | 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 | N
|
||||
@@ -1,27 +0,0 @@
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
import type { CollapseValue, TdCollapseProps } from './type';
|
||||
export interface CollapseProps extends TdCollapseProps {
|
||||
}
|
||||
export default class Collapse extends SuperComponent {
|
||||
options: {
|
||||
addGlobalClass: boolean;
|
||||
};
|
||||
externalClasses: string[];
|
||||
relations: RelationsOptions;
|
||||
controlledProps: {
|
||||
key: string;
|
||||
event: string;
|
||||
}[];
|
||||
properties: TdCollapseProps;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
};
|
||||
observers: {
|
||||
'value, expandMutex '(): void;
|
||||
};
|
||||
methods: {
|
||||
updateExpanded(): void;
|
||||
switch(panelValue: CollapseValue): void;
|
||||
};
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
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}-collapse`;
|
||||
let Collapse = class Collapse extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.options = {
|
||||
addGlobalClass: true,
|
||||
};
|
||||
this.externalClasses = [`${prefix}-class`];
|
||||
this.relations = {
|
||||
'../collapse-panel/collapse-panel': {
|
||||
type: 'descendant',
|
||||
linked() {
|
||||
this.updateExpanded();
|
||||
},
|
||||
},
|
||||
};
|
||||
this.controlledProps = [
|
||||
{
|
||||
key: 'value',
|
||||
event: 'change',
|
||||
},
|
||||
];
|
||||
this.properties = props;
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
};
|
||||
this.observers = {
|
||||
'value, expandMutex '() {
|
||||
this.updateExpanded();
|
||||
},
|
||||
};
|
||||
this.methods = {
|
||||
updateExpanded() {
|
||||
this.$children.forEach((child) => {
|
||||
child.updateExpanded(this.properties.value);
|
||||
});
|
||||
},
|
||||
switch(panelValue) {
|
||||
const { expandMutex, value: activeValues } = this.properties;
|
||||
let value = [];
|
||||
const hit = activeValues.indexOf(panelValue);
|
||||
if (hit > -1) {
|
||||
value = activeValues.filter((item) => item !== panelValue);
|
||||
}
|
||||
else {
|
||||
value = expandMutex ? [panelValue] : activeValues.concat(panelValue);
|
||||
}
|
||||
this._trigger('change', { value });
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
Collapse = __decorate([
|
||||
wxComponent()
|
||||
], Collapse);
|
||||
export default Collapse;
|
||||
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
|
||||
<view
|
||||
style="{{ customStyle }}"
|
||||
class="{{prefix}}-class {{_.cls(classPrefix, [['hairline--top-bottom', border], theme])}}"
|
||||
>
|
||||
<slot />
|
||||
</view>
|
||||
@@ -1,32 +0,0 @@
|
||||
.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-collapse--card {
|
||||
margin: 0 32rpx;
|
||||
border-radius: var(--td-radius-large, 18rpx);
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
export { default as Collapse } from './collapse';
|
||||
export * from './type';
|
||||
export * from './props';
|
||||
export { CollapseProps } from './collapse';
|
||||
@@ -1,3 +0,0 @@
|
||||
export { default as Collapse } from './collapse';
|
||||
export * from './type';
|
||||
export * from './props';
|
||||
@@ -1,3 +0,0 @@
|
||||
import { TdCollapseProps } from './type';
|
||||
declare const props: TdCollapseProps;
|
||||
export default props;
|
||||
@@ -1,34 +0,0 @@
|
||||
const props = {
|
||||
customStyle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
defaultExpandAll: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
},
|
||||
expandIcon: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
expandMutex: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
value: 'default',
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
value: null,
|
||||
},
|
||||
defaultValue: {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
@@ -1,35 +0,0 @@
|
||||
export interface TdCollapseProps {
|
||||
customStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
defaultExpandAll?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
expandIcon?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
expandMutex?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
theme?: {
|
||||
type: StringConstructor;
|
||||
value?: 'default' | 'card';
|
||||
};
|
||||
value?: {
|
||||
type: ArrayConstructor;
|
||||
value?: CollapseValue;
|
||||
};
|
||||
defaultValue?: {
|
||||
type: ArrayConstructor;
|
||||
value?: CollapseValue;
|
||||
};
|
||||
}
|
||||
export declare type CollapseValue = Array<string | number>;
|
||||
@@ -1 +0,0 @@
|
||||
export {};
|
||||
@@ -1,24 +0,0 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
|
||||
### CountDown Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
auto-start | Boolean | true | \- | N
|
||||
content | String / Slot | 'default' | \- | N
|
||||
custom-style `v0.25.0` | String | - | \- | N
|
||||
format | String | HH:mm:ss | \- | N
|
||||
millisecond | Boolean | false | \- | N
|
||||
size | String `v0.5.1` | 'small' | options：small/medium/large | N
|
||||
split-with-unit `v0.5.1` | Boolean | false | \- | N
|
||||
theme | String `v0.5.1` | 'default' | options：default/round/square | N
|
||||
time | Number | - | required | Y
|
||||
|
||||
### CountDown Events
|
||||
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
change | `(time: TimeData)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/count-down/type.ts)。<br/>`interface TimeData { days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`<br/>
|
||||
finish | \- | \-
|
||||
@@ -1,50 +0,0 @@
|
||||
---
|
||||
title: CountDown 倒计时
|
||||
description: 用于实时展示倒计时数值。
|
||||
spline: data
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-99%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-99%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-85%25-blue" /></span>
|
||||
## 引入
|
||||
|
||||
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"t-count-down": "tdesign-miniprogram/count-down/count-down"
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础倒计时
|
||||
|
||||
{{ base }}
|
||||
|
||||
### 调整尺寸
|
||||
|
||||
{{ size }}
|
||||
|
||||
## API
|
||||
### CountDown Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
auto-start | Boolean | true | 是否自动开始倒计时 | N
|
||||
content | String / Slot | 'default' | 最终倒计时的展示内容，值为'default'时使用默认的格式，否则使用自定义样式插槽 | N
|
||||
custom-style `v0.25.0` | String | - | 自定义组件样式 | N
|
||||
format | String | HH:mm:ss | 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 | N
|
||||
millisecond | Boolean | false | 是否开启毫秒级渲染 | N
|
||||
size | String `v0.5.1` | 'medium' | 倒计时尺寸。可选项：small/medium/large | N
|
||||
split-with-unit `v0.5.1` | Boolean | false | 使用时间单位分割 | N
|
||||
theme | String `v0.5.1` | 'default' | 倒计时风格。可选项：default/round/square/hightlight | N
|
||||
time | Number | - | 必需。倒计时时长，单位毫秒 | Y
|
||||
external-classes | Array | - | 组件类名，分别用于设置 组件外层类名、计时器类型、分隔线类名 等。`['t-class', 't-class-count', 't-class-split']` | N
|
||||
|
||||
### CountDown Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
change | `(time: TimeData)` | 时间变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/count-down/type.ts)。<br/>`interface TimeData { days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`<br/>
|
||||
finish | \- | 倒计时结束时触发
|
||||
@@ -1,33 +0,0 @@
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
export default class CountDown extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
properties: import("./type").TdCountDownProps;
|
||||
observers: {
|
||||
time(): void;
|
||||
};
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
timeDataUnit: {
|
||||
DD: string;
|
||||
HH: string;
|
||||
mm: string;
|
||||
ss: string;
|
||||
SSS: string;
|
||||
};
|
||||
timeData: import("./utils").TimeData;
|
||||
formattedTime: string;
|
||||
};
|
||||
timeoutId: null | number;
|
||||
lifetimes: {
|
||||
detached(): void;
|
||||
};
|
||||
methods: {
|
||||
start(): void;
|
||||
pause(): void;
|
||||
reset(): void;
|
||||
getTime(): number;
|
||||
updateTime(remain: number): void;
|
||||
doCount(): void;
|
||||
};
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
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 { isSameSecond, parseFormat, parseTimeData, TimeDataUnit } from './utils';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-count-down`;
|
||||
let CountDown = class CountDown extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [`${prefix}-class`, `${prefix}-class-count`, `${prefix}-class-split`];
|
||||
this.properties = props;
|
||||
this.observers = {
|
||||
time() {
|
||||
this.reset();
|
||||
},
|
||||
};
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
timeDataUnit: TimeDataUnit,
|
||||
timeData: parseTimeData(0),
|
||||
formattedTime: '0',
|
||||
};
|
||||
this.timeoutId = null;
|
||||
this.lifetimes = {
|
||||
detached() {
|
||||
if (this.timeoutId) {
|
||||
clearTimeout(this.timeoutId);
|
||||
this.timeoutId = null;
|
||||
}
|
||||
},
|
||||
};
|
||||
this.methods = {
|
||||
start() {
|
||||
if (this.counting) {
|
||||
return;
|
||||
}
|
||||
this.counting = true;
|
||||
this.endTime = Date.now() + this.remain;
|
||||
this.doCount();
|
||||
},
|
||||
pause() {
|
||||
this.counting = false;
|
||||
this.timeoutId && clearTimeout(this.timeoutId);
|
||||
},
|
||||
reset() {
|
||||
this.pause();
|
||||
this.remain = this.properties.time;
|
||||
this.updateTime(this.remain);
|
||||
if (this.properties.autoStart) {
|
||||
this.start();
|
||||
}
|
||||
},
|
||||
getTime() {
|
||||
return Math.max(this.endTime - Date.now(), 0);
|
||||
},
|
||||
updateTime(remain) {
|
||||
const { format } = this.properties;
|
||||
this.remain = remain;
|
||||
const timeData = parseTimeData(remain);
|
||||
this.triggerEvent('change', timeData);
|
||||
const { timeText } = parseFormat(remain, format);
|
||||
const timeRange = format.split(':');
|
||||
this.setData({
|
||||
timeRange,
|
||||
timeData,
|
||||
formattedTime: timeText.replace(/:/g, ' : '),
|
||||
});
|
||||
if (remain === 0) {
|
||||
this.pause();
|
||||
this.triggerEvent('finish');
|
||||
}
|
||||
},
|
||||
doCount() {
|
||||
this.timeoutId = setTimeout(() => {
|
||||
const time = this.getTime();
|
||||
if (this.properties.millisecond) {
|
||||
this.updateTime(time);
|
||||
}
|
||||
else if (!isSameSecond(time, this.remain) || time === 0) {
|
||||
this.updateTime(time);
|
||||
}
|
||||
if (time !== 0) {
|
||||
this.doCount();
|
||||
}
|
||||
}, 33);
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
CountDown = __decorate([
|
||||
wxComponent()
|
||||
], CountDown);
|
||||
export default CountDown;
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-icon": "../icon/icon"
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
<wxs module="_"> module.exports.format = function(num) { return num < 10 ? '0' + num : num; } </wxs>
|
||||
|
||||
<view
|
||||
style="{{ customStyle }}"
|
||||
class="{{classPrefix}} {{classPrefix}}--{{theme}} {{classPrefix}}--{{size}} {{prefix}}-class "
|
||||
aria-role="option"
|
||||
>
|
||||
<slot wx:if="{{content !== 'default'}}" />
|
||||
<block wx:elif="{{theme == 'default'}}">{{formattedTime}}</block>
|
||||
<block wx:else>
|
||||
<block wx:for="{{timeRange}}" wx:key="index">
|
||||
<text class="{{classPrefix}}__item {{prefix}}-class-count">{{_.format(timeData[timeRange[index]])}}</text>
|
||||
<text
|
||||
wx:if="{{ splitWithUnit || timeRange.length - 1 !== index}}"
|
||||
class="{{classPrefix}}__split {{classPrefix}}__split--{{splitWithUnit ? 'text' : 'dot'}} {{prefix}}-class-split"
|
||||
>{{splitWithUnit ? timeDataUnit[timeRange[index]] : ':'}}</text
|
||||
>
|
||||
</block>
|
||||
</block>
|
||||
</view>
|
||||
@@ -1,156 +0,0 @@
|
||||
.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-count-down--small.t-count-down--default {
|
||||
font-size: var(--td-font-size-base, 28rpx);
|
||||
}
|
||||
.t-count-down--small.t-count-down--round > .t-count-down__item {
|
||||
font-size: var(--td-font-size-s, 24rpx);
|
||||
}
|
||||
.t-count-down--small.t-count-down--square > .t-count-down__item {
|
||||
font-size: var(--td-font-size-s, 24rpx);
|
||||
}
|
||||
.t-count-down--small.t-count-down--hightlight > .t-count-down__item {
|
||||
font-size: var(--td-font-size-m, 32rpx);
|
||||
}
|
||||
.t-count-down--small.t-count-down--round > .t-count-down__item,
|
||||
.t-count-down--small.t-count-down--square > .t-count-down__item {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
.t-count-down--small.t-count-down--round > .t-count-down__split--dot,
|
||||
.t-count-down--small.t-count-down--square > .t-count-down__split--dot,
|
||||
.t-count-down--small.t-count-down--hightlight > .t-count-down__split--dot {
|
||||
margin: 0 calc(var(--td-spacer, 16rpx) * 0.25);
|
||||
font-size: var(--td-font-size-base, 28rpx);
|
||||
font-weight: 700;
|
||||
}
|
||||
.t-count-down--small.t-count-down--round > .t-count-down__split--text,
|
||||
.t-count-down--small.t-count-down--square > .t-count-down__split--text,
|
||||
.t-count-down--small.t-count-down--hightlight > .t-count-down__split--text {
|
||||
margin: 0 calc(var(--td-spacer, 16rpx) * 0.5);
|
||||
font-size: var(--td-font-size, 20rpx);
|
||||
}
|
||||
.t-count-down--medium.t-count-down--default {
|
||||
font-size: var(--td-font-size-m, 32rpx);
|
||||
}
|
||||
.t-count-down--medium.t-count-down--round > .t-count-down__item {
|
||||
font-size: var(--td-font-size-base, 28rpx);
|
||||
}
|
||||
.t-count-down--medium.t-count-down--square > .t-count-down__item {
|
||||
font-size: var(--td-font-size-base, 28rpx);
|
||||
}
|
||||
.t-count-down--medium.t-count-down--hightlight > .t-count-down__item {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.t-count-down--medium.t-count-down--round > .t-count-down__item,
|
||||
.t-count-down--medium.t-count-down--square > .t-count-down__item {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
.t-count-down--medium.t-count-down--round > .t-count-down__split--dot,
|
||||
.t-count-down--medium.t-count-down--square > .t-count-down__split--dot,
|
||||
.t-count-down--medium.t-count-down--hightlight > .t-count-down__split--dot {
|
||||
margin: 0 calc(var(--td-spacer, 16rpx) * 0.375);
|
||||
font-size: var(--td-font-size-m, 32rpx);
|
||||
font-weight: 700;
|
||||
}
|
||||
.t-count-down--medium.t-count-down--round > .t-count-down__split--text,
|
||||
.t-count-down--medium.t-count-down--square > .t-count-down__split--text,
|
||||
.t-count-down--medium.t-count-down--hightlight > .t-count-down__split--text {
|
||||
margin: 0 calc(var(--td-spacer, 16rpx) * 0.625);
|
||||
font-size: var(--td-font-size-s, 24rpx);
|
||||
}
|
||||
.t-count-down--large.t-count-down--default {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.t-count-down--large.t-count-down--round > .t-count-down__item {
|
||||
font-size: var(--td-font-size-m, 32rpx);
|
||||
}
|
||||
.t-count-down--large.t-count-down--square > .t-count-down__item {
|
||||
font-size: var(--td-font-size-m, 32rpx);
|
||||
}
|
||||
.t-count-down--large.t-count-down--hightlight > .t-count-down__item {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.t-count-down--large.t-count-down--round > .t-count-down__item,
|
||||
.t-count-down--large.t-count-down--square > .t-count-down__item {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
}
|
||||
.t-count-down--large.t-count-down--round > .t-count-down__split--dot,
|
||||
.t-count-down--large.t-count-down--square > .t-count-down__split--dot,
|
||||
.t-count-down--large.t-count-down--hightlight > .t-count-down__split--dot {
|
||||
margin: 0 calc(var(--td-spacer, 16rpx) * 0.75);
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.t-count-down--large.t-count-down--round > .t-count-down__split--text,
|
||||
.t-count-down--large.t-count-down--square > .t-count-down__split--text,
|
||||
.t-count-down--large.t-count-down--hightlight > .t-count-down__split--text {
|
||||
margin: 0 calc(var(--td-spacer, 16rpx) * 0.75);
|
||||
font-size: var(--td-font-size-base, 28rpx);
|
||||
}
|
||||
.t-count-down {
|
||||
font-family: 'DIN Alternate', 'Courier New', Courier, monospace;
|
||||
}
|
||||
.t-count-down .t-count-down__item,
|
||||
.t-count-down .t-count-down__split {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.t-count-down--square > .t-count-down__split--dot,
|
||||
.t-count-down--round > .t-count-down__split--dot,
|
||||
.t-count-down--hightlight > .t-count-down__split--dot {
|
||||
color: var(--td-error-color-6, #e34d59);
|
||||
}
|
||||
.t-count-down--square > .t-count-down__split--text,
|
||||
.t-count-down--round > .t-count-down__split--text,
|
||||
.t-count-down--hightlight > .t-count-down__split--text {
|
||||
color: var(--td-font-gray-1, rgba(0, 0, 0, 0.9));
|
||||
}
|
||||
.t-count-down--default {
|
||||
color: var(--td-countdown-default-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
}
|
||||
.t-count-down--square {
|
||||
color: var(--td-countdown-round-color, var(--td-font-white-1, #ffffff));
|
||||
}
|
||||
.t-count-down--square > .t-count-down__item {
|
||||
border-radius: var(--td-countdown-square-border-radius, var(--td-radius-small, 6rpx));
|
||||
background: var(--td-countdown-bg-color, var(--td-error-color-6, #e34d59));
|
||||
}
|
||||
.t-count-down--round {
|
||||
color: var(--td-countdown-round-color, var(--td-font-white-1, #ffffff));
|
||||
}
|
||||
.t-count-down--round > .t-count-down__item {
|
||||
border-radius: var(--td-countdown-round-border-radius, var(--td-radius-circle, 50%));
|
||||
background: var(--td-countdown-bg-color, var(--td-error-color-6, #e34d59));
|
||||
}
|
||||
.t-count-down--hightlight {
|
||||
color: var(--td-countdown-hightlight-color, var(--td-error-color-6, #e34d59));
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
import { TdCountDownProps } from './type';
|
||||
declare const props: TdCountDownProps;
|
||||
export default props;
|
||||
@@ -1,38 +0,0 @@
|
||||
const props = {
|
||||
autoStart: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
value: 'default',
|
||||
},
|
||||
customStyle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
format: {
|
||||
type: String,
|
||||
value: 'HH:mm:ss',
|
||||
},
|
||||
millisecond: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
value: 'medium',
|
||||
},
|
||||
splitWithUnit: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
value: 'default',
|
||||
},
|
||||
time: {
|
||||
type: Number,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
@@ -1,38 +0,0 @@
|
||||
export interface TdCountDownProps {
|
||||
autoStart?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
content?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
customStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
format?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
millisecond?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
size?: {
|
||||
type: StringConstructor;
|
||||
value?: 'small' | 'medium' | 'large';
|
||||
};
|
||||
splitWithUnit?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
theme?: {
|
||||
type: StringConstructor;
|
||||
value?: 'default' | 'round' | 'square' | 'hightlight';
|
||||
};
|
||||
time: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export {};
|
||||
@@ -1,25 +0,0 @@
|
||||
export interface TimeData {
|
||||
DD: number;
|
||||
HH: number;
|
||||
mm: number;
|
||||
ss: number;
|
||||
SSS: number;
|
||||
}
|
||||
export declare const TimeDataUnit: {
|
||||
DD: string;
|
||||
HH: string;
|
||||
mm: string;
|
||||
ss: string;
|
||||
SSS: string;
|
||||
};
|
||||
export declare const parseTimeData: (time: number) => TimeData;
|
||||
export declare const isSameSecond: (time1: number, time2: number) => boolean;
|
||||
export declare type TTimeList = {
|
||||
digit: string;
|
||||
unit: string;
|
||||
match: string;
|
||||
}[];
|
||||
export declare const parseFormat: (time: number, format: string) => {
|
||||
timeText: string;
|
||||
timeList: TTimeList;
|
||||
};
|
||||
@@ -1,61 +0,0 @@
|
||||
export const TimeDataUnit = {
|
||||
DD: '天',
|
||||
HH: '时',
|
||||
mm: '分',
|
||||
ss: '秒',
|
||||
SSS: '毫秒',
|
||||
};
|
||||
const SECOND = 1000;
|
||||
const MINUTE = 60 * SECOND;
|
||||
const HOUR = 60 * MINUTE;
|
||||
const DAY = 24 * HOUR;
|
||||
export const parseTimeData = function (time) {
|
||||
const days = Math.floor(time / DAY);
|
||||
const hours = Math.floor((time % DAY) / HOUR);
|
||||
const minutes = Math.floor((time % HOUR) / MINUTE);
|
||||
const seconds = Math.floor((time % MINUTE) / SECOND);
|
||||
const milliseconds = Math.floor(time % SECOND);
|
||||
return {
|
||||
DD: days,
|
||||
HH: hours,
|
||||
mm: minutes,
|
||||
ss: seconds,
|
||||
SSS: milliseconds,
|
||||
};
|
||||
};
|
||||
export const isSameSecond = function (time1, time2) {
|
||||
return Math.floor(time1 / 1000) === Math.floor(time2 / 1000);
|
||||
};
|
||||
export const parseFormat = function (time, format) {
|
||||
const obj = {
|
||||
'D+': Math.floor(time / 86400000),
|
||||
'H+': Math.floor((time % 86400000) / 3600000),
|
||||
'm+': Math.floor((time % 3600000) / 60000),
|
||||
's+': Math.floor((time % 60000) / 1000),
|
||||
'S+': Math.floor(time % 1000),
|
||||
};
|
||||
const timeList = [];
|
||||
let timeText = format;
|
||||
Object.keys(obj).forEach((prop) => {
|
||||
if (new RegExp(`(${prop})`).test(timeText)) {
|
||||
timeText = timeText.replace(RegExp.$1, (match, offset, source) => {
|
||||
const v = `${obj[prop]}`;
|
||||
let digit = v;
|
||||
if (match.length > 1) {
|
||||
digit = (match.replace(new RegExp(match[0], 'g'), '0') + v).substr(v.length);
|
||||
}
|
||||
const unit = source.substr(offset + match.length);
|
||||
const last = timeList[timeList.length - 1];
|
||||
if (last) {
|
||||
const index = last.unit.indexOf(match);
|
||||
if (index !== -1) {
|
||||
last.unit = last.unit.substr(0, index);
|
||||
}
|
||||
}
|
||||
timeList.push({ digit, unit, match });
|
||||
return digit;
|
||||
});
|
||||
}
|
||||
});
|
||||
return { timeText, timeList };
|
||||
};
|
||||
@@ -1,31 +0,0 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
### DateTimePicker Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
cancel-btn | String | 取消 | \- | N
|
||||
confirm-btn | String | - | \- | N
|
||||
custom-style `v0.25.0` | String | - | \- | N
|
||||
end | String / Number | - | \- | N
|
||||
external-classes | Array | - | `['t-class', 't-class-confirm', 't-class-cancel', 't-class-title']` | N
|
||||
footer | Slot | true | \- | N
|
||||
format | String | 'YYYY-MM-DD HH:mm:ss' | \- | N
|
||||
header | Boolean / Slot | true | \- | N
|
||||
mode | String / Array | 'date' | Typescript：`DateTimePickerMode` `type DateTimePickerMode = TimeModeValues \| Array<TimeModeValues> ` `type TimeModeValues = 'year' \| 'month' \| 'date' \| 'hour' \| 'minute' \| 'second'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
|
||||
show-week | Boolean | false | \- | N
|
||||
start | String / Number | - | \- | N
|
||||
title | String | - | title of picker | N
|
||||
value | String / Number | - | Typescript：`DateValue` `type DateValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
|
||||
default-value | String / Number | undefined | uncontrolled property。Typescript：`DateValue` `type DateValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
|
||||
visible | Boolean | false | \- | N
|
||||
|
||||
### DateTimePicker Events
|
||||
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
cancel | \- | \-
|
||||
change | `(value: DateValue)` | \-
|
||||
confirm | `(value: DateValue)` | \-
|
||||
pick | `(value: DateValue)` | \-
|
||||
@@ -1,69 +0,0 @@
|
||||
---
|
||||
title: DateTimePicker 时间选择器
|
||||
description: 用于选择一个时间点或者一个时间段。
|
||||
spline: form
|
||||
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-98%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-date-time-picker": "tdesign-miniprogram/date-time-picker/date-time-picker"
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 日期选择器
|
||||
|
||||
#### 年月日选择器
|
||||
|
||||
{{ year-month-date }}
|
||||
|
||||
#### 年月选择器
|
||||
|
||||
{{ year-month }}
|
||||
|
||||
### 时间选择器器
|
||||
|
||||
包括：`时分秒`、`时分`两个示例
|
||||
|
||||
{{ time }}
|
||||
|
||||
#### 年月日时分秒选择器
|
||||
|
||||
{{ date-all }}
|
||||
|
||||
## API
|
||||
### DateTimePicker Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
cancel-btn | String | 取消 | 取消按钮文字 | N
|
||||
confirm-btn | String | - | 确定按钮文字 | N
|
||||
custom-style `v0.25.0` | String | - | 自定义组件样式 | N
|
||||
end | String / Number | - | 选择器的最大可选时间，默认为当前时间+10年 | N
|
||||
external-classes | Array | - | 组件类名，分别用于设置组件外层元素、确认按钮、取消按钮、标题等元素类名。`['t-class', 't-class-confirm', 't-class-cancel', 't-class-title']` | N
|
||||
footer | Slot | true | 底部内容 | N
|
||||
format | String | 'YYYY-MM-DD HH:mm:ss' | 用于pick、change、confirm事件参数格式化[详细文档](https://day.js.org/docs/en/display/format) | N
|
||||
header | Boolean / Slot | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 TNode 表示自定义头部内容 | N
|
||||
mode | String / Array | 'date' | year = 年；month = 年月；date = 年月日；hour = 年月日时； minute = 年月日时分；当类型为数组时，第一个值控制年月日，第二个值控制时分秒。TS 类型：`DateTimePickerMode` `type DateTimePickerMode = TimeModeValues \| Array<TimeModeValues> ` `type TimeModeValues = 'year' \| 'month' \| 'date' \| 'hour' \| 'minute' \| 'second'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
|
||||
show-week | Boolean | false | 【开发中】是否在日期旁边显示周几（如周一，周二，周日等） | N
|
||||
start | String / Number | - | 选择器的最小可选时间，默认为当前时间-10年 | N
|
||||
title | String | - | 标题 | N
|
||||
value | String / Number | - | 选中值。TS 类型：`DateValue` `type DateValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
|
||||
default-value | String / Number | undefined | 选中值。非受控属性。TS 类型：`DateValue` `type DateValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
|
||||
visible | Boolean | false | 是否显示 | N
|
||||
|
||||
### DateTimePicker Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
cancel | \- | 取消按钮点击时触发
|
||||
change | `(value: DateValue)` | 确认按钮点击时触发
|
||||
confirm | `(value: DateValue)` | 【开发中】确认按钮点击时触发
|
||||
pick | `(value: DateValue)` | 选中值发生变化时触发
|
||||
@@ -1,83 +0,0 @@
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
declare enum ModeItem {
|
||||
YEAR = "year",
|
||||
MONTH = "month",
|
||||
DATE = "date",
|
||||
HOUR = "hour",
|
||||
MINUTE = "minute",
|
||||
SECOND = "second"
|
||||
}
|
||||
interface ColumnItemValue {
|
||||
value: string | number;
|
||||
label: string | number;
|
||||
}
|
||||
export default class DateTimePicker extends SuperComponent {
|
||||
properties: import("./type").TdDateTimePickerProps;
|
||||
externalClasses: string[];
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
observers: {
|
||||
'start, end, value': () => void;
|
||||
mode(m: any): void;
|
||||
};
|
||||
date: any;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
columns: any[];
|
||||
columnsValue: any[];
|
||||
fullModes: any[];
|
||||
locale: {
|
||||
year: string;
|
||||
month: string;
|
||||
date: string;
|
||||
hour: string;
|
||||
minute: string;
|
||||
second: string;
|
||||
am: string;
|
||||
pm: string;
|
||||
confirm: string;
|
||||
cancel: string;
|
||||
};
|
||||
};
|
||||
controlledProps: {
|
||||
key: string;
|
||||
event: string;
|
||||
}[];
|
||||
methods: {
|
||||
updateColumns(): void;
|
||||
getParseDate(): Dayjs;
|
||||
getMinDate(): Dayjs;
|
||||
getMaxDate(): Dayjs;
|
||||
getDateRect(type?: string): any[];
|
||||
getDate(): Dayjs;
|
||||
clipDate(date: Dayjs): Dayjs;
|
||||
setYear(date: Dayjs, year: number): Dayjs;
|
||||
setMonth(date: Dayjs, month: number): Dayjs;
|
||||
getColumnOptions(): any[];
|
||||
getOptionByType(type: any): ColumnItemValue[];
|
||||
getYearOptions(dateParams: any): ColumnItemValue[];
|
||||
getOptionEdge(minOrMax: 'min' | 'max', type: any): any;
|
||||
getMonthOptions(): ColumnItemValue[];
|
||||
getDayOptions(): ColumnItemValue[];
|
||||
getHourOptions(): ColumnItemValue[];
|
||||
getMinuteOptions(): ColumnItemValue[];
|
||||
getValueCols(this: DateTimePicker): {
|
||||
columns: any;
|
||||
columnsValue: any;
|
||||
};
|
||||
getColumnsValue(): string[];
|
||||
getNewDate(value: number, type: ModeItem): Dayjs;
|
||||
onColumnChange(e: WechatMiniprogram.CustomEvent): void;
|
||||
onConfirm(): void;
|
||||
onCancel(): void;
|
||||
onVisibleChange(e: any): void;
|
||||
resetColumns(): void;
|
||||
};
|
||||
getFullModeArray(mode: any): any;
|
||||
getFullModeByModeString(modeString: any, matchModes: any): any;
|
||||
isTimeMode(): boolean;
|
||||
}
|
||||
export {};
|
||||
@@ -1,343 +0,0 @@
|
||||
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 dayjs from 'dayjs';
|
||||
import config from '../common/config';
|
||||
import { SuperComponent, wxComponent } from '../common/src/index';
|
||||
import defaultLocale from './locale/zh';
|
||||
import props from './props';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-date-time-picker`;
|
||||
var ModeItem;
|
||||
(function (ModeItem) {
|
||||
ModeItem["YEAR"] = "year";
|
||||
ModeItem["MONTH"] = "month";
|
||||
ModeItem["DATE"] = "date";
|
||||
ModeItem["HOUR"] = "hour";
|
||||
ModeItem["MINUTE"] = "minute";
|
||||
ModeItem["SECOND"] = "second";
|
||||
})(ModeItem || (ModeItem = {}));
|
||||
const DATE_MODES = ['year', 'month', 'date'];
|
||||
const TIME_MODES = ['hour', 'minute', 'second'];
|
||||
const FULL_MODES = [...DATE_MODES, ...TIME_MODES];
|
||||
const DEFAULT_MIN_DATE = dayjs('2000-01-01 00:00:00');
|
||||
const DEFAULT_MAX_DATE = dayjs('2030-12-31 23:59:59');
|
||||
let DateTimePicker = class DateTimePicker extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.properties = props;
|
||||
this.externalClasses = [`${prefix}-class`, `${prefix}-class-confirm`, `${prefix}-class-cancel`, `${prefix}-class-title`];
|
||||
this.options = {
|
||||
multipleSlots: true,
|
||||
};
|
||||
this.observers = {
|
||||
'start, end, value': function () {
|
||||
this.updateColumns();
|
||||
},
|
||||
mode(m) {
|
||||
const fullModes = this.getFullModeArray(m);
|
||||
this.setData({
|
||||
fullModes,
|
||||
});
|
||||
this.updateColumns();
|
||||
},
|
||||
};
|
||||
this.date = null;
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
columns: [],
|
||||
columnsValue: [],
|
||||
fullModes: [],
|
||||
locale: defaultLocale,
|
||||
};
|
||||
this.controlledProps = [
|
||||
{
|
||||
key: 'value',
|
||||
event: 'change',
|
||||
},
|
||||
];
|
||||
this.methods = {
|
||||
updateColumns() {
|
||||
this.date = this.getParseDate();
|
||||
const { columns, columnsValue } = this.getValueCols();
|
||||
this.setData({
|
||||
columns,
|
||||
columnsValue,
|
||||
});
|
||||
},
|
||||
getParseDate() {
|
||||
const { value, defaultValue } = this.properties;
|
||||
const minDate = this.getMinDate();
|
||||
const isTimeMode = this.isTimeMode();
|
||||
let currentValue = value || defaultValue;
|
||||
if (isTimeMode) {
|
||||
const dateStr = dayjs(minDate).format('YYYY-MM-DD');
|
||||
currentValue = dayjs(`${dateStr} ${currentValue}`);
|
||||
}
|
||||
const parseDate = dayjs(currentValue || minDate);
|
||||
const isDateValid = parseDate.isValid();
|
||||
return isDateValid ? parseDate : minDate;
|
||||
},
|
||||
getMinDate() {
|
||||
const { start } = this.properties;
|
||||
return start ? dayjs(start) : DEFAULT_MIN_DATE;
|
||||
},
|
||||
getMaxDate() {
|
||||
const { end } = this.properties;
|
||||
return end ? dayjs(end) : DEFAULT_MAX_DATE;
|
||||
},
|
||||
getDateRect(type = 'default') {
|
||||
const map = {
|
||||
min: 'getMinDate',
|
||||
max: 'getMaxDate',
|
||||
default: 'getDate',
|
||||
};
|
||||
const date = this[map[type]]();
|
||||
const keys = ['year', 'month', 'date', 'hour', 'minute', 'second'];
|
||||
return keys.map((k) => { var _a; return (_a = date[k]) === null || _a === void 0 ? void 0 : _a.call(date); });
|
||||
},
|
||||
getDate() {
|
||||
return this.clipDate((this === null || this === void 0 ? void 0 : this.date) || DEFAULT_MIN_DATE);
|
||||
},
|
||||
clipDate(date) {
|
||||
const minDate = this.getMinDate();
|
||||
const maxDate = this.getMaxDate();
|
||||
return dayjs(Math.min(Math.max(minDate.valueOf(), date.valueOf()), maxDate.valueOf()));
|
||||
},
|
||||
setYear(date, year) {
|
||||
const beforeMonthDays = date.date();
|
||||
const afterMonthDays = date.year(year).daysInMonth();
|
||||
const tempDate = date.date(Math.min(beforeMonthDays.valueOf(), afterMonthDays.valueOf()));
|
||||
return tempDate.year(year);
|
||||
},
|
||||
setMonth(date, month) {
|
||||
const beforeMonthDays = date.date();
|
||||
const afterMonthDays = date.month(month).daysInMonth();
|
||||
const tempDate = date.date(Math.min(beforeMonthDays.valueOf(), afterMonthDays.valueOf()));
|
||||
return tempDate.month(month);
|
||||
},
|
||||
getColumnOptions() {
|
||||
const { fullModes } = this.data;
|
||||
const columnOptions = [];
|
||||
fullModes === null || fullModes === void 0 ? void 0 : fullModes.forEach((mode) => {
|
||||
const columnOption = this.getOptionByType(mode);
|
||||
columnOptions.push(columnOption);
|
||||
});
|
||||
return columnOptions;
|
||||
},
|
||||
getOptionByType(type) {
|
||||
const { locale } = this.data;
|
||||
const options = [];
|
||||
const minEdge = this.getOptionEdge('min', type);
|
||||
const maxEdge = this.getOptionEdge('max', type);
|
||||
for (let i = minEdge; i <= maxEdge; i += 1) {
|
||||
const label = type === 'month' ? i + 1 : i;
|
||||
options.push({
|
||||
value: `${i}`,
|
||||
label: `${label + locale[type]}`,
|
||||
});
|
||||
}
|
||||
return options;
|
||||
},
|
||||
getYearOptions(dateParams) {
|
||||
const { locale } = this.data;
|
||||
const { minDateYear, maxDateYear } = dateParams;
|
||||
const years = [];
|
||||
for (let i = minDateYear; i <= maxDateYear; i += 1) {
|
||||
years.push({
|
||||
value: `${i}`,
|
||||
label: `${i + locale.year}`,
|
||||
});
|
||||
}
|
||||
return years;
|
||||
},
|
||||
getOptionEdge(minOrMax, type) {
|
||||
const selDateArray = this.getDateRect();
|
||||
const compareArray = this.getDateRect(minOrMax);
|
||||
const edge = {
|
||||
month: [0, 11],
|
||||
date: [1, this.getDate().daysInMonth()],
|
||||
hour: [0, 23],
|
||||
minute: [0, 59],
|
||||
second: [0, 59],
|
||||
};
|
||||
const types = ['year', 'month', 'date', 'hour', 'minute', 'second'];
|
||||
for (let i = 0, size = selDateArray.length; i < size; i += 1) {
|
||||
if (types[i] === type)
|
||||
return compareArray[i];
|
||||
if (compareArray[i] !== selDateArray[i])
|
||||
return edge[type][minOrMax === 'min' ? 0 : 1];
|
||||
}
|
||||
return edge[type][minOrMax === 'min' ? 0 : 1];
|
||||
},
|
||||
getMonthOptions() {
|
||||
const { locale } = this.data;
|
||||
const months = [];
|
||||
const minMonth = this.getOptionEdge('min', 'month');
|
||||
const maxMonth = this.getOptionEdge('max', 'month');
|
||||
for (let i = minMonth; i <= maxMonth; i += 1) {
|
||||
months.push({
|
||||
value: `${i}`,
|
||||
label: `${i + 1 + locale.month}`,
|
||||
});
|
||||
}
|
||||
return months;
|
||||
},
|
||||
getDayOptions() {
|
||||
const { locale } = this.data;
|
||||
const days = [];
|
||||
const minDay = this.getOptionEdge('min', 'date');
|
||||
const maxDay = this.getOptionEdge('max', 'date');
|
||||
for (let i = minDay; i <= maxDay; i += 1) {
|
||||
days.push({
|
||||
value: `${i}`,
|
||||
label: `${i + locale.day}`,
|
||||
});
|
||||
}
|
||||
return days;
|
||||
},
|
||||
getHourOptions() {
|
||||
const { locale } = this.data;
|
||||
const hours = [];
|
||||
const minHour = this.getOptionEdge('min', 'hour');
|
||||
const maxHour = this.getOptionEdge('max', 'hour');
|
||||
for (let i = minHour; i <= maxHour; i += 1) {
|
||||
hours.push({
|
||||
value: `${i}`,
|
||||
label: `${i + locale.hour}`,
|
||||
});
|
||||
}
|
||||
return hours;
|
||||
},
|
||||
getMinuteOptions() {
|
||||
const { locale } = this.data;
|
||||
const minutes = [];
|
||||
const minMinute = this.getOptionEdge('min', 'minute');
|
||||
const maxMinute = this.getOptionEdge('max', 'minute');
|
||||
for (let i = minMinute; i <= maxMinute; i += 1) {
|
||||
minutes.push({
|
||||
value: `${i}`,
|
||||
label: `${i + locale.minute}`,
|
||||
});
|
||||
}
|
||||
return minutes;
|
||||
},
|
||||
getValueCols() {
|
||||
return {
|
||||
columns: this.getColumnOptions(),
|
||||
columnsValue: this.getColumnsValue(),
|
||||
};
|
||||
},
|
||||
getColumnsValue() {
|
||||
const { fullModes } = this.data;
|
||||
const date = this.getDate();
|
||||
const columnsValue = [];
|
||||
fullModes === null || fullModes === void 0 ? void 0 : fullModes.forEach((mode) => {
|
||||
columnsValue.push(`${date[mode]()}`);
|
||||
});
|
||||
return columnsValue;
|
||||
},
|
||||
getNewDate(value, type) {
|
||||
let newValue = this.getDate();
|
||||
switch (type) {
|
||||
case ModeItem.YEAR:
|
||||
newValue = this.setYear(newValue, value);
|
||||
break;
|
||||
case ModeItem.MONTH:
|
||||
newValue = this.setMonth(newValue, value);
|
||||
break;
|
||||
case ModeItem.DATE:
|
||||
newValue = newValue.date(value);
|
||||
break;
|
||||
case ModeItem.HOUR:
|
||||
newValue = newValue.hour(value);
|
||||
break;
|
||||
case ModeItem.MINUTE:
|
||||
newValue = newValue.minute(value);
|
||||
break;
|
||||
case ModeItem.SECOND:
|
||||
newValue = newValue.second(value);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return this.clipDate(newValue);
|
||||
},
|
||||
onColumnChange(e) {
|
||||
const { value, column } = e === null || e === void 0 ? void 0 : e.detail;
|
||||
const { fullModes, format } = this.data;
|
||||
const columnValue = value === null || value === void 0 ? void 0 : value[column];
|
||||
const columnType = fullModes === null || fullModes === void 0 ? void 0 : fullModes[column];
|
||||
const newValue = this.getNewDate(parseInt(columnValue, 10), columnType);
|
||||
this.date = newValue;
|
||||
const { columns, columnsValue } = this.getValueCols();
|
||||
this.setData({
|
||||
columns,
|
||||
columnsValue,
|
||||
});
|
||||
const date = this.getDate();
|
||||
const pickValue = format ? date.format(format) : date.valueOf();
|
||||
this.triggerEvent('pick', { value: pickValue });
|
||||
},
|
||||
onConfirm() {
|
||||
const { format } = this.properties;
|
||||
const date = this.getDate();
|
||||
const value = format ? date.format(format) : date.valueOf();
|
||||
this._trigger('change', { value });
|
||||
this.resetColumns();
|
||||
},
|
||||
onCancel() {
|
||||
this.resetColumns();
|
||||
this.triggerEvent('cancel');
|
||||
},
|
||||
onVisibleChange(e) {
|
||||
if (!e.detail.visible) {
|
||||
this.resetColumns();
|
||||
}
|
||||
},
|
||||
resetColumns() {
|
||||
const parseDate = this.getParseDate();
|
||||
this.date = parseDate;
|
||||
const { columns, columnsValue } = this.getValueCols();
|
||||
this.setData({
|
||||
columns,
|
||||
columnsValue,
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
getFullModeArray(mode) {
|
||||
if (typeof mode === 'string' || mode instanceof String) {
|
||||
return this.getFullModeByModeString(mode, FULL_MODES);
|
||||
}
|
||||
if (Array.isArray(mode)) {
|
||||
if ((mode === null || mode === void 0 ? void 0 : mode.length) === 1) {
|
||||
return this.getFullModeByModeString(mode[0], FULL_MODES);
|
||||
}
|
||||
if ((mode === null || mode === void 0 ? void 0 : mode.length) === 2) {
|
||||
const dateModes = this.getFullModeByModeString(mode[0], DATE_MODES);
|
||||
const timeModes = this.getFullModeByModeString(mode[1], TIME_MODES);
|
||||
return [...dateModes, ...timeModes];
|
||||
}
|
||||
}
|
||||
}
|
||||
getFullModeByModeString(modeString, matchModes) {
|
||||
if (!modeString) {
|
||||
return [];
|
||||
}
|
||||
const endIndex = matchModes === null || matchModes === void 0 ? void 0 : matchModes.findIndex((mode) => modeString === mode);
|
||||
return matchModes === null || matchModes === void 0 ? void 0 : matchModes.slice(0, endIndex + 1);
|
||||
}
|
||||
isTimeMode() {
|
||||
const { fullModes } = this.data;
|
||||
return fullModes[0] === ModeItem.HOUR;
|
||||
}
|
||||
};
|
||||
DateTimePicker = __decorate([
|
||||
wxComponent()
|
||||
], DateTimePicker);
|
||||
export default DateTimePicker;
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-picker": "../picker/picker",
|
||||
"t-picker-item": "../picker-item/picker-item"
|
||||
}
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
<t-picker
|
||||
custom-style="{{ customStyle }}"
|
||||
class="{{classPrefix}}"
|
||||
visible="{{visible}}"
|
||||
value="{{columnsValue}}"
|
||||
bind:pick="onColumnChange"
|
||||
bind:change="onConfirm"
|
||||
bind:cancel="onCancel"
|
||||
bind:visible-change="onVisibleChange"
|
||||
header="{{header}}"
|
||||
title="{{title}}"
|
||||
confirmBtn="{{confirmBtn || locale.confirm}}"
|
||||
cancelBtn="{{cancelBtn || locale.cancel}}"
|
||||
>
|
||||
<slot slot="header" name="header" />
|
||||
|
||||
<t-picker-item wx:for="{{columns}}" wx:key="index" class="{{classPrefix}}__item" options="{{item}}" index="index" />
|
||||
<slot slot="footer" name="footer" />
|
||||
</t-picker>
|
||||
@@ -1,13 +0,0 @@
|
||||
declare const _default: {
|
||||
year: string;
|
||||
month: string;
|
||||
date: string;
|
||||
hour: string;
|
||||
minute: string;
|
||||
second: string;
|
||||
am: string;
|
||||
pm: string;
|
||||
confirm: string;
|
||||
cancel: string;
|
||||
};
|
||||
export default _default;
|
||||
@@ -1,12 +0,0 @@
|
||||
export default {
|
||||
year: '',
|
||||
month: '',
|
||||
date: '',
|
||||
hour: '',
|
||||
minute: '',
|
||||
second: '',
|
||||
am: 'AM',
|
||||
pm: 'PM',
|
||||
confirm: 'confirm',
|
||||
cancel: 'cancel',
|
||||
};
|
||||
@@ -1,13 +0,0 @@
|
||||
declare const _default: {
|
||||
year: string;
|
||||
month: string;
|
||||
date: string;
|
||||
hour: string;
|
||||
minute: string;
|
||||
second: string;
|
||||
am: string;
|
||||
pm: string;
|
||||
confirm: string;
|
||||
cancel: string;
|
||||
};
|
||||
export default _default;
|
||||
@@ -1,12 +0,0 @@
|
||||
export default {
|
||||
year: '年',
|
||||
month: '月',
|
||||
date: '日',
|
||||
hour: '时',
|
||||
minute: '分',
|
||||
second: '秒',
|
||||
am: '上午',
|
||||
pm: '下午',
|
||||
confirm: '确定',
|
||||
cancel: '取消',
|
||||
};
|
||||
@@ -1,3 +0,0 @@
|
||||
import { TdDateTimePickerProps } from './type';
|
||||
declare const props: TdDateTimePickerProps;
|
||||
export default props;
|
||||
@@ -1,59 +0,0 @@
|
||||
const props = {
|
||||
cancelBtn: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
confirmBtn: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
customStyle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
end: {
|
||||
type: null,
|
||||
},
|
||||
externalClasses: {
|
||||
type: Array,
|
||||
},
|
||||
footer: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
format: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
header: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
mode: {
|
||||
type: null,
|
||||
value: 'date',
|
||||
},
|
||||
showWeek: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
start: {
|
||||
type: null,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
value: {
|
||||
type: null,
|
||||
value: null,
|
||||
},
|
||||
defaultValue: {
|
||||
type: null,
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
@@ -1,65 +0,0 @@
|
||||
export interface TdDateTimePickerProps {
|
||||
cancelBtn?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
confirmBtn?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
customStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
end?: {
|
||||
type: StringConstructor;
|
||||
value?: string | number;
|
||||
};
|
||||
externalClasses?: {
|
||||
type: ArrayConstructor;
|
||||
value?: ['t-class', 't-class-confirm', 't-class-cancel', 't-class-title'];
|
||||
};
|
||||
footer?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
format?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
header?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
mode?: {
|
||||
type: StringConstructor;
|
||||
value?: DateTimePickerMode;
|
||||
};
|
||||
showWeek?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
start?: {
|
||||
type: StringConstructor;
|
||||
value?: string | number;
|
||||
};
|
||||
title?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
value?: {
|
||||
type: StringConstructor;
|
||||
value?: DateValue;
|
||||
};
|
||||
defaultValue?: {
|
||||
type: StringConstructor;
|
||||
value?: DateValue;
|
||||
};
|
||||
visible?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
}
|
||||
export declare type DateTimePickerMode = TimeModeValues | Array<TimeModeValues>;
|
||||
export declare type TimeModeValues = 'year' | 'month' | 'date' | 'hour' | 'minute' | 'second';
|
||||
export declare type DateValue = string | number;
|
||||
@@ -1 +0,0 @@
|
||||
export {};
|
||||
@@ -1,13 +0,0 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
### Divider Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
align | String | center | options：left/right/center | N
|
||||
content | String / Slot | - | \- | N
|
||||
custom-style | String | - | \- | N
|
||||
dashed | Boolean | false | \- | N
|
||||
external-classes | Array | - | `['t-class', 't-class-line', 't-class-content']` | N
|
||||
layout | String | horizontal | options：horizontal/vertical | N
|
||||
@@ -1,41 +0,0 @@
|
||||
---
|
||||
title: Divider 分割符
|
||||
description: 用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。
|
||||
spline: message
|
||||
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-divider": "tdesign-miniprogram/divider/divider"
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础分割符
|
||||
|
||||
分割符主要是由直线和文字组成，通过`slot`传入分割线文案或者其他自定义内容，通过`layout`控制分隔符是垂直还是横向
|
||||
|
||||
{{ base }}
|
||||
|
||||
### 虚线样式
|
||||
|
||||
{{ theme }}
|
||||
|
||||
## API
|
||||
### Divider Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
align | String | center | 文本位置（仅在水平分割线有效）。可选项：left/right/center | N
|
||||
content | String / Slot | - | 子元素 | N
|
||||
custom-style `v0.25.0` | String | - | 自定义组件样式 | N
|
||||
dashed | Boolean | false | 是否虚线（仅在水平分割线有效） | N
|
||||
external-classes | Array | - | 组件类名，分别用于设置 组件外层类名、分隔线类名 等。`['t-class', 't-class-line', 't-class-content']` | N
|
||||
layout | String | horizontal | 分隔线类型有两种：水平和垂直。可选项：horizontal/vertical | N
|
||||
@@ -1,19 +0,0 @@
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
export default class Divider extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
options: {
|
||||
addGlobalClass: boolean;
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
properties: import("./type").TdDividerProps;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
};
|
||||
observers: {
|
||||
'lineColor, customStyle'(): void;
|
||||
};
|
||||
methods: {
|
||||
setStyle(): void;
|
||||
};
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
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}-divider`;
|
||||
let Divider = class Divider extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`];
|
||||
this.options = {
|
||||
addGlobalClass: true,
|
||||
multipleSlots: true,
|
||||
};
|
||||
this.properties = props;
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
};
|
||||
this.observers = {
|
||||
'lineColor, customStyle'() {
|
||||
this.setStyle();
|
||||
},
|
||||
};
|
||||
this.methods = {
|
||||
setStyle() {
|
||||
const { lineColor, customStyle } = this.properties;
|
||||
const dividerStyle = `${lineColor ? `border-color: ${lineColor};` : ''}${customStyle ? `${customStyle}` : ''}`;
|
||||
this.setData({
|
||||
dividerStyle,
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
Divider = __decorate([
|
||||
wxComponent()
|
||||
], Divider);
|
||||
export default Divider;
|
||||
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
<view class="{{layout==='vertical'? classPrefix + '--vertical-center' : ''}}">
|
||||
<view
|
||||
class="{{prefix}}-class {{classPrefix}} {{classPrefix}}--{{layout}} {{classPrefix}}--{{align}} {{dashed? classPrefix + '--dashed' : ''}} "
|
||||
style="{{ dividerStyle }}"
|
||||
>
|
||||
<view class="{{prefix}}-class-content {{classPrefix}}__content">
|
||||
<view wx:if="{{content}}"> {{content}} </view>
|
||||
<slot wx:else name="content" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user