<template> <div class="wrap"> <div class="circle" v-bind:class="{ 'clip-auto': isActive.circle }"> <div class="percent left" ref='left' v-bind:style="{ '-webkit-transform':'rotate('+(18/5)*InitialVal+'deg)', '-ms-transform':'rotate('+(18/5)*InitialVal+'deg)', '-moz-transform':'rotate('+(18/5)*InitialVal+'deg)', 'transform':'rotate('+(18/5)*InitialVal+'deg)' }"></div> <div class="percent right" v-bind:class="{'wth0': isActive.right }"></div> </div> <div class="num">{{InitialVal }}</div> <div class="ring-title"> <h3>{{datas.title}}</h3> <p class="ellipsis">{{datas.description}}</p> </div> </div> </template> <script> export default { data () { return { msg : 'ring', InitialVal : 0, isActive : { circle : false, right : true } } }, props:{ 'datas':Object, // 'sum':Number, // 'titles':String, // 'description':String, }, methods:{ }, mounted(){//挂载结束调用的函数 var percent = 0 var sum = this.datas.sum; var _this = this; var loading=setInterval(function(){ if(percent == sum){ clearTimeout(loading); } if(percent>50){ _this.isActive.right = false; _this.isActive.circle = true; } _this.InitialVal = percent; percent++; },10); } } </script> <style lang='scss' scoped> *{ margin: 0; padding: 0; } .wrap,.circle,.percent{ position: absolute; width: 100px; height: 100px; border-radius: 50%; } .wrap{ position: relative; top:50px; left:50px; display: inline-block; background-color: #ccc; } .circle{ box-sizing: border-box; border:20px solid #ccc; clip:rect(0,100px,100px,50px); } .clip-auto{ clip:rect(auto, auto, auto, auto); } .percent{ box-sizing: border-box; top:-20px; left:-20px; } .left{ transition:transform ease; border:20px solid #00ff00; clip: rect(0,50px,100px,0); } .right{ border:20px solid #00ff00; clip: rect(0,100px,100px,50px); } .wth0{ width:0; } .num{ position: absolute; box-sizing: border-box; width: 60px; height: 60px; line-height: 60px; text-align: center; font-size: 40px; left: 20px; top: 20px; border-radius: 50%; background-color: #fff; z-index: 1; } .ring-title{ width: 100%; position: absolute; bottom: -50px; text-align: center; } </style>
Vue实现环形进度条方法组件
为什么80%的码农都做不了架构师?>>>...
·
转载于:https://my.oschina.net/lslDn/blog/1935974
更多推荐
已为社区贡献893条内容
所有评论(0)