智能马桶盖好用吗,勇者斗恶龙4下载,琥珀森林txt下载
steps步骤条组件源码：
我要评论<template>
<!--设置 simple 可应用简洁风格，该条件下 align-center / description / direction / space 都将失效。-->
<div
class="el-steps"
:class="[
!simple && 'el-steps--' + direction,
simple && 'el-steps--simple'
]">
<slot></slot>
</div>
</template>
<script>
import migrating from 'element-ui/src/mixins/migrating';
export default {
name: 'elsteps',
mixins: [migrating],
props: {
space: [number, string], //每个 step 的间距，不填写将自适应间距。支持百分比。
active: number, //设置当前激活步骤
direction: { //显示方向
type: string,
default: 'horizontal'
},
aligncenter: boolean, //进行居中对齐
simple: boolean, // 是否应用简洁风格
finishstatus: { //设置结束步骤的状态
type: string,
default: 'finish'
},
processstatus: { //设置当前步骤的状态
type: string,
default: 'process'
}
},
data() {
return {
steps: [], //记录步骤数数组
stepoffset: 0
};
},
methods: {
// 属性迁移
getmigratingconfig() {
return {
props: {
'center': 'center is removed.'
}
};
}
},
watch: {
active(newval, oldval) {
// 当前激活步骤改变时，触发父组件的change方法，将改变前和改变后的步骤作为参数传递出去
this.$emit('change', newval, oldval);
},
steps(steps) {
steps.foreach((child, index) => {
child.index = index;
});
}
}
};
</script>
<template>
<!--每一步骤的最外层包裹div-->
<div
class="el-step"
:style="style"
:class="[
!issimple && `is-${$parent.direction}`,
issimple && 'is-simple',
islast && !space && !iscenter && 'is-flex',
iscenter && !isvertical && !issimple && 'is-center'
]">
<!-- 步骤的数字图标和步骤条直线 -->
<div class="el-step__head" :class="`is-${currentstatus}`">
<!--步骤条直线-->
<!--如果是最后一步，margin-right不存在；如果不是，则为0-->
<div class="el-step__line" :style="islast ? '' : { marginright: $parent.stepoffset + 'px' }">
<i class="el-step__line-inner" :style="linestyle"></i>
</div>
<!--步骤条的数字图标-->
<div class="el-step__icon" :class="`is-${icon ? 'icon' : 'text'}`">
<!--如果当前状态为：wait、process、finish-->
<slot v-if="currentstatus !== 'success' && currentstatus !== 'error'" name="icon">
<!--如果是图标则显示对应的图标-->
<i v-if="icon" class="el-step__icon-inner" :class="[icon]"></i>
<!--如果图标和未设置issimple简洁风格时，则显示步骤文字-->
<div class="el-step__icon-inner" v-if="!icon && !issimple">{{ index + 1 }}</div>
</slot>
<!--如果当前状态为：success、error-->
<i v-else :class="['el-icon-' + (currentstatus === 'success' ? 'check' : 'close')]" class="el-step__icon-inner is-status"></i>
</div>
</div>
<!-- 步骤条下面每一步的标题和描述 -->
<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>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'elstep',
props: {
title: string, //标题
icon: string, //图标
description: string, //描述性文字
status: string //设置当前步骤的状态，不设置则根据 steps 确定状态。 wait（灰色）/ process（黑色）/ finish（蓝色）/ error / success（绿色）
},
data() {
return {
index: -1,
linestyle: {}, //步骤条直线的样式
internalstatus: ''
};
},
beforecreate() {
this.$parent.steps.push(this);
},
mounted() {
const unwatch = this.$watch('index', val => {
this.$watch('$parent.active', this.updatestatus, { immediate: true });
unwatch();
});
},
beforedestroy() {
const steps = this.$parent.steps;
const index = steps.indexof(this);
if (index >= 0) {
steps.splice(index, 1);
}
},
computed: {
// 返回当前步骤的状态
currentstatus() {
return this.status || this.internalstatus;
},
prevstatus() {
const prevstep = this.$parent.steps[this.index - 1];
return prevstep ? prevstep.currentstatus : 'wait';
},
// 返回是否是居中对齐
iscenter() {
return this.$parent.aligncenter;
},
// 返回显示的方向:竖直(false)或者水平(true)
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;
},
// 返回每个step的间距。
space() {
const { issimple, $parent: { space } } = this;
// issimple为true时，space将失效
return issimple ? '' : space ;
},
style: function() {
const style = {};
const parent = this.$parent;
const len = parent.steps.length; //总步骤
// 每个step的间距
const space = (typeof this.space === 'number' //如果设置的space是number
? this.space + 'px' //space等于设置的space
: this.space ? this.space : 100 / (len - (this.iscenter ? 0 : 1)) + '%'); //如果未设置space，未设置居中，则等于100除以（总步骤数-1）；设置居中显示，则等于00除以总步骤数。
// flex-basis 属性用于设置或检索弹性盒伸缩基准值。
style.flexbasis = space;
//如果是水平方向则直接返回设置的样式
if (this.isvertical) return style;
//如果是最后的步骤，设置最大宽度等于(100/总步骤数)%
if (this.islast) {
style.maxwidth = 100 / this.stepscount + '%';
} else {
//如果不是最后的步骤，marginright为0
style.marginright = -this.$parent.stepoffset + 'px';
}
return style;
}
},
methods: {
updatestatus(val) {
const prevchild = this.$parent.$children[this.index - 1];
if (val > this.index) { //如果是下一步
// internalstatus 等于用户设置的结束步骤状态
this.internalstatus = this.$parent.finishstatus;
} else if (val === this.index && this.prevstatus !== 'error') {
// internalstatus 等于用户设置的当前步骤状态
this.internalstatus = this.$parent.processstatus;
} else {
this.internalstatus = 'wait';
}
if (prevchild) prevchild.calcprogress(this.internalstatus);
},
//设置步骤间直线的样式
calcprogress(status) {
let step = 100;
const style = {};
// transitiondelay在过渡效果开始前等待的秒数：
style.transitiondelay = 150 * this.index + 'ms';
if (status === this.$parent.processstatus) {
step = this.currentstatus !== 'error' ? 0 : 0;
} else if (status === 'wait') {
step = 0;
//为负数的时候过渡的动作会从该时间点开始显示，之前的动作被截断；为正数的时候过渡的动作会延迟触发。
style.transitiondelay = (-150 * this.index) + 'ms';
}
style.borderwidth = step ? '1px' : 0;
this.$parent.direction === 'vertical'
? style.height = step + '%'
: style.width = step + '%';
this.linestyle = style;
}
}
};
</script>
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
JavaScript使用prototype属性实现继承操作示例
JavaScript直接调用函数与call调用的区别实例分析
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
网友评论