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

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

Vue實現圓環進度條的示例

瀏覽:4日期: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
相關文章:
主站蜘蛛池模板: 智能监控-安防监控-监控系统安装-弱电工程公司_成都万全电子 | 北京普辉律师事务所官网_北京律师24小时免费咨询|法律咨询 | 微妙网,专业的动画师、特效师、CG模型设计师网站! - wmiao.com 超声波电磁流量计-液位计-孔板流量计-料位计-江苏信仪自动化仪表有限公司 | 成都装修公司-成都装修设计公司推荐-成都朗煜装饰公司 | 手术示教系统-数字化手术室系统-林之硕医疗云智能视频平台 | 办公室装修_上海办公室设计装修_时尚办公新主张-后街印象 | 铁素体测量仪/检测仪/铁素体含量测试仪-苏州圣光仪器有限公司 | 节流截止放空阀-不锈钢阀门-气动|电动截止阀-鸿华阀门有限公司 | 滁州高低温冲击试验箱厂家_安徽高低温试验箱价格|安徽希尔伯特 | 在线浊度仪_悬浮物污泥浓度计_超声波泥位计_污泥界面仪_泥水界面仪-无锡蓝拓仪表科技有限公司 | 天津仓库出租网-天津电商仓库-天津云仓一件代发-【博程云仓】 | 高效复合碳源-多核碳源生产厂家-污水处理反硝化菌种一长隆科技库巴鲁 | 生态板-实木生态板-生态板厂家-源木原作生态板品牌-深圳市方舟木业有限公司 | 广东健伦体育发展有限公司-体育工程配套及销售运动器材的体育用品服务商 | 全球化工设备网—化工设备,化工机械,制药设备,环保设备的专业网络市场。 | 皮带输送机-大倾角皮带输送机-皮带输送机厂家-河南坤威机械 | 专业甜品培训学校_广东糖水培训_奶茶培训_特色小吃培训_广州烘趣甜品培训机构 | 不锈钢法兰-碳钢法兰-法兰盘生产加工厂家-[鼎捷峰]-不锈钢法兰-碳钢法兰-法兰盘生产加工厂家-[鼎捷峰] | 工业胀紧套_万向节联轴器_链条-规格齐全-型号选购-非标订做-厂家批发价格-上海乙谛精密机械有限公司 | 视频直播 -摄影摄像-视频拍摄-直播分发| 安徽免检低氮锅炉_合肥燃油锅炉_安徽蒸汽发生器_合肥燃气锅炉-合肥扬诺锅炉有限公司 | 北京易通慧公司从事北京网站优化,北京网络推广、网站建设一站式服务商-北京网站优化公司 | 篷房[仓储-婚庆-展览-活动]生产厂家-江苏正德装配式帐篷有限公司 | 山东PE给水管厂家,山东双壁波纹管,山东钢带增强波纹管,山东PE穿线管,山东PE农田灌溉管,山东MPP电力保护套管-山东德诺塑业有限公司 | 博博会2021_中国博物馆及相关产品与技术博览会【博博会】 | 自动化展_机器人展_机床展_工业互联网展_广东佛山工博会 | 临海涌泉蜜桔官网|涌泉蜜桔微商批发代理|涌泉蜜桔供应链|涌泉蜜桔一件代发 | YT保温材料_YT无机保温砂浆_外墙保温材料_南阳银通节能建材高新技术开发有限公司 | 汽车整车综合环境舱_军标砂尘_盐雾试验室试验箱-无锡苏南试验设备有限公司 | CCC验厂-家用电器|服务器CCC认证咨询-奥测世纪 | KBX-220倾斜开关|KBW-220P/L跑偏开关|拉绳开关|DHJY-I隔爆打滑开关|溜槽堵塞开关|欠速开关|声光报警器-山东卓信有限公司 | 上海单片机培训|重庆曙海培训分支机构—CortexM3+uC/OS培训班,北京linux培训,Windows驱动开发培训|上海IC版图设计,西安linux培训,北京汽车电子EMC培训,ARM培训,MTK培训,Android培训 | 山东石英砂过滤器,除氟过滤器「价格低」-淄博胜达水处理 | 电子厂招聘_工厂招聘_普工招聘_小时工招聘信息平台-众立方招工网 | 氧化铝球_高铝球_氧化铝研磨球-淄博誉洁陶瓷新材料有限公司 | 超声波焊接机,振动摩擦焊接机,激光塑料焊接机,超声波焊接模具工装-德召尼克(常州)焊接科技有限公司 | 深圳快餐店设计-餐饮设计公司-餐饮空间品牌全案设计-深圳市勤蜂装饰工程 | 合景一建-无尘车间设计施工_食品医药洁净车间工程装修总承包公司 | 无锡网站建设_企业网站定制-网站制作公司-阿凡达网络 | 神马影院-实时更新秒播 | 「安徽双凯」自动售货机-无人售货机-成人用品-自动饮料食品零食售货机 |