first commit
This commit is contained in:
lingxiao865
@@ -0,0 +1,4 @@
|
||||
export function getAriaLabel(index, title, content) {
|
||||
return `第${index + 1}步，${title}，${content}`;
|
||||
}
|
||||
|
||||
36
uni_modules/tdesign-uniapp/components/step-item/props.ts
Normal file
36
uni_modules/tdesign-uniapp/components/step-item/props.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
|
||||
* */
|
||||
|
||||
import type { TdStepItemProps } from './type';
|
||||
export default {
|
||||
/** 步骤描述 */
|
||||
content: {
|
||||
type: String,
|
||||
default: '' as TdStepItemProps['content'],
|
||||
},
|
||||
/** 步骤条自定义内容 */
|
||||
extra: {
|
||||
type: String,
|
||||
},
|
||||
/** 图标。传入 slot 代表使用插槽，其他字符串代表使用内置图标 */
|
||||
icon: {
|
||||
type: String,
|
||||
},
|
||||
/** 当前步骤的状态：默认状态（未开始）、进行中状态、完成状态、错误状态 */
|
||||
status: {
|
||||
type: String,
|
||||
default: 'default' as TdStepItemProps['status'],
|
||||
validator(val: TdStepItemProps['status']): boolean {
|
||||
if (!val) return true;
|
||||
return ['default', 'process', 'finish', 'error'].includes(val);
|
||||
},
|
||||
},
|
||||
/** 标题 */
|
||||
title: {
|
||||
type: String,
|
||||
default: '' as TdStepItemProps['title'],
|
||||
},
|
||||
};
|
||||
182
uni_modules/tdesign-uniapp/components/step-item/step-item.css
Normal file
182
uni_modules/tdesign-uniapp/components/step-item/step-item.css
Normal file
@@ -0,0 +1,182 @@
|
||||
.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--vertical {
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
.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: var(--td-step-item-circle-text-font, var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
|
||||
}
|
||||
.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;
|
||||
font: var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.t-steps-item__title + .t-steps-item__description:not(:empty) {
|
||||
margin-top: 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))));
|
||||
font: var(--td-font-body-small, 24rpx / 40rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
|
||||
}
|
||||
.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;
|
||||
}
|
||||
175
uni_modules/tdesign-uniapp/components/step-item/step-item.vue
Normal file
175
uni_modules/tdesign-uniapp/components/step-item/step-item.vue
Normal file
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<view
|
||||
:style="tools._style([customStyle])"
|
||||
:class="tools.cls(classPrefix, [layout, ['readonly', readonly]]) + ' ' + tClass"
|
||||
:aria-role="ariaRole || readonly ? 'option' : 'button'"
|
||||
:aria-label="ariaLabel || getAriaLabel(index, title, content)"
|
||||
:aria-current="curStatus == 'process' ? 'step' : ''"
|
||||
@click="onTap"
|
||||
>
|
||||
<view
|
||||
:class="tools.cls(classPrefix + '__anchor', [layout])"
|
||||
:aria-hidden="true"
|
||||
>
|
||||
<view
|
||||
v-if="isDot"
|
||||
:class="tools.cls(classPrefix + '__dot', [curStatus])"
|
||||
/>
|
||||
<view
|
||||
v-else-if="icon"
|
||||
:class="tools.cls(classPrefix + '__icon', [curStatus])"
|
||||
>
|
||||
<slot
|
||||
v-if="icon == 'slot'"
|
||||
name="icon"
|
||||
/>
|
||||
<t-icon
|
||||
v-else
|
||||
:name="icon"
|
||||
size="44rpx"
|
||||
/>
|
||||
</view>
|
||||
<view
|
||||
v-else
|
||||
:class="tools.cls(classPrefix + '__circle', [curStatus])"
|
||||
>
|
||||
<t-icon
|
||||
v-if="curStatus == 'finish'"
|
||||
name="check"
|
||||
/>
|
||||
<t-icon
|
||||
v-else-if="curStatus == 'error'"
|
||||
name="close"
|
||||
/>
|
||||
<block v-else>
|
||||
{{ index + 1 }}
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
:class="tools.cls(classPrefix + '__content', [layout, ['last', isLastChild]]) + ' ' + tClassContent"
|
||||
:aria-hidden="true"
|
||||
>
|
||||
<slot />
|
||||
<view :class="tools.cls(classPrefix + '__title', [curStatus, layout]) + ' ' + tClassContent">
|
||||
<block v-if="title">
|
||||
{{ title }}
|
||||
</block>
|
||||
<slot name="title" />
|
||||
<slot
|
||||
v-if="layout === 'vertical'"
|
||||
name="title-right"
|
||||
/>
|
||||
</view>
|
||||
<view :class="tools.cls(classPrefix + '__description', [layout]) + ' ' + tClassDescription">
|
||||
<block v-if="content">
|
||||
{{ content }}
|
||||
</block>
|
||||
<slot name="content" />
|
||||
</view>
|
||||
<view :class="tools.cls(classPrefix + '__extra', [layout]) + ' ' + tClassExtra">
|
||||
<slot name="extra" />
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="!isLastChild"
|
||||
:class="tools.cls(classPrefix + '__line', [curStatus, layout, theme, sequence])"
|
||||
:aria-hidden="true"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import TIcon from '../icon/icon';
|
||||
import { uniComponent } from '../common/src/index';
|
||||
import { prefix } from '../common/config';
|
||||
import props from './props';
|
||||
import tools from '../common/utils.wxs';
|
||||
import { getAriaLabel } from './computed.js';
|
||||
import { ChildrenMixin, RELATION_MAP } from '../common/relation';
|
||||
|
||||
|
||||
const name = `${prefix}-steps-item`;
|
||||
|
||||
|
||||
export default uniComponent({
|
||||
name,
|
||||
options: {
|
||||
styleIsolation: 'shared',
|
||||
virtualHost: true,
|
||||
},
|
||||
externalClasses: [
|
||||
`${prefix}-class`,
|
||||
`${prefix}-class-content`,
|
||||
`${prefix}-class-title`,
|
||||
`${prefix}-class-description`,
|
||||
`${prefix}-class-extra`,
|
||||
],
|
||||
mixins: [ChildrenMixin(RELATION_MAP.StepItem, {
|
||||
indexKey: 'tIndex',
|
||||
})],
|
||||
props: {
|
||||
...props,
|
||||
},
|
||||
components: {
|
||||
TIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
classPrefix: name,
|
||||
prefix,
|
||||
index: 0,
|
||||
isDot: false,
|
||||
curStatus: '',
|
||||
layout: 'vertical',
|
||||
isLastChild: false,
|
||||
sequence: 'positive',
|
||||
tools,
|
||||
|
||||
readonly: false,
|
||||
theme: '',
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
status(value) {
|
||||
const { curStatus } = this;
|
||||
|
||||
if (curStatus === '' || value === curStatus) return;
|
||||
|
||||
this.curStatus = value;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
getAriaLabel,
|
||||
updateStatus({ current, currentStatus, index, theme, layout, items, sequence }) {
|
||||
let curStatus = this.status;
|
||||
|
||||
if (curStatus === 'default') {
|
||||
if (index < Number(current)) {
|
||||
curStatus = 'finish';
|
||||
} else if (index === Number(current)) {
|
||||
curStatus = currentStatus;
|
||||
}
|
||||
}
|
||||
|
||||
this.curStatus = curStatus;
|
||||
this.index = index;
|
||||
this.layout = layout;
|
||||
this.theme = theme;
|
||||
this.sequence = sequence;
|
||||
this.isDot = theme === 'dot';
|
||||
this.isLastChild = index === (sequence === 'positive' ? items.length - 1 : 0);
|
||||
},
|
||||
|
||||
onTap() {
|
||||
this[RELATION_MAP.StepItem].handleClick(this.index);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
@import './step-item.css';
|
||||
</style>
|
||||
33
uni_modules/tdesign-uniapp/components/step-item/type.ts
Normal file
33
uni_modules/tdesign-uniapp/components/step-item/type.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
|
||||
* */
|
||||
|
||||
export interface TdStepItemProps {
|
||||
/**
|
||||
* 步骤描述
|
||||
* @default ''
|
||||
*/
|
||||
content?: string;
|
||||
/**
|
||||
* 步骤条自定义内容
|
||||
*/
|
||||
extra?: string;
|
||||
/**
|
||||
* 图标。传入 slot 代表使用插槽，其他字符串代表使用内置图标
|
||||
*/
|
||||
icon?: string;
|
||||
/**
|
||||
* 当前步骤的状态：默认状态（未开始）、进行中状态、完成状态、错误状态
|
||||
* @default default
|
||||
*/
|
||||
status?: StepStatus;
|
||||
/**
|
||||
* 标题
|
||||
* @default ''
|
||||
*/
|
||||
title?: string;
|
||||
}
|
||||
|
||||
export type StepStatus = 'default' | 'process' | 'finish' | 'error';
|
||||
Reference in New Issue
Block a user