个人消息
This commit is contained in:
limqhz
79
components/steps/README.md
Normal file
79
components/steps/README.md
Normal file
@@ -0,0 +1,79 @@
|
||||
---
|
||||
title: Steps 步骤条
|
||||
description: 用于任务步骤展示或任务进度展示。
|
||||
spline: navigation
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-98%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-88%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-96%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-82%25-blue" /></span>
|
||||
## 引入
|
||||
|
||||
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"t-steps": "tdesign-miniprogram/steps/steps",
|
||||
"t-step-item": "tdesign-miniprogram/steps/step-item",
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
步骤条，方向可以横向和纵向，可以自定义步骤条显示内容以及是否可写
|
||||
|
||||
#### 横向可操作步骤条
|
||||
|
||||
{{ horizontal }}
|
||||
|
||||
#### 横向只读步骤条
|
||||
|
||||
{{ readonly }}
|
||||
|
||||
|
||||
#### 竖向只读步骤条
|
||||
|
||||
{{ vertical }}
|
||||
|
||||
#### 竖向简化只读步骤条
|
||||
|
||||
{{ theme }}
|
||||
|
||||
#### 竖向双层级只读步骤条
|
||||
|
||||
{{ double }}
|
||||
|
||||
#### 自定义内容步骤条
|
||||
|
||||
{{ customization }}
|
||||
|
||||
|
||||
|
||||
## API
|
||||
### Steps Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
current | String / Number | 0 | 当前步骤，即整个步骤条进度，格式为`1`、`1-0`或`1-1`。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。若当前步骤条存在子步骤条，则会根据子步骤条重新判断当前步骤状态（子步骤条中存在error，则当前步骤error，子步骤条中存在process，当前步骤process，若最后一个子步骤条finish，当前步骤finish，优先级为`finish>error>process`）。注意：如果每个步骤条单独设置了status，则步骤条为设定的status，若传入`status:''`,将默认为未开始状态,传入的status优先级最高。 | N
|
||||
default-current | String / Number | undefined | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成。非受控属性 | N
|
||||
current-status | String | process | 用于控制 current 指向的步骤条的状态。可选项：default/process/finish/error | N
|
||||
external-classes | Array | - | 组件类名，用于设置组件外层元素元素类名。`['t-class']` | N
|
||||
layout | String | horizontal | 步骤条方向，有两种：横向和纵向。可选项：horizontal/vertical | N
|
||||
readonly | Boolean | false | 只读状态 | N
|
||||
theme | String | default | 步骤条风格。可选项：default/dot | N
|
||||
|
||||
### Steps Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
change | `({current: string | number, previous: string | number})` | 当前步骤发生变化时触发
|
||||
|
||||
### StepItem Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
content | String / Slot | '' | 步骤描述 | N
|
||||
external-classes | Array | - | 组件类名，用于设置组件外层元素元素类名。`['t-class', 't-class-inner', 't-class-content', 't-class-title', 't-class-description', 't-class-extra', 't-class-sub', 't-class-sub-dot', 't-class-sub-content']` | N
|
||||
icon | String / Slot | - | 图标。传入 slot 代表使用插槽，其他字符串代表使用内置图标 | N
|
||||
status | String | default | 当前步骤的状态。可选项：default/process/finish/error。TS 类型：`StepStatus` `type StepStatus = 'default' | 'process' | 'finish' | 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/steps/type.ts) | N
|
||||
sub-step-items | Array | [] | 子步骤条，仅支持 layout = 'vertical' 时。TS 类型：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/steps/type.ts) | N
|
||||
title | String / Slot | '' | 标题 | N
|
||||
3
components/steps/props.d.ts
vendored
Normal file
3
components/steps/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdStepsProps } from './type';
|
||||
declare const props: TdStepsProps;
|
||||
export default props;
|
||||
32
components/steps/props.js
Normal file
32
components/steps/props.js
Normal file
@@ -0,0 +1,32 @@
|
||||
const props = {
|
||||
current: {
|
||||
type: String,
|
||||
optionalTypes: [Number],
|
||||
value: null,
|
||||
},
|
||||
defaultCurrent: {
|
||||
type: String,
|
||||
optionalTypes: [Number],
|
||||
value: 0,
|
||||
},
|
||||
currentStatus: {
|
||||
type: String,
|
||||
value: 'process',
|
||||
},
|
||||
externalClasses: {
|
||||
type: Array,
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
value: 'horizontal',
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
value: 'default',
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
3
components/steps/step-item-props.d.ts
vendored
Normal file
3
components/steps/step-item-props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdStepItemProps } from './type';
|
||||
declare const props: TdStepItemProps;
|
||||
export default props;
|
||||
25
components/steps/step-item-props.js
Normal file
25
components/steps/step-item-props.js
Normal file
@@ -0,0 +1,25 @@
|
||||
const props = {
|
||||
content: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
externalClasses: {
|
||||
type: Array,
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
},
|
||||
status: {
|
||||
type: String,
|
||||
value: 'default',
|
||||
},
|
||||
subStepItems: {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
36
components/steps/step-item.d.ts
vendored
Normal file
36
components/steps/step-item.d.ts
vendored
Normal file
@@ -0,0 +1,36 @@
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
export default class StepItem extends SuperComponent {
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
relations: RelationsOptions;
|
||||
externalClasses: string[];
|
||||
properties: import("./type").TdStepItemProps;
|
||||
parent: any;
|
||||
data: {
|
||||
classPrefix: string;
|
||||
prefix: string;
|
||||
rootClassName: string;
|
||||
index: number;
|
||||
isDot: boolean;
|
||||
curStatus: string;
|
||||
curSubStepItems: any[];
|
||||
curSubStepItemsStatus: any[];
|
||||
layout: string;
|
||||
type: string;
|
||||
isLastChild: boolean;
|
||||
isLarge: boolean;
|
||||
readonly: boolean;
|
||||
computedIcon: string;
|
||||
};
|
||||
observers: {
|
||||
icon(val: any): void;
|
||||
};
|
||||
lifetimes: {
|
||||
ready(): void;
|
||||
};
|
||||
methods: {
|
||||
updateStatus(current: any, currentStatus: any, index: any, theme: any, layout: any, steps: any, readonly: any): void;
|
||||
click(): void;
|
||||
};
|
||||
}
|
||||
150
components/steps/step-item.js
Normal file
150
components/steps/step-item.js
Normal file
@@ -0,0 +1,150 @@
|
||||
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 { wxComponent, SuperComponent } from '../common/src/index';
|
||||
import config from '../common/config';
|
||||
import props from './step-item-props';
|
||||
const { prefix } = config;
|
||||
let StepItem = class StepItem extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.options = {
|
||||
multipleSlots: true,
|
||||
};
|
||||
this.relations = {
|
||||
'./steps': {
|
||||
type: 'ancestor',
|
||||
},
|
||||
};
|
||||
this.externalClasses = [
|
||||
`${prefix}-class`,
|
||||
`${prefix}-class-inner`,
|
||||
`${prefix}-class-content`,
|
||||
`${prefix}-class-title`,
|
||||
`${prefix}-class-description`,
|
||||
`${prefix}-class-extra`,
|
||||
`${prefix}-class-sub`,
|
||||
`${prefix}-class-sub-dot`,
|
||||
`${prefix}-class-sub-content`,
|
||||
];
|
||||
this.properties = props;
|
||||
this.parent = null;
|
||||
this.data = {
|
||||
classPrefix: `${prefix}-steps-item`,
|
||||
prefix,
|
||||
rootClassName: '',
|
||||
index: 0,
|
||||
isDot: false,
|
||||
curStatus: '',
|
||||
curSubStepItems: [],
|
||||
curSubStepItemsStatus: [],
|
||||
layout: 'vertical',
|
||||
type: 'default',
|
||||
isLastChild: false,
|
||||
isLarge: false,
|
||||
readonly: false,
|
||||
computedIcon: '',
|
||||
};
|
||||
this.observers = {
|
||||
icon(val) {
|
||||
this.setData({
|
||||
computedIcon: val,
|
||||
});
|
||||
},
|
||||
};
|
||||
this.lifetimes = {
|
||||
ready() {
|
||||
const [parent] = this.getRelationNodes('./steps') || [];
|
||||
if (parent) {
|
||||
this.parent = parent;
|
||||
}
|
||||
},
|
||||
};
|
||||
this.methods = {
|
||||
updateStatus(current, currentStatus, index, theme, layout, steps, readonly) {
|
||||
const _current = String(current);
|
||||
const connectLine = '-';
|
||||
const judgeObjAttr = (data, attr) => {
|
||||
return Array.isArray(data[attr]) && data[attr].length;
|
||||
};
|
||||
const getStepLevel = (s) => {
|
||||
const reg = new RegExp(`(.*)${connectLine}{1}.*`);
|
||||
return s.replace(reg, '$1');
|
||||
};
|
||||
const isSameLevelStep = (stepsTag, current) => {
|
||||
return stepsTag.length < current.length && getStepLevel(stepsTag) === getStepLevel(current);
|
||||
};
|
||||
const stepFinalStatus = (item, itemTag, current, currentStatus) => {
|
||||
let tempStepStatus = '';
|
||||
if (item.status !== 'default' && item.status !== undefined) {
|
||||
tempStepStatus = item.status === '' ? 'default' : item.status;
|
||||
}
|
||||
else {
|
||||
tempStepStatus = 'default';
|
||||
if (itemTag < current) {
|
||||
tempStepStatus = 'finish';
|
||||
}
|
||||
else if (itemTag === current && item.status !== '') {
|
||||
tempStepStatus = currentStatus;
|
||||
}
|
||||
if (isSameLevelStep(itemTag, current)) {
|
||||
if (judgeObjAttr(item, 'subStepItems')) {
|
||||
const tempStepItemsStatus = item.subStepItems.map((subItem, subIndex) => {
|
||||
const subItemTag = `${itemTag}${connectLine}${subIndex}`;
|
||||
return stepFinalStatus(subItem, subItemTag, current, currentStatus);
|
||||
});
|
||||
if (tempStepItemsStatus[tempStepItemsStatus.length - 1] === 'finish') {
|
||||
tempStepStatus = 'finish';
|
||||
return tempStepStatus;
|
||||
}
|
||||
if (tempStepItemsStatus.includes('process') || tempStepItemsStatus.every((item) => item === 'default')) {
|
||||
tempStepStatus = 'process';
|
||||
}
|
||||
if (tempStepItemsStatus.includes('error')) {
|
||||
tempStepStatus = 'error';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return tempStepStatus;
|
||||
};
|
||||
this.data.tempStatus = stepFinalStatus(this.data, String(index), _current, currentStatus);
|
||||
const tempStatusList = [];
|
||||
if (judgeObjAttr(this.data, 'subStepItems')) {
|
||||
this.data.subStepItems.forEach((subItem, subIndex) => {
|
||||
tempStatusList.push(stepFinalStatus(subItem, `${index}${connectLine}${subIndex}`, _current, currentStatus));
|
||||
});
|
||||
}
|
||||
const tempIcon = new Map([
|
||||
['finish', 'check'],
|
||||
['error', 'close'],
|
||||
]);
|
||||
let iconStatus = '';
|
||||
if (readonly && tempIcon.has(this.data.tempStatus)) {
|
||||
iconStatus = tempIcon.get(this.data.tempStatus);
|
||||
}
|
||||
this.setData({
|
||||
curStatus: this.data.tempStatus,
|
||||
curSubStepItems: this.data.subStepItems || [],
|
||||
curSubStepItemsStatus: tempStatusList || [],
|
||||
computedIcon: this.data.icon || iconStatus,
|
||||
index,
|
||||
isDot: theme === 'dot' && layout === 'vertical',
|
||||
layout,
|
||||
theme,
|
||||
isLastChild: steps.length - 1 === index,
|
||||
});
|
||||
},
|
||||
click() {
|
||||
this.parent.handleClick(this.data.index);
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
StepItem = __decorate([
|
||||
wxComponent()
|
||||
], StepItem);
|
||||
export default StepItem;
|
||||
6
components/steps/step-item.json
Normal file
6
components/steps/step-item.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-icon": "../icon/icon"
|
||||
}
|
||||
}
|
||||
55
components/steps/step-item.wxml
Normal file
55
components/steps/step-item.wxml
Normal file
@@ -0,0 +1,55 @@
|
||||
<view
|
||||
class="{{prefix}}-step {{prefix}}-step--{{layout}} {{prefix}}-step--{{theme}}-anchor {{prefix}}-step--{{isLastChild ? 'last-child':'not-last-child'}} {{prefix}}-class {{readonly ? prefix + '-step--readonly' : ''}}"
|
||||
>
|
||||
<view class="{{classPrefix}} {{classPrefix}}--{{curStatus}}">
|
||||
<view class=" {{classPrefix}}__inner {{isLarge ? classPrefix + '__inner--large' : '' }} {{prefix}}-class-inner">
|
||||
<view class="{{classPrefix}}-wrapper">
|
||||
<!-- icon -->
|
||||
<view class="{{classPrefix}}__icon" bindtap="click">
|
||||
<view wx:if="{{isDot}}" class="{{classPrefix}}__icon-dot"></view>
|
||||
<view
|
||||
wx:elif="{{computedIcon}}"
|
||||
class="{{computedIcon === 'slot'? (classPrefix + '__icon-slot' ) : (classPrefix + '__icon-number')}} {{isLarge ? (classPrefix + '__icon-number--large') : ''}}"
|
||||
>
|
||||
<slot wx:if="{{computedIcon === 'slot'}}" name="icon" />
|
||||
<t-icon wx:else name="{{computedIcon}}" size="{{isLarge ? '24px' : '16px'}}" />
|
||||
</view>
|
||||
<view wx:else class="{{classPrefix}}__icon-number">{{index + 1}}</view>
|
||||
</view>
|
||||
<!-- content -->
|
||||
<view class="{{classPrefix}}__content {{prefix}}-class-content">
|
||||
<view class="{{classPrefix}}__title {{prefix}}-class-title">
|
||||
{{ title }}
|
||||
<slot name="title" />
|
||||
</view>
|
||||
<view class="{{classPrefix}}__description {{prefix}}-class-description">
|
||||
{{ content }}
|
||||
<slot name="content" />
|
||||
</view>
|
||||
<view class="{{classPrefix}}__extra {{prefix}}-class-extra">
|
||||
<slot name="extra" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 垂直 子步骤条 -->
|
||||
<view
|
||||
class="{{classPrefix}}__sub-wrapper"
|
||||
wx:if="{{ layout === 'vertical' && curSubStepItems.length && !isLastChild}}"
|
||||
>
|
||||
<!-- 子步骤条默认状态:default -->
|
||||
<view
|
||||
class="{{classPrefix}}-sub {{classPrefix}}-sub-status--default {{classPrefix}}-sub-status--{{curSubStepItemsStatus[index]}} {{prefix}}-class-sub"
|
||||
wx:for="{{curSubStepItems}}"
|
||||
wx:key="key"
|
||||
wx:item="item"
|
||||
>
|
||||
<view class="{{classPrefix}}-sub-dot">
|
||||
<view class="{{classPrefix}}-sub-dot-item {{prefix}}-class-sub-dot"></view>
|
||||
</view>
|
||||
<view class="{{classPrefix}}-sub__content {{prefix}}-class-sub-content"> {{ item.title }} </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
309
components/steps/step-item.wxss
Normal file
309
components/steps/step-item.wxss
Normal file
@@ -0,0 +1,309 @@
|
||||
.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-steps-item {
|
||||
flex: 1;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
}
|
||||
.t-steps-item__inner {
|
||||
position: relative;
|
||||
}
|
||||
.t-steps-item__icon {
|
||||
z-index: 1;
|
||||
vertical-align: top;
|
||||
font-size: 28rpx;
|
||||
position: relative;
|
||||
color: #ddd;
|
||||
}
|
||||
.t-steps-item__icon-number {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
border: 1px solid #c5c5c5;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
color: #c5c5c5;
|
||||
}
|
||||
.t-steps-item__icon-slot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
text-align: center;
|
||||
color: #c5c5c5;
|
||||
}
|
||||
.t-steps-item__content {
|
||||
text-align: center;
|
||||
}
|
||||
.t-steps-item__title {
|
||||
position: relative;
|
||||
color: rgba(0, 0, 0, 0.26);
|
||||
line-height: 22px;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 4px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.t-steps-item__description {
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
line-height: 20px;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.t-steps-item__extra:not(:empty) {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
:host {
|
||||
flex: 1;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
align-self: flex-start;
|
||||
width: inherit;
|
||||
}
|
||||
.t-step--horizontal .t-steps-item__content {
|
||||
max-width: 80px;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
.t-step--horizontal .t-steps-item__inner .t-steps-item-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.t-step--horizontal .t-steps-item--finish .t-steps-item__icon-number {
|
||||
border-color: #0052d9;
|
||||
color: #0052d9;
|
||||
}
|
||||
.t-step--horizontal .t-steps-item--finish .t-steps-item__title {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
.t-step--horizontal .t-steps-item--process .t-steps-item__icon-number {
|
||||
background: #0052d9;
|
||||
color: #fff;
|
||||
border-color: #0052d9;
|
||||
}
|
||||
.t-step--horizontal .t-steps-item--process .t-steps-item__title {
|
||||
color: #0052d9;
|
||||
}
|
||||
.t-step--horizontal .t-steps-item--error .t-steps-item__icon-number {
|
||||
color: #e34d59;
|
||||
border-color: #e34d59;
|
||||
}
|
||||
.t-step--horizontal .t-steps-item--error .t-steps-item__title {
|
||||
color: #e34d59;
|
||||
}
|
||||
.t-step--horizontal .t-steps-item--default .t-steps-item__icon-number {
|
||||
border-color: #c5c5c5;
|
||||
color: #c5c5c5;
|
||||
}
|
||||
.t-step--horizontal .t-steps-item--default .t-steps-item__title,
|
||||
.t-step--horizontal .t-steps-item--default .t-steps-item__description {
|
||||
color: rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
.t-step--horizontal.t-step--not-last-child .t-steps-item__inner:after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 1px;
|
||||
background: #0052d9;
|
||||
position: absolute;
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
top: 13px;
|
||||
left: 50%;
|
||||
}
|
||||
.t-step--horizontal.t-step--not-last-child .t-steps-item__inner.t-steps-item__inner--large:after {
|
||||
top: calc(40px / 2);
|
||||
}
|
||||
.t-step--horizontal.t-step--not-last-child.t-step--readonly .t-steps-item--process .t-steps-item__inner:after,
|
||||
.t-step--horizontal.t-step--not-last-child.t-step--readonly .t-steps-item--error .t-steps-item__inner:after,
|
||||
.t-step--horizontal.t-step--not-last-child.t-step--readonly .t-steps-item--default .t-steps-item__inner:after {
|
||||
background: #c5c5c5;
|
||||
}
|
||||
.t-step--vertical .t-steps-item {
|
||||
position: relative;
|
||||
}
|
||||
.t-step--vertical .t-steps-item-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.t-step--vertical .t-steps-item-wrapper:only-child {
|
||||
padding-bottom: 50rpx;
|
||||
}
|
||||
.t-step--vertical .t-steps-item-wrapper + .t-steps-item__sub-wrapper:not(:empty) {
|
||||
padding-top: 32rpx;
|
||||
padding-bottom: 48rpx;
|
||||
}
|
||||
.t-step--vertical .t-steps-item-sub {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 40rpx;
|
||||
align-items: center;
|
||||
padding-bottom: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #0052d9;
|
||||
font-weight: 500;
|
||||
}
|
||||
.t-step--vertical .t-steps-item-sub-dot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
border: 1px solid transparent;
|
||||
color: #c5c5c5;
|
||||
z-index: 2;
|
||||
}
|
||||
.t-step--vertical .t-steps-item-sub-dot-item {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.t-step--vertical .t-steps-item-sub .t-steps-item-sub__content {
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
.t-step--vertical .t-steps-item-sub-status--default {
|
||||
color: #c5c5c5;
|
||||
}
|
||||
.t-step--vertical .t-steps-item-sub-status--default .t-steps-item-sub-dot-item {
|
||||
background-color: #c5c5c5;
|
||||
}
|
||||
.t-step--vertical .t-steps-item-sub-status--finish {
|
||||
color: #000000;
|
||||
}
|
||||
.t-step--vertical .t-steps-item-sub-status--finish .t-steps-item-sub-dot-item {
|
||||
background-color: #0052d9;
|
||||
}
|
||||
.t-step--vertical .t-steps-item-sub-status--process {
|
||||
color: #0052d9;
|
||||
}
|
||||
.t-step--vertical .t-steps-item-sub-status--process .t-steps-item-sub-dot-item {
|
||||
background-color: #0052d9;
|
||||
}
|
||||
.t-step--vertical .t-steps-item-sub-status--error {
|
||||
color: #e34d59;
|
||||
}
|
||||
.t-step--vertical .t-steps-item-sub-status--error .t-steps-item-sub-dot-item {
|
||||
background-color: #e34d59;
|
||||
}
|
||||
.t-step--vertical .t-steps-item .t-steps-item-sub:last-child {
|
||||
padding-bottom: 0rpx;
|
||||
}
|
||||
.t-step--vertical .t-steps-item__content {
|
||||
margin-left: 16rpx;
|
||||
margin-right: 32rpx;
|
||||
flex: 1;
|
||||
}
|
||||
.t-step--vertical .t-steps-item__title {
|
||||
text-align: left;
|
||||
margin-top: 5px;
|
||||
line-height: 28rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
.t-step--vertical .t-steps-item__description {
|
||||
text-align: left;
|
||||
}
|
||||
.t-step--vertical.t-step--default-anchor .t-steps-item--default .t-steps-item__icon-number {
|
||||
border-color: #c5c5c5;
|
||||
color: #c5c5c5;
|
||||
}
|
||||
.t-step--vertical.t-step--default-anchor .t-steps-item--finish .t-steps-item__icon-number {
|
||||
border-color: #0052d9;
|
||||
color: #0052d9;
|
||||
}
|
||||
.t-step--vertical.t-step--default-anchor .t-steps-item--finish .t-steps-item__title {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
.t-step--vertical.t-step--default-anchor .t-steps-item--process .t-steps-item__icon-number {
|
||||
background: #0052d9;
|
||||
color: #fff;
|
||||
border-color: #0052d9;
|
||||
}
|
||||
.t-step--vertical.t-step--default-anchor .t-steps-item--process .t-steps-item__title {
|
||||
color: #0052d9;
|
||||
}
|
||||
.t-step--vertical.t-step--default-anchor .t-steps-item--error .t-steps-item__icon-number {
|
||||
color: #e34d59;
|
||||
border-color: #e34d59;
|
||||
}
|
||||
.t-step--vertical.t-step--default-anchor .t-steps-item--error .t-steps-item__title {
|
||||
color: #e34d59;
|
||||
}
|
||||
.t-step--vertical.t-step--default-anchor.t-step--not-last-child .t-steps-item__inner::after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background: #c5c5c5;
|
||||
transform: translateX(-50%);
|
||||
position: absolute;
|
||||
left: 13px;
|
||||
top: 13px;
|
||||
}
|
||||
.t-step--vertical.t-step--default-anchor.t-step--not-last-child .t-steps-item--finish .t-steps-item__inner:after {
|
||||
background: #0052d9;
|
||||
}
|
||||
.t-step--vertical.t-step--default-anchor.t-step--not-last-child .t-steps-item--default .t-steps-item__inner:after {
|
||||
background: #c5c5c5;
|
||||
}
|
||||
.t-step--vertical.t-step--dot-anchor .t-steps-item__icon-dot {
|
||||
display: block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #0052d9;
|
||||
border-radius: 50%;
|
||||
margin-top: 1px;
|
||||
}
|
||||
.t-step--vertical.t-step--dot-anchor .t-steps-item-sub-dot {
|
||||
width: 12px;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
.t-step--vertical.t-step--dot-anchor .t-steps-item__title {
|
||||
margin-top: 0;
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
.t-step--vertical.t-step--dot-anchor.t-step--not-last-child .t-steps-item__inner::after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: calc(100% - 12px);
|
||||
width: 1px;
|
||||
background: #ddd;
|
||||
transform: translateX(50%);
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 13px;
|
||||
}
|
||||
.t-steps-item__icon-number--large {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
21
components/steps/steps.d.ts
vendored
Normal file
21
components/steps/steps.d.ts
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
export default class Steps extends SuperComponent {
|
||||
relations: RelationsOptions;
|
||||
externalClasses: string[];
|
||||
properties: import("./type").TdStepsProps;
|
||||
controlledProps: {
|
||||
key: string;
|
||||
event: string;
|
||||
}[];
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
};
|
||||
observers: {
|
||||
current(): void;
|
||||
};
|
||||
methods: {
|
||||
updateChildren(): void;
|
||||
handleClick(index: any): void;
|
||||
};
|
||||
}
|
||||
78
components/steps/steps.js
Normal file
78
components/steps/steps.js
Normal file
@@ -0,0 +1,78 @@
|
||||
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 { wxComponent, SuperComponent } from '../common/src/index';
|
||||
import config from '../common/config';
|
||||
import props from './props';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-steps`;
|
||||
let Steps = class Steps extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.relations = {
|
||||
'./step-item': {
|
||||
type: 'descendant',
|
||||
linked(child) {
|
||||
this.updateChildren();
|
||||
const { readonly, layout } = this.data;
|
||||
let isLarge = false;
|
||||
if (!readonly && layout === 'horizontal' && child.data.icon !== 'slot') {
|
||||
isLarge = !!child.data.icon;
|
||||
}
|
||||
child.setData({
|
||||
readonly,
|
||||
isLarge,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
this.externalClasses = [`${prefix}-class`];
|
||||
this.properties = props;
|
||||
this.controlledProps = [
|
||||
{
|
||||
key: 'current',
|
||||
event: 'change',
|
||||
},
|
||||
];
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
};
|
||||
this.observers = {
|
||||
current() {
|
||||
this.updateChildren();
|
||||
},
|
||||
};
|
||||
this.methods = {
|
||||
updateChildren() {
|
||||
const items = this.getRelationNodes('./step-item');
|
||||
const len = items.length;
|
||||
const { current, currentStatus, readonly } = this.data;
|
||||
if (len) {
|
||||
items.forEach((item, index) => {
|
||||
item.updateStatus(current, currentStatus, index, this.data.theme, this.data.layout, items, readonly);
|
||||
});
|
||||
}
|
||||
},
|
||||
handleClick(index) {
|
||||
if (this.data.layout === 'vertical') {
|
||||
return;
|
||||
}
|
||||
if (!this.data.readonly) {
|
||||
const preIndex = this.data.current;
|
||||
this._trigger('change', {
|
||||
previous: preIndex,
|
||||
current: index,
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
Steps = __decorate([
|
||||
wxComponent()
|
||||
], Steps);
|
||||
export default Steps;
|
||||
6
components/steps/steps.json
Normal file
6
components/steps/steps.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-step": "./step-item"
|
||||
}
|
||||
}
|
||||
5
components/steps/steps.wxml
Normal file
5
components/steps/steps.wxml
Normal file
@@ -0,0 +1,5 @@
|
||||
<view
|
||||
class="{{classPrefix}} {{classPrefix}}--{{layout}} {{classPrefix}}--{{type}}-anchor {{readonly ? classPrefix + '--readonly' : ''}} {{prefix}}-class"
|
||||
>
|
||||
<slot />
|
||||
</view>
|
||||
40
components/steps/steps.wxss
Normal file
40
components/steps/steps.wxss
Normal file
@@ -0,0 +1,40 @@
|
||||
.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);
|
||||
}
|
||||
:host {
|
||||
display: flex;
|
||||
}
|
||||
.t-step--vertical {
|
||||
padding-right: 32rpx;
|
||||
}
|
||||
.t-steps {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.t-steps--vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
63
components/steps/type.d.ts
vendored
Normal file
63
components/steps/type.d.ts
vendored
Normal file
@@ -0,0 +1,63 @@
|
||||
export interface TdStepsProps {
|
||||
current?: {
|
||||
type: StringConstructor;
|
||||
optionalTypes: Array<NumberConstructor>;
|
||||
value?: string | number;
|
||||
};
|
||||
defaultCurrent?: {
|
||||
type: StringConstructor;
|
||||
optionalTypes: Array<NumberConstructor>;
|
||||
value?: string | number;
|
||||
};
|
||||
currentStatus?: {
|
||||
type: StringConstructor;
|
||||
value?: 'default' | 'process' | 'finish' | 'error';
|
||||
};
|
||||
externalClasses?: {
|
||||
type: ArrayConstructor;
|
||||
value?: ['t-class'];
|
||||
};
|
||||
layout?: {
|
||||
type: StringConstructor;
|
||||
value?: 'horizontal' | 'vertical';
|
||||
};
|
||||
readonly?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
theme?: {
|
||||
type: StringConstructor;
|
||||
value?: 'default' | 'dot';
|
||||
};
|
||||
}
|
||||
export interface TdStepItemProps {
|
||||
content?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
externalClasses?: {
|
||||
type: ArrayConstructor;
|
||||
value?: ['t-class', 't-class-content', 't-class-title', 't-class-description', 't-class-extra'];
|
||||
};
|
||||
icon?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
status?: {
|
||||
type: StringConstructor;
|
||||
value?: StepStatus;
|
||||
};
|
||||
subStepItems?: {
|
||||
type: ArrayConstructor;
|
||||
value?: SubStepItem[];
|
||||
};
|
||||
title?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
}
|
||||
export declare type StepStatus = 'default' | 'process' | 'finish' | 'error';
|
||||
export interface SubStepItem {
|
||||
status: StepStatus;
|
||||
title: string;
|
||||
}
|
||||
1
components/steps/type.js
Normal file
1
components/steps/type.js
Normal file
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user