Skip to content

E
Element
Commit 5ce0e228 authored by Black Wayne's avatar Black Wayne Committed by 杨奕
Browse files
Options

Steps: add chalk theme (#7274) 

* Steps: add chalk theme

* Update steps.md

* Update steps.md

* Update steps.md
parent d34e38a9
Hide whitespace changes
Inline Side-by-side
Showing with 404 additions and 213 deletions
examples/docs/en-US/steps.md
View file @ 5ce0e228
......@@ -25,7 +25,7 @@ Simple step bar.
:::demo Set `active` attribute with `Number` type, which indicates the index of steps and starts from 0. You can set `space` attribute when the width of the step needs to be fixed which accepts `Boolean` type. The unit of the `space` attribute is `px`. If not set, it is responsive. Setting the `finish-status` attribute can change the state of the steps that have been completed.
```html
<el-steps :space="100" :active="active" finish-status="success">
<el-steps :active="active" finish-status="success">
<el-step title="Step 1"></el-step>
<el-step title="Step 2"></el-step>
<el-step title="Step 3"></el-step>
......@@ -58,7 +58,7 @@ Shows the status of the step for each step.
:::demo Use `title` attribute to set the name of the step, or override the attribute by using a named `slot`. We have listed all the slot names for you at the end of this page.
```html
<el-steps :space="100" :active="1" finish-status="success">
<el-steps :space="200" :active="1" finish-status="success">
<el-step title="Done"></el-step>
<el-step title="Processing"></el-step>
<el-step title="Step 3"></el-step>
......@@ -66,13 +66,28 @@ Shows the status of the step for each step.
```
:::
### Center
Title and desription can be centered.
:::demo
```html
<el-steps :active="2" align-center>
<el-step title="Step 1" description="Some description"></el-step>
<el-step title="Step 2" description="Some description"></el-step>
<el-step title="Step 3" description="Some description"></el-step>
<el-step title="Step 4" description="Some description"></el-step>
</el-steps>
```
:::
### Step bar with description
There is description for each step.
:::demo
```html
<el-steps :space="200" :active="1">
<el-steps :active="1">
<el-step title="Step 1" description="Some description"></el-step>
<el-step title="Step 2" description="Some description"></el-step>
<el-step title="Step 3" description="Some description"></el-step>
......@@ -87,10 +102,10 @@ A variety of custom icons can be used in the step bar.
:::demo The icon is set by the `icon` property. The types of icons can be found in the document for the Icon component. In addition, you can customize the icon through a named `slot`.
```html
<el-steps :space="100" :active="1">
<el-step title="Step 1" icon="edit"></el-step>
<el-step title="Step 2" icon="upload"></el-step>
<el-step title="Step 3" icon="picture"></el-step>
<el-steps :active="1">
<el-step title="Step 1" icon="el-icon-edit"></el-step>
<el-step title="Step 2" icon="el-icon-upload"></el-step>
<el-step title="Step 3" icon="el-icon-picture"></el-step>
</el-steps>
```
:::
......@@ -102,10 +117,32 @@ Vertical step bars.
:::demo You only need to set the `direction` attribute to` vertical` in the `el-steps` element.
```html
<el-steps :space="100" direction="vertical" :active="1">
<el-step title="Step 1"></el-step>
<el-step title="Step 2"></el-step>
<el-step title="Step 3"></el-step>
<div style="height: 300px;">
<el-steps direction="vertical" :active="1">
<el-step title="Step 1"></el-step>
<el-step title="Step 2"></el-step>
<el-step title="Step 3"></el-step>
</el-steps>
</div>
```
:::
### Simple step bar
Simple step bars, where `align-center`, `description`, `direction` and `space` will be ignored.
:::demo
```html
<el-steps :space="200" active="1" simple>
<el-step title="Step 1" icon="el-icon-edit"></el-step>
<el-step title="Step 2" icon="el-icon-upload"></el-step>
<el-step title="Step 3" icon="el-icon-picture"></el-step>
</el-steps>
<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
<el-step title="Step 1" ></el-step>
<el-step title="Step 2" ></el-step>
<el-step title="Step 3" ></el-step>
</el-steps>
```
:::
......@@ -114,21 +151,21 @@ Vertical step bars.
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| space | the spacing of each step, will be responsive if omitted. Support percentage. | Number,String | — | — |
| space | the spacing of each step, will be responsive if omitted. Supports percentage. | number / string | — | — |
| direction | display direction | string | vertical/horizontal | horizontal |
| active | current activation step | number | — | 0 |
| process-status | status of current step | string | wait/process/finish/error/success | process |
| finish-status | status of end step | string | wait/process/finish/error/success | finish |
| align-center | whether step description is centered | boolean | — | false |
| center | center whole `Steps` component | boolean | - | false |
| process-status | status of current step | string | wait / process / finish / error / success | process |
| finish-status | status of end step | string | wait / process / finish / error / success | finish |
| align-center | center title and description | boolean | — | false |
| simple | whether to apply simple theme | boolean | - | false |
### Step Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| title | step title | string | — | — |
| description | step description | string | — | — |
| icon | step icon | icons provided by Element Icon. Can be overwritten by a named slot if you want to use custom icons | string | — |
| status | current status. It will be automatically set by Steps if not configured. | wait/process/finish/error/success | - |
| icon | step icon | step icon's class name. Icons can be passed via named slot as well | string | — |
| status | current status. It will be automatically set by Steps if not configured. | wait / process / finish / error / success | - |
### Step Slot
| Name | Description |
......
examples/docs/zh-CN/steps.md
View file @ 5ce0e228
......@@ -23,7 +23,7 @@
:::demo 设置`active`属性，接受一个`Number`，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置`space`属性即可，它接受`Boolean`，单位为`px`，如果不设置，则为自适应。设置`finish-status`属性可以改变已经完成的步骤的状态。
```html
<el-steps :space="100" :active="active" finish-status="success">
<el-steps :active="active" finish-status="success">
<el-step title="步骤 1"></el-step>
<el-step title="步骤 2"></el-step>
<el-step title="步骤 3"></el-step>
......@@ -55,7 +55,7 @@
:::demo 也可以使用`title`具名分发，可以用`slot`的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。
```html
<el-steps :space="100" :active="1" finish-status="success">
<el-steps :space="200" :active="1" finish-status="success">
<el-step title="已完成"></el-step>
<el-step title="进行中"></el-step>
<el-step title="步骤 3"></el-step>
......@@ -69,10 +69,25 @@
:::demo
```html
<el-steps :space="200" :active="1">
<el-steps :active="1">
<el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
<el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>
<el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
<el-step title="步骤 3" description="这段就没那么长了"></el-step>
</el-steps>
```
:::
### 居中的步骤条
标题和描述都将居中。
:::demo
```html
<el-steps :active="2" align-center>
<el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>
<el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>
<el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>
<el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>
</el-steps>
```
:::
......@@ -82,10 +97,11 @@
:::demo 通过`icon`属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过具名`slot`来使用自定义的图标。
```html
<el-steps :space="100" :active="1">
<el-step title="步骤 1" icon="edit"></el-step>
<el-step title="步骤 2" icon="upload"></el-step>
<el-step title="步骤 3" icon="picture"></el-step>
<el-steps :active="1">
<el-step title="步骤 1" icon="el-icon-edit"></el-step>
<el-step title="步骤 2" icon="el-icon-upload"></el-step>
<el-step title="步骤 3" icon="el-icon-picture"></el-step>
</el-steps>
```
:::
......@@ -96,10 +112,32 @@
:::demo 只需要在`el-steps`元素中设置`direction`属性为`vertical`即可。
```html
<el-steps :space="100" direction="vertical" :active="1">
<el-step title="步骤 1"></el-step>
<el-step title="步骤 2"></el-step>
<el-step title="步骤 3"></el-step>
<div style="height: 300px;">
<el-steps direction="vertical" :active="1">
<el-step title="步骤 1"></el-step>
<el-step title="步骤 2"></el-step>
<el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
</el-steps>
</div>
```
:::
### 简洁风格的步骤条
设置 `simple` 可应用简洁风格，该条件下 `align-center` / `description` / `direction` / `space` 都将失效。
:::demo
```html
<el-steps :active="1" simple>
<el-step title="步骤 1" icon="el-icon-edit"></el-step>
<el-step title="步骤 2" icon="el-icon-upload"></el-step>
<el-step title="步骤 3" icon="el-icon-picture"></el-step>
</el-steps>
<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
<el-step title="步骤 1" ></el-step>
<el-step title="步骤 2" ></el-step>
<el-step title="步骤 3" ></el-step>
</el-steps>
```
:::
......@@ -108,21 +146,21 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| space | 每个 step 的间距，不填写将自适应间距。支持百分比。 | Number,String | — | — |
| space | 每个 step 的间距，不填写将自适应间距。支持百分比。 | number / string | — | — |
| direction | 显示方向 | string | vertical/horizontal | horizontal |
| active | 设置当前激活步骤 | number | — | 0 |
| process-status | 设置当前步骤的状态 | string | wait/process/finish/error/success | process |
| finish-status | 设置结束步骤的状态 | string | wait/process/finish/error/success | finish |
| align-center | 标题描述居中对齐 | boolean | - | false |
| center | 组件居中显示 | boolean | - | false |
| process-status | 设置当前步骤的状态 | string | wait / process / finish / error / success | process |
| finish-status | 设置结束步骤的状态 | string | wait / process / finish / error / success | finish |
| align-center | 进行居中对齐 | boolean | - | false |
| simple | 是否应用简洁风格 | boolean | - | false |
### Step Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| title | 标题 | string | — | — |
| description | 描述性文字 | string | — | — |
| icon | 图标 | Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入 | string | — |
| status | 设置当前步骤的状态，不设置则根据 steps 确定状态 | wait/process/finish/error/success | - |
| icon | 图标 | 传入 icon 的 class 全名来自定义 icon，也支持 slot 方式写入 | string | — |
| status | 设置当前步骤的状态，不设置则根据 steps 确定状态 | wait / process / finish / error / success | - |
### Step Slot
| name | 说明 |
......
packages/steps/src/step.vue
View file @ 5ce0e228
<template>
<div
class="el-step"
:style="[style, isLast ? '' : { marginRight: - $parent.stepOffset + 'px' }]"
:class="['is-' + $parent.direction]">
:style="[style, isLast ? { maxWidth: 100 / stepsCount + '%' } : { marginRight: - $parent.stepOffset + 'px' }]"
:class="[
!isSimple && `is-${$parent.direction}`,
isSimple && 'is-simple',
isLast && !space && !isCenter && 'is-flex',
isCenter && !isVertical && !isSimple && 'is-center'
]">
<!-- icon & line -->
<div
class="el-step__head"
:class="['is-' + currentStatus, { 'is-text': !icon }]">
:class="`is-${currentStatus}`">
<div
class="el-step__line"
:style="isLast ? '' : { marginRight: $parent.stepOffset + 'px' }"
:class="['is-' + $parent.direction, { 'is-icon': icon }]">
>
<i class="el-step__line-inner" :style="lineStyle"></i>
</div>
<span class="el-step__icon">
<div class="el-step__icon" :class="`is-${icon ? 'icon' : 'text'}`">
<slot
v-if="currentStatus !== 'success' && currentStatus !== 'error'"
name="icon">
<i v-if="icon" :class="['el-icon-' + icon]"></i>
<div v-else>{{ index + 1 }}</div>
<i v-if="icon" class="el-step__icon-inner" :class="[icon]"></i>
<div class="el-step__icon-inner" v-if="!icon && !isSimple">{{ index + 1 }}</div>
</slot>
<i
v-else
:class="['el-icon-' + (currentStatus === 'success' ? 'check' : 'close')]">
:class="['el-icon-' + (currentStatus === 'success' ? 'check' : 'close')]"
class="el-step__icon-inner is-status"
>
</i>
</span>
</div>
</div>
<div
class="el-step__main"
:style="{ marginLeft: mainOffset }">
<!-- title & description -->
<div class="el-step__main">
<div
class="el-step__title"
ref="title"
:class="['is-' + currentStatus]">
<slot name="title">{{ title }}</slot>
</div>
<div v-if="isSimple" class="el-step__arrow"></div>
<div
v-else
class="el-step__description"
:class="['is-' + currentStatus]">
<slot name="description">{{ description }}</slot>
......@@ -59,7 +68,6 @@ export default {
return {
index: -1,
lineStyle: {},
mainOffset: 0,
internalStatus: ''
};
},
......@@ -84,31 +92,37 @@ export default {
const prevStep = this.$parent.steps[this.index - 1];
return prevStep ? prevStep.currentStatus : 'wait';
},
isLast: function() {
isCenter() {
return this.$parent.alignCenter;
},
isVertical() {
return this.$parent.direction === 'vertical';
},
isSimple() {
return this.$parent.simple;
},
isLast() {
const parent = this.$parent;
return parent.steps[parent.steps.length - 1] === this;
},
stepsCount() {
return this.$parent.steps.length;
},
space() {
const { isSimple, $parent: { space } } = this;
return isSimple ? '' : space ;
},
style: function() {
const parent = this.$parent;
const isCenter = parent.center;
const len = parent.steps.length;
if (isCenter && this.isLast) {
return {};
}
const space = (typeof this.space === 'number'
? this.space + 'px'
: this.space
? this.space
: 100 / (len - 1) + '%');
const space = (typeof parent.space === 'number'
? parent.space + 'px'
: parent.space
? parent.space
: 100 / (isCenter ? len - 1 : len) + '%');
if (parent.direction === 'horizontal') {
return { width: space };
} else {
if (!this.isLast) {
return { height: space };
}
}
return { flexBasis: space };
}
},
......@@ -133,7 +147,7 @@ export default {
style.transitionDelay = 150 * this.index + 'ms';
if (status === this.$parent.processStatus) {
step = this.currentStatus !== 'error' ? 50 : 0;
step = this.currentStatus !== 'error' ? 0 : 0;
} else if (status === 'wait') {
step = 0;
style.transitionDelay = (-150 * this.index) + 'ms';
......@@ -149,14 +163,6 @@ export default {
},
mounted() {
const parent = this.$parent;
if (parent.direction === 'horizontal') {
if (parent.alignCenter) {
this.mainOffset = -this.$refs.title.getBoundingClientRect().width / 2 + 16 + 'px';
}
}
const unwatch = this.$watch('index', val => {
this.$watch('$parent.active', this.updateStatus, { immediate: true });
unwatch();
......
packages/steps/src/steps.vue
View file @ 5ce0e228
<template>
<div
class="el-steps"
:class="['is-' + direction, center ? 'is-center' : '']">
<slot></slot>
:class="[
!simple && 'el-steps--' + direction,
simple && 'el-steps--simple'
]">
<slot></slot>
</div>
</template>
......@@ -19,6 +22,7 @@ export default {
},
alignCenter: Boolean,
center: Boolean,
simple: Boolean,
finishStatus: {
type: String,
default: 'finish'
......
packages/theme-chalk/src/step.scss
View file @ 5ce0e228
......@@ -3,209 +3,313 @@
@include b(step) {
position: relative;
vertical-align: top;
flex-shrink: 1;
&:last-child .el-step__main {
padding-right: 0;
}
@include pseudo(last-of-type) {
@include e(line) {
display: none;
}
@include when(horizontal) {
display: inline-block;
// 只有未设置 space 的情况下才自适应宽度
@include when(flex) {
flex-basis: auto !important;
flex-shrink: 0;
flex-grow: 0;
}
@include e((main, description)) {
padding-right: 0;
}
}
@include when(vertical) {
& .el-step__head,
& .el-step__main {
display: inline-block;
@include e(head) {
position: relative;
width: 100%;
@include when(process) {
color: $--color-text-primary;
border-color: $--color-text-primary;
}
& .el-step__main {
padding-left: 10px;
@include when(wait) {
color: $--color-text-placeholder;
border-color: $--color-text-placeholder;
}
@include when(success) {
color: $--color-success;
border-color: $--color-success;
}
@include when(error) {
color: $--color-danger;
border-color: $--color-danger;
}
@include when(finish) {
color: $--color-primary;
border-color: $--color-primary;
}
}
@include e(line) {
display: inline-block;
position: absolute;
border-color: inherit;
background-color: $--color-black;
@include e(icon) {
position: relative;
z-index: 1;
display: inline-flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
font-size: 14px;
box-sizing: border-box;
background: $--color-white;
transition: .15s ease-out;
@include when(text) {
border-radius: 50%;
border: 2px solid;
border-color: inherit;
}
@include when(icon) {
@include when(horizontal) {
right: 4px;
}
width: 40px;
}
}
@include when(horizontal) {
top: 15px;
height: 2px;
left: 32px;
right: 0;
@include e(icon-inner) {
display: inline-block;
user-select: none;
text-align: center;
font-weight: bold;
line-height: 1;
color: inherit;
&[class*=el-icon]:not(.is-status) {
font-size: 25px;
font-weight: normal;
}
@include when(vertical) {
width: 2px;
box-sizing: border-box;
top: 32px;
bottom: 0;
left: 15px;
// 组件自身表示状态的图标
@include when(status) {
transform: scale(.65) translateY(1px);
}
}
@include e(line) {
position: absolute;
border-color: inherit;
background-color: $--color-text-placeholder;
}
@include e(line-inner) {
display: block;
border-width: 1px;
border-style: solid;
border-color: inherit;
transition: all 150ms;
transition: .15s ease-out;
box-sizing: border-box;
width: 0;
height: 0;
}
@include e(icon) {
display: block;
line-height: 28px;
> * {
line-height: inherit;
vertical-align: middle;
}
@include e(main) {
white-space: normal;
text-align: left;
}
@include e(head) {
width: 28px;
height: 28px;
border-radius: 50%;
border-color: transparent;
text-align: center;
line-height: 28px;
font-size: 28px;
vertical-align: top;
transition: all 150ms;
@include when(text) {
font-size: 14px;
border-width: 2px;
border-style: solid;
@include when(process) {
color: $--color-white;
background-color: $--color-black;
border-color: $--color-black;
}
@include when(wait) {
color: $--color-black;
background-color: $--color-white;
border-color: $--color-black;
}
@include when(success) {
color: $--color-white;
background-color: $--color-success;
border-color: $--color-success;
}
@include when(error) {
color: $--color-white;
background-color: $--color-danger;
border-color: $--color-danger;
}
@include when(finish) {
color: $--color-white;
background-color: $--color-primary;
border-color: $--color-primary;
}
}
@include e(title) {
font-size: 15px;
line-height: 38px;
@include when(process) {
color: $--color-black;
border-color: $--color-black;
font-weight: bold;
color: $--color-text-primary;
}
@include when(wait) {
color: $--color-black;
border-color: $--color-black;
color: $--color-text-placeholder;
}
@include when(success) {
color: $--color-success;
border-color: $--color-success;
}
@include when(error) {
color: $--color-danger;
border-color: $--color-danger;
}
@include when(finish) {
color: $--color-primary;
border-color: $--color-primary;
}
}
@include e(main) {
white-space: normal;
padding-right: 10px;
text-align: left;
}
@include e(title) {
font-size: 14px;
line-height: 32px;
display: inline-block;
@include e(description) {
padding-right: 10%;
margin-top: -5px;
font-size: 12px;
line-height: 20px;
font-weight: normal;
@include when(process) {
font-weight: 700;
color: $--color-black;
color: $--color-text-primary;
}
@include when(wait) {
font-weight: normal;
color: $--color-black;
color: $--color-text-placeholder;
}
@include when(success) {
font-weight: 700;
color: $--color-success;
}
@include when(error) {
font-weight: 700;
color: $--color-danger;
}
@include when(finish) {
font-weight: 700;
color: $--color-primary;
}
}
@include e(description) {
font-size: 12px;
font-weight: normal;
line-height: 14px;
@include when(horizontal) {
display: inline-block;
@include when(process) {
color: $--color-black;
@include e(line) {
height: 2px;
top: 11px;
left: 0;
right: 0;
}
}
@include when(wait) {
color: $--color-black;
@include when(vertical) {
display: flex;
@include e(head) {
flex-grow: 0;
width: 24px;
}
@include when(success) {
color: $--color-success;
@include e(main) {
padding-left: 10px;
flex-grow: 1;
}
@include when(error) {
color: $--color-danger;
@include e(title) {
line-height: 24px;
padding-bottom: 8px;
}
@include when(finish) {
color: $--color-primary;
@include e(line) {
width: 2px;
top: 0;
bottom: 0;
left: 11px;
}
}
@include when(center) {
@include e(head) {
text-align: center;
}
@include e(main) {
text-align: center;
}
@include e(description) {
padding-left: 20%;
padding-right: 20%;
}
@include e(line) {
left: 50%;
right: -50%;
}
}
@include when(simple) {
display: flex;
align-items: center;
@include e(head) {
width: auto;
font-size: 0;
padding-right: 10px;
}
@include e(icon) {
background: transparent;
width: 16px;
height: 16px;
font-size: 12px;
@include when(icon) {
width: 30px;
}
}
@include e(icon-inner) {
&[class*=el-icon]:not(.is-status) {
font-size: 18px;
}
&.is-status {
transform: scale(.5) translateY(1px);
}
}
@include e(main) {
position: relative;
display: flex;
align-items: stretch;
flex-grow: 1;
}
@include e(title) {
font-size: 16px;
line-height: 20px;
}
@include pseudo('not(:last-of-type)') {
@include e(title) {
max-width: 50%;
word-break: break-all;
}
}
@include e(arrow) {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
&::before,
&::after {
content: '';
display: inline-block;
position: absolute;
height: 15px;
width: 1px;
background: $--color-text-placeholder;
}
&::before {
transform: rotate(-45deg) translateY(-4px);
transform-origin: 0 0;
}
&::after {
transform: rotate(45deg) translateY(4px);
transform-origin: 100% 100%;
}
}
@include pseudo(last-of-type) {
@include e(arrow) {
display: none;
}
}
}
}
packages/theme-chalk/src/steps.scss
View file @ 5ce0e228
@import "mixins/mixins";
@include b(steps) {
font-size: 0;
display: flex;
> :last-child .el-step__line {
display: none;
@include m(simple) {
padding: 13px 8%;
border-radius: 4px;
background: $--background-color-base;
}
@include when(horizontal) {
@include m(horizontal) {
white-space: nowrap;
}
@include when(center) {
text-align: center;
}
@include m(vertical) {
height: 100%;
flex-flow: column;
}
}
test/unit/specs/steps.spec.js
View file @ 5ce0e228
......@@ -25,7 +25,6 @@ describe('Steps', () => {
<el-step title="step1"></el-step>
<el-step title="step2"></el-step>
<el-step title="step3"></el-step>
<el-step title="step4"></el-step>
</el-steps>
`);
......@@ -39,8 +38,8 @@ describe('Steps', () => {
`);
Vue.nextTick(_ => {
expect(vm.$el.querySelector('.el-step')).have.deep.property('style.width').equal('25%');
expect(vm2.$el.querySelector('.el-step')).have.deep.property('style.width').equal('100px');
expect(vm.$el.querySelector('.el-step')).have.deep.property('style.webkitFlexBasis').equal('50%');
expect(vm2.$el.querySelector('.el-step')).have.deep.property('style.webkitFlexBasis').equal('100px');
done();
});
});
......@@ -118,7 +117,7 @@ describe('Steps', () => {
`);
vm.$nextTick(_ => {
expect(vm.$el.querySelector('.el-step')).have.deep.property('style.height').equal('200px');
expect(vm.$el.querySelector('.el-step')).have.deep.property('style.webkitFlexBasis').equal('200px');
done();
});
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment