New Huajishe Check ChaoXing
This commit is contained in:
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/step-item/props.d.ts
vendored
Normal file
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/step-item/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdStepItemProps } from './type';
|
||||
declare const props: TdStepItemProps;
|
||||
export default props;
|
||||
@@ -0,0 +1,18 @@
|
||||
const props = {
|
||||
content: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
},
|
||||
status: {
|
||||
type: String,
|
||||
value: 'default',
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
34
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/step-item/step-item.d.ts
vendored
Normal file
34
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/step-item/step-item.d.ts
vendored
Normal file
@@ -0,0 +1,34 @@
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
export default class StepItem extends SuperComponent {
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
relations: RelationsOptions;
|
||||
externalClasses: string[];
|
||||
properties: import("./type").TdStepItemProps;
|
||||
data: {
|
||||
classPrefix: string;
|
||||
prefix: string;
|
||||
index: number;
|
||||
isDot: boolean;
|
||||
curStatus: string;
|
||||
layout: string;
|
||||
isLastChild: boolean;
|
||||
sequence: string;
|
||||
};
|
||||
observers: {
|
||||
status(value: any): void;
|
||||
};
|
||||
methods: {
|
||||
updateStatus({ current, currentStatus, index, theme, layout, items, sequence }: {
|
||||
current: any;
|
||||
currentStatus: any;
|
||||
index: any;
|
||||
theme: any;
|
||||
layout: any;
|
||||
items: any;
|
||||
sequence: any;
|
||||
}): void;
|
||||
onTap(): void;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
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-item`;
|
||||
let StepItem = class StepItem extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.options = {
|
||||
multipleSlots: true,
|
||||
};
|
||||
this.relations = {
|
||||
'../steps/steps': {
|
||||
type: 'parent',
|
||||
},
|
||||
};
|
||||
this.externalClasses = [
|
||||
`${prefix}-class`,
|
||||
`${prefix}-class-content`,
|
||||
`${prefix}-class-title`,
|
||||
`${prefix}-class-description`,
|
||||
`${prefix}-class-extra`,
|
||||
];
|
||||
this.properties = props;
|
||||
this.data = {
|
||||
classPrefix: name,
|
||||
prefix,
|
||||
index: 0,
|
||||
isDot: false,
|
||||
curStatus: '',
|
||||
layout: 'vertical',
|
||||
isLastChild: false,
|
||||
sequence: 'positive',
|
||||
};
|
||||
this.observers = {
|
||||
status(value) {
|
||||
const { curStatus } = this.data;
|
||||
if (curStatus === '' || value === curStatus)
|
||||
return;
|
||||
this.setData({ curStatus: value });
|
||||
},
|
||||
};
|
||||
this.methods = {
|
||||
updateStatus({ current, currentStatus, index, theme, layout, items, sequence }) {
|
||||
let curStatus = this.data.status;
|
||||
if (curStatus === 'default') {
|
||||
if (index < Number(current)) {
|
||||
curStatus = 'finish';
|
||||
}
|
||||
else if (index === Number(current)) {
|
||||
curStatus = currentStatus;
|
||||
}
|
||||
}
|
||||
this.setData({
|
||||
curStatus,
|
||||
index,
|
||||
isDot: theme === 'dot',
|
||||
layout,
|
||||
theme,
|
||||
sequence,
|
||||
isLastChild: index === (sequence === 'positive' ? items.length - 1 : 0),
|
||||
});
|
||||
},
|
||||
onTap() {
|
||||
this.$parent.handleClick(this.data.index);
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
StepItem = __decorate([
|
||||
wxComponent()
|
||||
], StepItem);
|
||||
export default StepItem;
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {
|
||||
"t-icon": "../icon/icon"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
<wxs src="./step-item.wxs" module="t" />
|
||||
|
||||
<view
|
||||
style="{{_._style([style, customStyle])}}"
|
||||
class="{{_.cls(classPrefix, [layout, ['readonly', readonly]])}} class {{prefix}}-class"
|
||||
bind:tap="onTap"
|
||||
aria-role="{{ariaRole || readonly ? 'option' : 'button'}}"
|
||||
aria-label="{{ariaLabel || t.getAriaLabel(index, title, content)}}"
|
||||
aria-current="{{curStatus == 'process'? 'step': ''}}"
|
||||
>
|
||||
<!-- icon -->
|
||||
<view class="{{_.cls(classPrefix + '__anchor', [layout])}}" aria-hidden="true">
|
||||
<view wx:if="{{isDot}}" class="{{_.cls(classPrefix + '__dot', [curStatus])}}" />
|
||||
<view wx:elif="{{icon}}" class="{{_.cls(classPrefix + '__icon', [curStatus])}}">
|
||||
<slot wx:if="{{icon == 'slot'}}" name="icon" />
|
||||
<t-icon wx:else name="{{icon}}" size="44rpx" />
|
||||
</view>
|
||||
<view wx:else class="{{_.cls(classPrefix + '__circle', [curStatus])}}">
|
||||
<t-icon wx:if="{{curStatus == 'finish'}}" name="check" />
|
||||
<t-icon wx:elif="{{curStatus == 'error'}}" name="close" />
|
||||
<block wx:else>{{index + 1}}</block>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- content -->
|
||||
<view
|
||||
class="{{_.cls(classPrefix + '__content', [layout, ['last', isLastChild]])}} {{prefix}}-class-content"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<slot />
|
||||
<view class="{{_.cls(classPrefix + '__title', [curStatus, layout])}} {{prefix}}-class-title">
|
||||
{{ title }}
|
||||
<slot name="title" />
|
||||
<slot wx:if="{{layout === 'vertical'}}" name="title-right" />
|
||||
</view>
|
||||
<view class="{{_.cls(classPrefix + '__description', [layout])}} {{prefix}}-class-description">
|
||||
{{ content }}
|
||||
<slot name="content" />
|
||||
</view>
|
||||
<view class="{{_.cls(classPrefix + '__extra', [layout])}} {{prefix}}-class-extra">
|
||||
<slot name="extra" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
wx:if="{{!isLastChild}}"
|
||||
class="{{_.cls(classPrefix + '__line', [curStatus, layout, theme, sequence])}}"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</view>
|
||||
@@ -0,0 +1,7 @@
|
||||
function getAriaLabel(index, title, content) {
|
||||
return '第' + (index + 1) + '步,' + title + ',' + content;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
getAriaLabel: getAriaLabel,
|
||||
};
|
||||
@@ -0,0 +1,206 @@
|
||||
.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;
|
||||
display: flex;
|
||||
}
|
||||
.t-steps-item__circle--default {
|
||||
color: var(--td-step-item-default-circle-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
|
||||
background-color: var(--td-step-item-default-circle-bg, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
|
||||
}
|
||||
.t-steps-item__title--default {
|
||||
color: var(--td-step-item-default-title-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
|
||||
}
|
||||
.t-steps-item__icon--default {
|
||||
color: var(--td-step-item-default-icon-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
|
||||
}
|
||||
.t-steps-item__dot--default {
|
||||
border-color: var(--td-step-item-default-dot-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
|
||||
background-color: var(--td-step-item-default-dot-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
|
||||
}
|
||||
.t-steps-item__circle--process {
|
||||
color: var(--td-step-item-process-circle-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
|
||||
background-color: var(--td-step-item-process-circle-bg, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
}
|
||||
.t-steps-item__title--process {
|
||||
color: var(--td-step-item-process-title-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
}
|
||||
.t-steps-item__icon--process {
|
||||
color: var(--td-step-item-process-icon-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
}
|
||||
.t-steps-item__dot--process {
|
||||
border-color: var(--td-step-item-process-dot-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
background-color: var(--td-step-item-process-dot-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
}
|
||||
.t-steps-item__circle--finish {
|
||||
color: var(--td-step-item-finish-circle-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
background-color: var(--td-step-item-finish-circle-bg, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
|
||||
}
|
||||
.t-steps-item__title--finish {
|
||||
color: var(--td-step-item-finish-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
|
||||
}
|
||||
.t-steps-item__icon--finish {
|
||||
color: var(--td-step-item-finish-icon-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
}
|
||||
.t-steps-item__dot--finish {
|
||||
border-color: var(--td-step-item-finish-dot-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
background-color: var(--td-step-item-finish-dot-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
}
|
||||
.t-steps-item__circle--error {
|
||||
color: var(--td-step-item-error-circle-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||
background-color: var(--td-step-item-error-circle-bg, var(--td-error-color-1, #fff0ed));
|
||||
}
|
||||
.t-steps-item__title--error {
|
||||
color: var(--td-step-item-error-title-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||
}
|
||||
.t-steps-item__icon--error {
|
||||
color: var(--td-step-item-error-icon-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||
}
|
||||
.t-steps-item__dot--error {
|
||||
border-color: var(--td-step-item-error-dot-border-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||
background-color: var(--td-step-item-error-dot-border-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||
}
|
||||
.t-steps-item--horizontal {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.t-steps-item__anchor {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.t-steps-item__anchor--vertical {
|
||||
width: var(--td-step-item-circle-size, 44rpx);
|
||||
height: var(--td-step-item-circle-size, 44rpx);
|
||||
}
|
||||
.t-steps-item__circle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: var(--td-step-item-circle-size, 44rpx);
|
||||
height: var(--td-step-item-circle-size, 44rpx);
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
font-size: var(--td-step-item-circle-font-size, 28rpx);
|
||||
}
|
||||
.t-steps-item__icon {
|
||||
z-index: 1;
|
||||
vertical-align: top;
|
||||
font-size: var(--td-font-size-base, 28rpx);
|
||||
position: relative;
|
||||
}
|
||||
.t-steps-item__dot {
|
||||
width: var(--td-step-item-dot-size, 16rpx);
|
||||
height: var(--td-step-item-dot-size, 16rpx);
|
||||
border-radius: 50%;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.t-steps-item__content {
|
||||
text-align: center;
|
||||
}
|
||||
.t-steps-item__content--horizontal {
|
||||
max-width: 80px;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
.t-steps-item__content--vertical {
|
||||
margin-left: 16rpx;
|
||||
flex: 1;
|
||||
padding-bottom: 32rpx;
|
||||
}
|
||||
.t-steps-item__content--vertical.t-steps-item__content--last {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.t-steps-item__title {
|
||||
position: relative;
|
||||
line-height: var(--td-step-item-circle-size, 44rpx);
|
||||
font-size: var(--td-font-size-base, 28rpx);
|
||||
}
|
||||
.t-steps-item__title--process {
|
||||
font-weight: 600;
|
||||
}
|
||||
.t-steps-item__title--vertical {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.t-steps-item__description {
|
||||
color: var(--td-step-item-description-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
|
||||
line-height: 40rpx;
|
||||
font-size: var(--td-font-size-s, 24rpx);
|
||||
}
|
||||
.t-steps-item__description--vertical {
|
||||
text-align: left;
|
||||
}
|
||||
.t-steps-item__extra:not(:empty) {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
.t-steps-item__line {
|
||||
background-color: var(--td-step-item-line-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
.t-steps-item__line--horizontal {
|
||||
height: 1px;
|
||||
transform: translateY(-50%);
|
||||
width: calc(100% - 32rpx - var(--td-step-item-circle-size, 44rpx));
|
||||
top: calc(var(--td-step-item-circle-size, 44rpx) / 2 + 1px);
|
||||
left: calc(50% + var(--td-step-item-circle-size, 44rpx) / 2 + 16rpx);
|
||||
}
|
||||
.t-steps-item__line--horizontal.t-steps-item__line--dot {
|
||||
top: calc(var(--td-step-item-dot-size, 16rpx) / 2);
|
||||
}
|
||||
.t-steps-item__line--finish,
|
||||
.t-steps-item__line--reverse.t-steps-item__line--process {
|
||||
background-color: var(--td-step-item-finish-line-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
}
|
||||
.t-steps-item__line--vertical {
|
||||
height: calc(100% - 32rpx - var(--td-step-item-circle-size, 44rpx));
|
||||
width: 1px;
|
||||
transform: translateX(-50%);
|
||||
left: calc(var(--td-step-item-circle-size, 44rpx) / 2);
|
||||
top: calc(var(--td-step-item-circle-size, 44rpx) + 16rpx);
|
||||
}
|
||||
.t-steps-item__line--vertical.t-steps-item__line--dot {
|
||||
top: var(--td-step-item-circle-size, 44rpx);
|
||||
height: calc(100% - var(--td-step-item-circle-size, 44rpx));
|
||||
}
|
||||
:host {
|
||||
flex: 1;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
align-self: flex-start;
|
||||
width: inherit;
|
||||
}
|
||||
19
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/step-item/type.d.ts
vendored
Normal file
19
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/step-item/type.d.ts
vendored
Normal file
@@ -0,0 +1,19 @@
|
||||
export interface TdStepItemProps {
|
||||
content?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
icon?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
status?: {
|
||||
type: StringConstructor;
|
||||
value?: StepStatus;
|
||||
};
|
||||
title?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
}
|
||||
export declare type StepStatus = 'default' | 'process' | 'finish' | 'error';
|
||||
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user