Progress進度條組件 html <! 最外層 <! 線形進度條 <! 進度條外部背景；strokeWidth:文檔中說是寬度，這裡是高度呀 <! 進度條內部百分比 <! 線形進度條內部文字 {{percentage}}% <! 環形進度條 <! 進度條外面文字內容 <! 進度條當前狀態stat ...
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>
