vue 自定义组件：ProcessBar (堆叠式进度条)

使用vue做界面的时候需要用到类似bootstrap堆叠式进度条，前台使用ElementUI，为了防止有样式冲突，自己定义一个类似这样的进度条。

<template><div id="ProcessBar" class="pB_Container"><div class="first" :style="error">{{ getProcessDesc(processValue[0]) }}</div><div class="second" :style="cancel">{{ getProcessDesc(processValue[1]) }}</div><div class="third" :style="success">{{ getProcessDesc(processValue[2]) }}</div><div class="last" :style="notDone">{{ getProcessDesc(processValue[3]) }}</div></div>
</template><script>
export default {name: "ProcessBar",props: {processValue: {type: Array,default: [0],},},data() {return {error: {width: this.processValue[0] + "%",},cancel: {width: this.processValue[1] + "%",},success: {width: this.processValue[2] + "%",},notDone: {width: this.processValue[3] + "%",},};},components: {},methods: {getProcessDesc(data) {return data == 0 ? " " : data + "%";},},
};
</script>
<style scoped>
.pB_Container {width: 100%;background-color: #f5f5f5;height: 20px;display: inline-flex;line-height: 20px;text-align: right;overflow: hidden;color: white;box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
}
.pB_Container div {float: left;border-radius: 8px;
}
.first {background-color: #ea6b66;padding-right:10px
}
.second {background-color: #ffd966;padding-right:10px
}
.third {background-color: #7ea6e0;padding-right:10px
}
.last {background-color: white;padding-right:10px
}
</style>

在父级中引入组件直接调用：

<template><div class="pB_Container"><processBar v-bind="processBarModel" /></div>
</template><script>
import processBar from "../components/processPar";
export default {name: "Home",components: {processBar,},data() {return {processBarModel: {processValue: [10, 40, 20, 0]//此处是每个进度的值},};},};
</script>

案例只设置了4级进度，没有根据值的个数来循环加载进度个数，待优化。。。。

vue 自定义组件：ProcessBar (堆叠式进度条)相关推荐

vue自定义组件-文件上传后端接口
学习目标: vue自定义组件-文件上传后端接口学习内容: 准备工作: 后端环境:JAVA-Springboot项目数据库表(这里使用psql数据库):sys_file_record保存上传文件的信息 ...
vue 自定义组件创建及其使用
vue 自定义组件创建及其使用 1.vue 自定义组件有全局注册和局部注册两种方式: 全局注册通过 Vue.component 来创建组件,这些组件是全局注册的.也就是说它们在注册之后可以用在任何新 ...
vue自定义组件，插槽，自定义事件
vue组件套娃 1. vue自定义组件 2. 组件和插槽套娃 3. vue组件通过自定义事件更改vue实例中的数据 1. vue自定义组件语法 Vue.component('自定义组件名', {pr ...
vue 嵌套表格组件_使用form-create动态生成vue自定义组件和嵌套表单组件
使用form-create动态生成vue自定义组件和嵌套表单组件 maker.create 通过建立一个虚拟 DOM的方式生成自定义组件生成 Maker let rule = [ formCreat ...
Android自定义滑动进度条,Android自定义View实现圆形水波进度条
每次听到某大牛谈论自定义View,顿时敬佩之心,如滔滔江水连绵不绝,心想我什么时候能有如此境界,好了,心动不如行动,于是我开始了自定义View之路,虽然过程有坎坷,但是结果我还是挺满意的.我知道大牛还 ...
vue自定义组件是.vue还是html,Vue自定义组件的四种方式示例详解
四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) ...
进度条上的小圆点怎么做_Android自定义带圆点的半圆形进度条
本文实例为大家分享了Android自定义带圆点的半圆形进度条,供大家参考,具体内容如下仅限用于半圆形,如须要带圆点的圆形进度条,圆点会出现错位现象,此代码仅供,带圆点的圆形进度条有空研究一下!图片效 ...
Vue自定义组件封装及使用Excel
Vue自定义组件封装及使用Excel 一.js-xlsx 组件安装二. 创建vue组件三.使用四.效果图一.js-xlsx 组件安装 npm install xlsx --savenpm in ...
Vue自定义组件之时间跨度选择器
时间跨度选择器该组件是个时间跨度选择器. 基于 vue自定义组件之选择器和 Vue自定义组件之日期时间范围选择器点击选框,下拉列表中有四个选项,点击自定义时间,后边会出现日期时间范围选择代码 ...

vue 自定义组件：ProcessBar (堆叠式进度条)

vue 自定义组件：ProcessBar (堆叠式进度条)相关推荐

最新文章

热门文章