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 ...
随机推荐
- PetaLinux常用命令汇总
创建petalinux工程 Create a new project from a reference BSP file. 用于从官方下载的BSP中抽取数据产生工程. petalinux-create ...
- nn.Conv2d()中dilation参数的作用
nn.Conv2d()中dilation参数的作用 下面这张图很好的描述了这个参数的作用 优点: 这样每次进行单次计算时覆盖的面积(感受域)增大,最开始时3*3 = 9 然后是5*5 = 25最后是7 ...
- 基于OMAPL138+FPGA核心板——MCSDK开发入门(下)
本文测试板卡为创龙科技 SOM-TL138F 是一款基于 TI OMAP-L138(定点/浮点 DSP C674x + ARM9)+ 紫光同创 Logos/Xilinx Spartan-6 低功耗 F ...
- 请查收“国产化率认证报告”(100%)——RK3568J工业核心板
创龙科技RK3568J核心板获得"100%国产化"认证日前,创龙科技"国产化率100%认证"的核心板再添一员!RK3568J工业核心板(SOM-TL3568)获 ...
- Nuxt3 的生命周期和钩子函数(十一)
title: Nuxt3 的生命周期和钩子函数(十一) date: 2024/7/5 updated: 2024/7/5 author: cmdragon excerpt: 摘要:本文详细介绍了Nux ...
- 树莓派4B-GPIO控制步进电机
树莓派4B-GPIO控制步进电机 硬件需求: 步进电机 树莓派 杜邦线 L298N驱动模块 选择步进电机 首先需要确认步进电机,因为步进电机可分为单极性和双极步进电动机两种,这两种电机的驱动方式是不同 ...
- SpringBoot 文件打包zip,浏览器下载出去
本地文件打包 /** * 下载压缩包 * * @param response */ @ResponseBody @GetMapping("/downloadZip") public ...
- 魔百和s905l3a蓝牙系列 在armbian驱动并使用蓝牙!
文章已废弃,因为现在x大的dtb不需要驱动直接可以使用 之后我会重新写文章,感谢大家
- Profibus_DP转ModbusTCP网关模块接马保通讯案例
某工业企业为了提高生产效率和管理水平,决定对其生产线进行智能化改造.在该项目中,利用巴图自动化Profibus_DP转ModbusTCP网关模块(BT-ETHPB20)连接了不同生产设备,实现了设备之 ...
- 题解:CF1971C Clock and Strings
题解:CF1971C Clock and Strings 题意 在上图的一个圆中,给予你四个点 \(a,b,c,d\),判断线段 \(ab\) 与线段 \(cd\) 是否相交. 思路 先设置一个字符串 ...