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>

element-ui Progress、Badge、Alert组件源码分析整理笔记(四)的更多相关文章

  1. element-ui 组件源码分析整理笔记目录

    element-ui button组件 radio组件源码分析整理笔记(一) element-ui switch组件源码分析整理笔记(二) element-ui inputNumber.Card .B ...

  2. element-ui button组件 radio组件源码分析整理笔记(一)

    Button组件 button.vue <template> <button class="el-button" @click="handleClick ...

  3. element-ui input组件源码分析整理笔记(六)

    input 输入框组件 源码: <template> <div :class="[ type === 'textarea' ? 'el-textarea' : 'el-in ...

  4. element-ui Message组件源码分析整理笔记(八)

    Message组件源码: main.js import Vue from 'vue'; import Main from './main.vue'; import { PopupManager } f ...

  5. element-ui MessageBox组件源码分析整理笔记(十二)

    MessageBox组件源码,有添加部分注释 main.vue <template> <transition name="msgbox-fade"> < ...

  6. element-ui Steps步骤条组件源码分析整理笔记(九)

    Steps步骤条组件源码: steps.vue <template> <!--设置 simple 可应用简洁风格,该条件下 align-center / description / ...

  7. element-ui Rate组件源码分析整理笔记(十三)

    Rate组件源码比较简单,有添加部分注释 main.vue <template> <!--valuenow当前的评分 valuetext当前显示的文本--> <div c ...

  8. element-ui Upload 上传组件源码分析整理笔记(十四)

    简单写了部分注释,upload-dragger.vue(拖拽上传时显示此组件).upload-list.vue(已上传文件列表)源码暂未添加多少注释,等有空再补充,先记下来... index.vue ...

  9. element-ui inputNumber、Card 、Breadcrumb组件源码分析整理笔记(三)

    inputNumber组件 <template> <!--@dragstart.prevent禁止input中数字的拖动--> <div @dragstart.preve ...

随机推荐

  1. Mac下如何安装配置Homebrew

    Last login: Mon Aug 7 13:57:29 on consolexiashenbindeMacBook-Pro:~ xiashenbin$ ruby -e "$(curl ...

  2. 读书笔记--SQL必知必会--常用MySQL(MariaDB)命令及示例

    DBMS信息 显示DBMS的版本 select version(); 显示DBMS状态 status; 显示DBMS资源状态 show status; 显示DBMS支持的权限 show privile ...

  3. Angular使用总结 --- 模型驱动表单

    模型驱动表单 之前有篇博文总结了 模版驱动表单 , 以及 模版驱动表单的自定义校验 , 本篇总结下模型驱动表单. 与模版驱动表单是不同的编程思路,偏向于数据模型.先在组件中建立表单控件的对象树,再绑定 ...

  4. [原创]内网渗透JSP webSehll连接工具

    工具: JspShellExec编译: VS2012  C# (.NET Framework v2.0)组织: K8搞基大队[K8team]作者: K8拉登哥哥博客: http://qqhack8.b ...

  5. Django 模版过滤器

    模版常用过滤器 在模版中,有时候需要对一些数据进行处理以后才能使用.一般在Python中我们是通过函数的形式来完成的.而在模版中,则是通过过滤器来实现的.过滤器使用的是|来使用.比如使用add过滤器, ...

  6. vue教程3-07 vue-loader

    vue-loader: vue-loader: 其他loader -> css-loader.url-loader.html-loader..... 后台: nodeJs -> requi ...

  7. asp.net core 系列之用户认证(1)-给项目添加 Identity

    对于没有包含认证(authentication),的项目,你可以使用基架(scaffolder)把 Identity的程序集包加入到项目中,并且选择性的添加Identity的代码进行生成. 虽然基架已 ...

  8. 关于oracle RAC心跳线采用直连 还是交换机连接的建议

    关于oracle RAC心跳线的连接方式,各个论坛,包括网上文章的说法是:官方说是不建议直连,建议采用交换机连接的方式!PS:但是,一直没有找到官方文档的出处,有知道的兄弟,烦请评论区提供下地址!!! ...

  9. Linux 服务器部署 PgAdmin 4 Server

    PostgreSQL 使用率越来越高,但是好用的图形化软件,诸如 Navicat.DataGrip.HeidiSQL 都是客户端软件,对于访问控制来说,比起 MySQL 的 phpMyAdmin 更加 ...

  10. MVC3学习:利用mvc3+ajax实现全选和批量删除

    本例数据库操作使用EF code first; 先利用mvc自带的模板,先生成一个list视图,然后再手动添加复选框和删除按钮 <table> <tr> @*在标题行添加一个全 ...