完成steps组件开发
parent
a3ed050b70
commit
6ab3982d1d
|
|
@ -9,7 +9,13 @@ import '../icon/index.js'
|
|||
|
||||
class Steps extends Component {
|
||||
static props = {
|
||||
active: 1,
|
||||
active: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
observer() {
|
||||
this.$updateStepStatus()
|
||||
}
|
||||
},
|
||||
vertical: false
|
||||
}
|
||||
|
||||
|
|
@ -26,94 +32,165 @@ class Steps extends Component {
|
|||
`
|
||||
]
|
||||
|
||||
mounted() {
|
||||
$updateStepStatus() {
|
||||
;[...this.children].forEach((it, i) => {
|
||||
if (it.tagName === 'WC-STEP') {
|
||||
it.index = i + 1
|
||||
it.status = it.index <= this.active ? 2 : i === this.active ? 1 : 0
|
||||
it.vertical = this.vertical
|
||||
} else {
|
||||
it.remove()
|
||||
it.index = i + 1
|
||||
it.status = it.index <= this.active ? 2 : i === this.active ? 1 : 0
|
||||
it.vertical = this.vertical
|
||||
if (i === 0) {
|
||||
it.setAttribute('first', '')
|
||||
} else if (i === this.children.length - 1) {
|
||||
it.setAttribute('last', '')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.$updateStepStatus()
|
||||
}
|
||||
}
|
||||
|
||||
class Step extends Component {
|
||||
static props = {
|
||||
title: '',
|
||||
description: '',
|
||||
icon: { type: String, default: null },
|
||||
index: { type: Number, default: 1, attribute: false },
|
||||
status: { type: Number, default: 0, attribute: false },
|
||||
vertical: false
|
||||
}
|
||||
|
||||
static styles = [
|
||||
css`
|
||||
:host {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
static styles = css`
|
||||
:host {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
color: var(--color-dark-1);
|
||||
user-select: none;
|
||||
|
||||
&[status='2'] {
|
||||
color: var(--color-teal-1);
|
||||
|
||||
.num {
|
||||
border-color: var(--color-teal-1);
|
||||
}
|
||||
}
|
||||
&[status='0'] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 12px;
|
||||
width: calc(50% - 24px);
|
||||
height: 1px;
|
||||
background: var(--color-grey-1);
|
||||
content: '';
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: unset;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: 1px solid var(--color-grey-1);
|
||||
border-radius: 50%;
|
||||
--size: 14px;
|
||||
|
||||
&.custom {
|
||||
border: 0;
|
||||
--size: 26px;
|
||||
}
|
||||
}
|
||||
.group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.title {
|
||||
line-height: 2;
|
||||
}
|
||||
.description {
|
||||
line-height: 1.5;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
:host([vertical]) {
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px;
|
||||
color: var(--color-dark-1);
|
||||
user-select: none;
|
||||
|
||||
&[status='2'] {
|
||||
color: var(--color-teal-1);
|
||||
|
||||
.num {
|
||||
border-color: var(--color-teal-1);
|
||||
}
|
||||
}
|
||||
&[status='0'] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
flex-direction: row;
|
||||
}
|
||||
.header {
|
||||
width: 26px;
|
||||
min-height: 64px;
|
||||
|
||||
:host([vertical]) {
|
||||
.container {
|
||||
flex-direction: row;
|
||||
&::before,
|
||||
&::after {
|
||||
top: 0;
|
||||
left: 12px;
|
||||
width: 1px;
|
||||
height: calc(50% - 16px);
|
||||
}
|
||||
.group {
|
||||
align-items: flex-start;
|
||||
margin-left: 12px;
|
||||
&::after {
|
||||
top: unset;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid var(--color-grey-1);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
align-items: flex-start;
|
||||
margin-left: 12px;
|
||||
}
|
||||
.title {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
:host([first]) {
|
||||
.header:before {
|
||||
display: none;
|
||||
}
|
||||
.description {
|
||||
line-height: 1.5;
|
||||
font-size: 12px;
|
||||
}
|
||||
:host([last]) {
|
||||
.header:after {
|
||||
display: none;
|
||||
}
|
||||
`
|
||||
]
|
||||
}
|
||||
`
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<label class="container" status=${this.status}>
|
||||
<span class="num">${this.index}</span>
|
||||
<header class="header">
|
||||
<span class=${classMap({ num: true, custom: this.icon })}>
|
||||
${this.icon
|
||||
? html`<wc-icon name=${this.icon}></wc-icon>`
|
||||
: this.status === 2
|
||||
? html`<wc-icon name="get"></wc-icon>`
|
||||
: this.index}
|
||||
</span>
|
||||
</header>
|
||||
<div class="group">
|
||||
<strong class="title">${this.title}</strong>
|
||||
<cite class="description">${this.description}</cite>
|
||||
|
|
|
|||
Loading…
Reference in New Issue