电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

Vue實現圓環進度條的示例

瀏覽:3日期:2022-10-06 16:00:28

數據展示,一直是各行各業樂此不疲的需求,具體到前端開發行業,則是各種各種圖表數據展示,各種表格數據展示,煩不勝煩(繁不勝繁)!前幾天剛做了折線圖、柱狀圖、餅狀圖之類的圖表數據展示效果,今天又碰到了類似圓環進度條的展示效果。天天跟數據打交道,天天跟接口打交道,項目做了不少,菜逼還是菜逼,都是淚啊!其實說白了,是自己對canvas不熟,對CSS3不熟,所以就找了一個現成的輪子:

<template> <div ref='box'> <svg : : xmlns='http://www.w3.org/2000/svg'> <circle :r='(width-radius)/2' :cy='width/2' :cx='width/2' :stroke- :stroke='backgroundColor' fill='none' /> <circle ref='$bar' :r='(width-radius)/2' :cy='width/2' :cx='width/2' :stroke='barColor' :stroke- :stroke-linecap='isRound ? ’round’ : ’square’' :stroke-dasharray='(width-radius)*3.14' :stroke-dashoffset='isAnimation ? (width-radius) * 3.14 : (width - radius) * 3.14 * (100 - progress) / 100' fill='none' /> </svg> <div :style='{color, fontSize}'> <p v-if='!$slots.default' class='title'>{{progress}}%</p> <slot></slot> </div> </div></template><script>export default { props: { radius: { type: [Number, String], default: 20 }, // 進度條厚度 progress: { type: [Number, String], default: 20 }, // 進度條百分比 barColor: { type: String, default: '#1890ff' }, // 進度條顏色 backgroundColor: { type: String, default: 'rgba(0,0,0,0.3)' }, // 背景顏色 isAnimation: { // 是否是動畫效果 type: Boolean, default: true }, isRound: { // 是否是圓形畫筆 type: Boolean, default: true }, id: { // 組件的id,多組件共存時使用 type: [String, Number], default: 1 }, duration: { // 整個動畫時長 type: [String, Number], default: 1000 }, delay: { // 延遲多久執行 type: [String, Number], default: 200 }, timeFunction: { // 動畫緩動函數 type: String, default: 'cubic-bezier(0.99, 0.01, 0.22, 0.94)' }, circleWidth: { //圓環寬度 type: Number, default: 100, }, color: { //文字顏色 type: String, default: ’#000’ }, fontSize: { //文字大小 type: String, default: ’18px’ } }, data() { return { width: this.circleWidth, idStr: `circle_progress_keyframes_${this.id}` }; }, beforeDestroy() { // 清除舊組件的樣式標簽 document.getElementById(this.idStr) && document.getElementById(this.idStr).remove(); window.addEventListener(() => {}); }, mounted() { let self = this; this.setCircleWidth(); this.setAnimation(); // 此處不能使用window.onresize window.addEventListener( 'resize', debounce(function() { self.setCircleWidth(); self.setAnimation(self); }, 300) ); }, methods: { setCircleWidth() { let box = this.$refs.box; let width = box.clientWidth; let height = box.clientHeight; let cW = width > height ? height : width; this.width = cW; }, setAnimation() { let self = this; if (self.isAnimation) { // 重復定義判斷 if (document.getElementById(self.idStr)) { console.warn('vue-circle-progress should not have same id style'); document.getElementById(self.idStr).remove(); } // 生成動畫樣式文件 let style = document.createElement('style'); style.id = self.idStr; style.type = 'text/css'; style.innerHTML = ` @keyframes circle_progress_keyframes_name_${self.id} { from {stroke-dashoffset: ${(self.width - self.radius) * 3.14}px;} to {stroke-dashoffset: ${((self.width - self.radius) * 3.14 * (100 - self.progress)) / 100}px;}} .circle_progress_bar${ self.id } {animation: circle_progress_keyframes_name_${self.id} ${ self.duration }ms ${self.delay}ms ${self.timeFunction} forwards;}`; // 添加新樣式文件 document.getElementsByTagName('head')[0].appendChild(style); // 往svg元素中添加動畫class self.$refs.$bar.classList.add(`circle_progress_bar${self.id}`); } } }};</script><style scoped>.content {height:100%;display:flex;justify-content:center;align-items: center;}.center_text {position:absolute;}</style>

使用方法:

<CircleProgress : :circleWidth='40' :radius='7' :progress='30' :isAnimation='true' :backgroundColor='’#E9E9E9’' :barColor='’#FF4F4F’' /><CircleProgress : :circleWidth='40' :radius='7' :progress='50' :isAnimation='true' :backgroundColor='’#E9E9E9’' :barColor='’#FF902A’' /><CircleProgress : :circleWidth='40' :radius='7' :progress='89' :isAnimation='true' :backgroundColor='’#E9E9E9’' :barColor='’#FFDB4F’' /><CircleProgress : :circleWidth='40' :radius='7' :progress='25' :isAnimation='true' :backgroundColor='’#E9E9E9’' :barColor='’#B8D87E’' />

使用時需要注意一下,如果你的頁面中同時使用了超過兩個以上的這種圓環進度條,就需要給每個圓環進度條設置不同的id,否則,所有圓環最終展示的數據都會是最后一個圓環的數據。

代碼中有一個防抖動的函數,這里就貼一下這個函數:

function debounce(func, wait, immediate) { let timeout, args, context, timestamp, result const later = function () { // 據上一次觸發時間間隔 const last = +new Date() - timestamp // 上次被包裝函數被調用時間間隔last小于設定時間間隔wait if (last < wait && last > 0) { timeout = setTimeout(later, wait - last) } else { timeout = null // 如果設定為immediate===true,因為開始邊界已經調用過了此處無需調用 if (!immediate) { result = func.apply(context, args) if (!timeout) context = args = null } } }

本文參考的是npm上的一個圓環進度條的插件vue-circleprogressbar,之所以沒有在項目中直接安裝并使用這個插件,是因為這個插件有點不太符合我們開發的需求,比如這個插件不能設置圓環的寬度,不能設置文字的顏色,不能設置文字的大小,再比如這個插件僅僅為了防抖而依賴了lodash(這個lodash的體積還是很大的)。

至于這個組件在react中的使用,按照react的生命周期,或者react hooks的語法,或者dva模式的語法,稍微改巴改巴就可以使用了,很簡單,就不再展開了。

作者:小壞

出處:http://tnnyang.cnblogs.com

以上就是Vue實現圓環進度條的示例的詳細內容,更多關于Vue 實現圓環進度條的資料請關注好吧啦網其它相關文章!

標簽: Vue
相關文章:
主站蜘蛛池模板: 赛默飞Thermo veritiproPCR仪|ProFlex3 x 32PCR系统|Countess3细胞计数仪|371|3111二氧化碳培养箱|Mirco17R|Mirco21R离心机|仟诺生物 | 双能x射线骨密度检测仪_dxa骨密度仪_双能x线骨密度仪_品牌厂家【品源医疗】 | 双能x射线骨密度检测仪_dxa骨密度仪_双能x线骨密度仪_品牌厂家【品源医疗】 | Copeland/谷轮压缩机,谷轮半封闭压缩机,谷轮涡旋压缩机,型号规格,技术参数,尺寸图片,价格经销商 CTP磁天平|小电容测量仪|阴阳极极化_双液系沸点测定仪|dsj电渗实验装置-南京桑力电子设备厂 | 南京展台搭建-南京展会设计-南京展览设计公司-南京展厅展示设计-南京汇雅展览工程有限公司 | 温州中研白癜风专科_温州治疗白癜风_温州治疗白癜风医院哪家好_温州哪里治疗白癜风 | 寮步纸箱厂_东莞纸箱厂 _东莞纸箱加工厂-东莞市寮步恒辉纸制品厂 | 天津电机维修|水泵维修-天津晟佳机电设备有限公司 | 铝合金线槽_铝型材加工_空调挡水板厂家-江阴炜福金属制品有限公司 | 品牌策划-品牌设计-济南之式传媒广告有限公司官网-提供品牌整合丨影视创意丨公关活动丨数字营销丨自媒体运营丨数字营销 | 气动调节阀,电动调节阀,自力式压力调节阀,切断阀「厂家」-浙江利沃夫自控阀门 | 智能门锁电机_智能门锁离合器_智能门锁电机厂家-温州劲力智能科技有限公司 | 山东聚盛新型材料有限公司-纳米防腐隔热彩铝板和纳米防腐隔热板以及钛锡板、PVDF氟膜板供应商 | 传动滚筒_厂家-淄博海恒机械制造厂| 低温柔性试验仪-土工布淤堵-沥青车辙试验仪-莱博特(天津)试验机有限公司 | 欧盟ce检测认证_reach检测报告_第三方检测中心-深圳市威腾检验技术有限公司 | 涂层测厚仪_漆膜仪_光学透过率仪_十大创新厂家-果欧电子科技公司 | 换网器_自动换网器_液压换网器--郑州海科熔体泵有限公司 | 广州工业氧气-工业氩气-工业氮气-二氧化碳-广州市番禺区得力气体经营部 | 全自动定氮仪-半自动凯氏定氮仪厂家-祎鸿仪器 | 临沂招聘网_人才市场_招聘信息_求职招聘找工作请认准【马头商标】 | 智能汉显全自动量热仪_微机全自动胶质层指数测定仪-鹤壁市科达仪器仪表有限公司 | 可程式恒温恒湿试验箱|恒温恒湿箱|恒温恒湿试验箱|恒温恒湿老化试验箱|高低温试验箱价格报价-广东德瑞检测设备有限公司 | 欧洲MV日韩MV国产_人妻无码一区二区三区免费_少妇被 到高潮喷出白浆av_精品少妇自慰到喷水AV网站 | AGV叉车|无人叉车|AGV智能叉车|AGV搬运车-江西丹巴赫机器人股份有限公司 | 标准品网_标准品信息网_【中检计量】 | 华禹护栏|锌钢护栏_阳台护栏_护栏厂家-华禹专注阳台护栏、楼梯栏杆、百叶窗、空调架、基坑护栏、道路护栏等锌钢护栏产品的生产销售。 | 搪瓷搅拌器,搪玻璃搅拌器,搪玻璃冷凝器_厂家-淄博越宏化工设备 | 水性漆|墙面漆|木器家具漆|水漆涂料_晨阳水漆官网 | 柔性测斜仪_滑动测斜仪-广州杰芯科技有限公司 | 深圳市万色印象美业有限公司 | 海尔生物医疗四川代理商,海尔低温冰箱四川销售-成都壹科医疗器械有限公司 | 航拍_专业的无人机航拍摄影门户社区网站_航拍网 | 电磁流量计厂家_涡街流量计厂家_热式气体流量计-青天伟业仪器仪表有限公司 | 医学模型生产厂家-显微手术模拟训练器-仿真手术模拟训练系统-北京医教科技 | 涂层测厚仪_光泽度仪_uv能量计_紫外辐照计_太阳膜测试仪_透光率仪-林上科技 | 砂石生产线_石料生产线设备_制砂生产线设备价格_生产厂家-河南中誉鼎力智能装备有限公司 | GAST/BRIWATEC/CINCINNATI/KARL-KLEIN/ZIEHL-ABEGG风机|亚喜科技 | 拉卡拉POS机官网 - 官方直营POS机办理|在线免费领取 | 档案密集架,移动密集架,手摇式密集架,吉林档案密集架-厂家直销★价格公道★质量保证 | 升降机-高空作业车租赁-蜘蛛车-曲臂式伸缩臂剪叉式液压升降平台-脚手架-【普雷斯特公司厂家】 |