Vue elementui 进度条随机颜色
项目要求显示进度条,而且进度条的颜色不能重复,所以就有了随机进度条的想法。
实现的最终效果:
<el-table-column header-align="center" align="center" label="进度" width="100">
<template slot-scope="scope">
<el-progress :text-inside="true" :stroke-width="26" :percentage="(keepTwoDecimal(scope.row.currentScore/scope.row.standardScore)*100)" :color="colorlists[Math.floor(Math.random()*10)]"></el-progress>
</template>
</el-table-column>
在data中定义随机的颜色
colorlists: [
'hsl(42, 48%, 54%)',
'hsl(138, 24%, 48%)',
'rgb(200, 138, 131)',
'rgb(84, 221, 226)',
'rgb(178, 199, 168)',
'rgb(16, 195, 195)',
'hsl(0, 21%, 68%)',
'rgb(226, 166, 198)',
'hsl(278, 17%, 66%)',
'rgb(153, 199, 235)',
'rgb(34,184,221)',
'rgb(221,72,34)',
'rgb(204,51,204)',
'rgb(255,204,0)',
'rgb(77,179,179)',
'rgb(196,60,141)',
'blueviolet'
],
Vue elementui 进度条随机颜色的更多相关文章
- vue 圆形进度条组件解析
项目简介 本组件是vue下的圆形进度条动画组件 自由可定制,几乎全部参数均可设置 源码简单清晰 面向人群 急于使用vue圆形进度条动画组件的同学.直接下载文件,拷贝代码即可运行. 喜欢看源码,希望了解 ...
- 安卓ProgressBar水平进度条的颜色设置
安卓系统提供了水平进度条ProgressBar的样式,而我们在实际开发中,差点儿不可能使用默认的样式.原因就是"太丑"^_^ 所以我们在很多其它的时候须要对其颜色进行自己定义,主要 ...
- vue 渐变 进度条 progress
废话 不多少说 ,直接上代码 新建文件 gradual-progress.vue <!-- * @Author: gfc * @Date: 2019-11-07 14:00:11 * @Last ...
- 为ProgressBar进度条设置颜色1
可以通过xml文件来设置,方法如下: 1:先在布局文件中的ProgressBar加入下面属性: android:progressDrawable="@drawable/progress_ba ...
- android圆形进度条ProgressBar颜色设置
花样android Progressbar http://www.eoeandroid.com/thread-1081-1-1.html http://www.cnblogs.com/xirihanl ...
- vue 的进度条组件
先看效果: 要想实现如上图的,进度跳效果,有两种方式,首先介绍第一种: 1.自己用 div 写一个,代码如下 <template> <div class="mfc-slid ...
- Vue中进度条的使用
1. 安装npm install --save nprogress 2.导入js和css import NProgress from 'nprogress'import 'nprogress/npro ...
- 【Vue项目】商品汇前台(二)进度条插件+Vuex模块化仓库+函数的防抖与节流+路由传参
前言 1 nprogress进度条的使用 当请求发出进度条出现并向前走,请求成功后进度条消失.nprogress是一种进度条插件 1.1 nprogress进度条插件安装 npm i --save n ...
- 【CSS】环形进度条
效果图 原理剖析 1.先完成这样一个半圆(这个很简单吧) 2.overflow: hidden; 3.在中间定位一个白色的圆形做遮挡 4.完成另一半 5.使用animate配合时间完成衔接 源码 &l ...
- android 开发-自定义多节点进度条显示
看效果图: 里面的线段颜色和节点图标都是可以自定义的. main.xml <RelativeLayout xmlns:android="http://schemas.android.c ...
随机推荐
- STM32 学习:IAP 简单的IAP例子
--- title: mcu-stm32-IAP-1-sample date: 2020-05-27 18:21:53 categories: tags: - iap - stm32 --- 章节概述 ...
- openGauss集群主库出现流复制延迟告警
问题描述:环境是openGauss 5.0集群,在一次意外重启数据库之后.收到了一个主库的主从延迟告警,只有从库才能出现延迟,主库怎么会出现了告警延迟 告警信息: Status: Resolved H ...
- Rougamo、Fody 实现静态Aop
最近在看项目,看到别人使用Rougamo框架,好奇花了点时间仔细研究了,在这里记录一下. 0. 静态编织 Aop 首先,我们先了解什么是Aop? Aop 是指面向切面编程 (Aspect Orient ...
- 配置hive环境步骤(zookeeper高可用集群已搭建)
安装mysql:1. 检查当前环境是否安装mysql服务(命令:rpm -qa | grep -i mysql)2. 卸载自带的mysql3. 卸载软件:rpm -e --nodeps mysql-l ...
- OpenBMB × Hugging Face × THUNLP,联袂献上经典大模型课
这个夏天,THUNLP 携手 Hugging Face 和 OpenBMB,推出 大模型公开课第二季.在大模型公开课第二季中,将有全球知名开源社区 OpenBMB X Hugging Face 梦幻联 ...
- Unity 中使用Geomotry Shader(几何着色器)扩展点创建其他图形(并实现处理锯齿)
问题背景: 我们开发中需要有"点"对象,可以是像素的(不具备透视效果),始终等大,还有就是3D场景下的矢量点(随相机距离透视变化的). 问题解决思路: 方案1:使用GS扩充顶点,并 ...
- React Router 6
路由的概念,可以想像一下路由器,当来了一个请求时,路由器做了什么事情?它会把请求的IP地址和路由表进行匹配,匹配成功后,进行转发,直到目标主机.可以看到路由有三部分组成,一个是请求,一个是路由表,一个 ...
- Linux Mint操作系统安装
1,Linux 发行版 什么是Linux 发行版呢?这要从Linux 来源说起.Unix操作系统后期,开始收费和商业闭源了.一个叫Richard Stallman 的人就发起 GNU 计划,想模仿U ...
- 面向对象VS面向过程
什么是面向对象呢? 对于接触或者熟悉一些编程知识的同学来讲,"面向对象"这个词儿一点儿也不陌生.经常听说XX语言是完全面向对象的编程语言,比如C#.Java这些便是完全面向对象的编 ...
- SpringBoot+ Sharding Sphere 轻松实现数据库字段加解密
一.介绍 在实际的软件系统开发过程中,由于业务的需求,在代码层面实现数据的脱敏还是远远不够的,往往还需要在数据库层面针对某些关键性的敏感信息,例如:身份证号.银行卡号.手机号.工资等信息进行加密存储, ...