Progress进度条组件
<template>
<!--最外层-->
<div
class="el-progress"
:class="[
'el-progress--' + type,
status ? 'is-' + status : '',
{
'el-progress--without-text': !showText,
'el-progress--text-inside': textInside,
}
]"
role="progressbar"
:aria-valuenow="percentage"
aria-valuemin="0"
aria-valuemax="100"
>
<!--线形进度条-->
<div class="el-progress-bar" v-if="type === 'line'">
<!--进度条外部背景；strokeWidth:文档中说是宽度，这里是高度呀-->
<div class="el-progress-bar__outer" :style="{height: strokeWidth + 'px'}">
<!--进度条内部百分比-->
<div class="el-progress-bar__inner" :style="barStyle">
<!--线形进度条内部文字-->
<div class="el-progress-bar__innerText" v-if="showText && textInside">{{percentage}}%</div>
</div>
</div>
</div>
<!--环形进度条-->
<div class="el-progress-circle" :style="{height: width + 'px', width: width + 'px'}" v-else>
<svg viewBox="0 0 100 100">
<path class="el-progress-circle__track" :d="trackPath" stroke="#e5e9f2" :stroke-width="relativeStrokeWidth" fill="none"></path>
<path class="el-progress-circle__path" :d="trackPath" stroke-linecap="round" :stroke="stroke" :stroke-width="relativeStrokeWidth" fill="none" :style="circlePathStyle"></path>
</svg>
</div>
<!--进度条外面文字内容-->
<div class="el-progress__text" v-if="showText && !textInside" :style="{fontSize: progressTextSize + 'px'}">
<!--进度条当前状态status值不存在时，显示百分比-->
<template v-if="!status">{{percentage}}%</template>
<!--进度条当前状态status值存在时-->
<template v-else>
<!--status为text，将文本内容插入显示-->
<slot v-if="status === 'text'"></slot>
<!--status为其他值时，显示对应的图标-->
<i v-else :class="iconClass"></i>
</template>
</div>
</div>
</template>
<script>
export default {
name: 'ElProgress',
props: {
type: { //进度条类型
type: String,
default: 'line',
validator: val => ['line', 'circle'].indexOf(val) > -1
},
percentage: { //百分比（必填）
type: Number,
default: 0,
required: true,
validator: val => val >= 0 && val <= 100
},
status: { //进度条当前状态
type: String,
validator: val => ['text', 'success', 'exception'].indexOf(val) > -1
},
strokeWidth: { //进度条的宽度，单位 px
type: Number,
default: 6
},
textInside: { //进度条显示文字内置在进度条内（只在 type=line 时可用）
type: Boolean,
default: false
},
width: { //环形进度条画布宽度（只在 type=circle 时可用）
type: Number,
default: 126
},
showText: { //是否显示进度条文字内容
type: Boolean,
default: true
},
color: { //进度条背景色（会覆盖 status 状态颜色）
type: String,
default: ''
}
},
computed: {
//进度条内部百分比和背景颜色显示
barStyle() {
const style = {};
style.width = this.percentage + '%';
style.backgroundColor = this.color;
return style;
},
relativeStrokeWidth() {
return (this.strokeWidth / this.width * 100).toFixed(1);
},
trackPath() {
const radius = parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10);
return `M 50 50 m 0 -${radius} a ${radius} ${radius} 0 1 1 0 ${radius * 2} a ${radius} ${radius} 0 1 1 0 -${radius * 2}`;
},
perimeter() {
const radius = 50 - parseFloat(this.relativeStrokeWidth) / 2;
return 2 * Math.PI * radius;
},
circlePathStyle() {
const perimeter = this.perimeter;
return {
strokeDasharray: `${perimeter}px,${perimeter}px`,
strokeDashoffset: (1 - this.percentage / 100) * perimeter + 'px',
transition: 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
};
},
stroke() {
let ret;
if (this.color) {
ret = this.color;
} else {
switch (this.status) {
case 'success':
ret = '#13ce66';
break;
case 'exception':
ret = '#ff4949';
break;
default:
ret = '#20a0ff';
}
}
return ret;
},
iconClass() {
if (this.type === 'line') {
return this.status === 'success' ? 'el-icon-circle-check' : 'el-icon-circle-close';
} else {
return this.status === 'success' ? 'el-icon-check' : 'el-icon-close';
}
},
// 进度条外文字的大小
progressTextSize() {
return this.type === 'line'
? 12 + this.strokeWidth * 0.4
: this.width * 0.111111 + 2 ;
}
}
};
</script>
Badge标记组件
<template>
<div class="el-badge">
<slot></slot>
<transition name="el-zoom-in-center">
<!--is-fixed类用来定位上面数字的显示-->
<sup
v-show="!hidden && (content || content === 0 || isDot)"
v-text="content"
class="el-badge__content"
:class="[
'el-badge__content--' + type,
{
'is-fixed': $slots.default,
'is-dot': isDot
}
]">
</sup>
</transition>
</div>
</template>
<script>
export default {
name: 'ElBadge',
props: {
value: {}, //显示值
max: Number, //最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型
isDot: Boolean, //小圆点
hidden: Boolean, //隐藏 badge
type: { //类型
type: String,
validator(val) {
return ['primary', 'success', 'warning', 'info', 'danger'].indexOf(val) > -1;
}
}
},
computed: {
// 返回显示的数据
content() {
// 如果是显示小圆点，直接返回
if (this.isDot) return;
const value = this.value;
const max = this.max;
if (typeof value === 'number' && typeof max === 'number') {
// 如果显示值比最大值则显示'{max}+'
return max < value ? `${max}+` : value;
}
return value;
}
}
};
</script>
Alert 警告组件
<template>
<transition name="el-alert-fade">
<!--最外层包裹标签-->
<div
class="el-alert"
:class="[typeClass, center ? 'is-center' : '']"
v-show="visible"
role="alert"
>
<!--通过设置show-icon属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图-->
<i class="el-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
<!--内容部分包含：提示的文案、描述、关闭按钮-->
<div class="el-alert__content">
<!--提示的文字-->
<span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title || $slots.title">
<slot name="title">{{ title }}</slot>
</span>
<!--设置的辅助性文字-->
<slot>
<p class="el-alert__description" v-if="description">{{ description }}</p>
</slot>
<!--关闭按钮-->
<i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
</div>
</div>
</transition>
</template>
<script type="text/babel">
const TYPE_CLASSES_MAP = {
'success': 'el-icon-success',
'warning': 'el-icon-warning',
'error': 'el-icon-error'
};
export default {
name: 'ElAlert',
props: {
title: { //标题
type: String,
default: ''
},
description: { //辅助性文字，也可通过默认 slot 传入
type: String,
default: ''
},
type: { //主题
type: String,
default: 'info'
},
closable: { //是否可关闭
type: Boolean,
default: true
},
closeText: { //关闭按钮自定义文本
type: String,
default: ''
},
showIcon: Boolean, //是否显示图标
center: Boolean //文字是否居中
},
data() {
return {
visible: true
};
},
methods: {
close() {
this.visible = false;
this.$emit('close');
}
},
computed: {
// 根据type返回对应的类，主要用来显示alert组件背景色和文字的颜色
typeClass() {
return `el-alert--${ this.type }`;
},
// 根据type返回显示的图标
iconClass() {
return TYPE_CLASSES_MAP[this.type] || 'el-icon-info';
},
// 如果description存在显示大图标
isBigIcon() {
return this.description || this.$slots.default ? 'is-big' : '';
},
// 如果description存在，title加粗显示
isBoldTitle() {
return this.description || this.$slots.default ? 'is-bold' : '';
}
}
};
</script>
