脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue进度条内部显示图片

vue圆形进度条环形进度条组件内部显示图片示例

 更新时间：2023年11月12日 11:44:34   作者：李渊桥  
这篇文章主要为大家介绍了vue圆形进度条环形进度条组件内部显示图片示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

借鉴 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5中的SVG属性实现圆形进度条效果</title>
    <style>
        #a{color:red;}
    </style>
</head>
<body>
<svg width="440" height="440">
    <text style="fill:black;" font-size="80" x="160" y="240" width="440" height="440" id="a">30%</text>
    <circle cx="220" cy="220" r="170" stroke-width="40" stroke="#C9CACA" fill="none"></circle>
    <circle id="c1" cx="220" cy="220" r="170" stroke-width="40" stroke="#E73468" fill="none"
            transform="matrix(0,-1,1,0,0,440)" stroke-dasharray=""></circle>
</svg>
<script>
    var circle = document.getElementById("c1");
    var a = document.getElementById("a").innerHTML;
    var b=parseInt(a)/100;
        var percent = 0, perimeter = Math.PI * 2 * 170;
    setInterval(function () {
        if(percent<b){
            circle.setAttribute('stroke-dasharray', perimeter * percent + " " + perimeter * (1- percent));
            percent+=1/100;
        }
    },100);

</script>
</body>
</html>

cycle.vue详细内容

<template>
    <div class="cycle_box" style="position: relative;" :style="{width:width+'px',height:width+'px'}">                    
        <svg :width="width" :height="width" >            
            <circle :cx="cyclePosition" :cy="cyclePosition" :r="radius" :stroke-width="strokeWidth" :stroke="backgroundColor" fill="none"     ></circle>
            <circle :cx="cyclePosition" :cy="cyclePosition" :r="radius" :stroke-width="strokeWidth" :stroke="progressColor" fill="none"  
                :stroke-dasharray="dasharray"  :transform="transform"   class="cycle_out"></circle>
        </svg>
        <img :src="imgUrl" alt="" v-if="imgUrl!=''" class="cycle_img" />  
        <div class="cycle_text" v-if="imgUrl==''" style="font-size: 13.1111px; color: rgb(96, 98, 102);">{{progress}}%</div>      
    </div>
</template>
<script>
  export default {
    name:"cycle",
    props: {
        progress: {type: Number, default: 0},//进度条进度
        width: {type: Number, default: 140},//整个宽度
        strokeWidth: {type: Number, default: 10},//进度条宽度
        textClass: {type: String, default: "cycle-text"},//中间文字的类名
        backgroundColor: {type: String, default: "#ebeef5"},//进度条背景颜色
        progressColor: {type: String, default: "#20a0ff"},//进度条背景颜色
        imgUrl: {type: String, default: ""},//显示的图片
    },
    data (){
        return {  
            perimeter :Math.PI * 2 * 40,       
            radius:0,//半径
            dasharray:0,
            cyclePosition:0,
            transform:"rotate(270,60,60)"
            }        
    },
    mounted(){
        let percent=(this.progress/100)        
        this.radius=Math.floor((this.width-this.strokeWidth)/2)
        this.cyclePosition=this.width/2
        this.perimeter=Math.PI * 2 * this.radius
        this.dasharray=this.perimeter * percent + " " + this.perimeter * (1- percent)
        this.transform=`rotate(270,${this.cyclePosition},${this.cyclePosition})`
        console.log(this.dasharray, this.transform,this.cyclePosition,this.perimeter,this.radius)
    },
    methods:{
    }
  }
  </script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.cycle_out{
    stroke-linecap:round;
}
.cycle_img{
    position: absolute;
    top: 50%;
    left: 40%;
    width: 20%;
    text-align: center;
    margin: 0;
    transform: translate(0,-50%);
}
.cycle_text{
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    margin: 0;
    transform: translate(0,-50%);
}
</style>

引用方式

js

import cycle from "../../components/Cycle.vue"
  components: {
        cycle,
    },
 data (){
        return {  
            imageUrl: require('../../assets/woman.svg'),
            }        
    },

模版部分

<cycle :progress="80" :width="100" :stroke-width="12" :imgUrl="imageUrl"></cycle>

 注意图片的引用方式 否则可能无法显示

如果不传imgUrl 就会显示百分比数字

其他的根据自己需要修改吧

写这部分主要是element不满足内部显示图片的需求

以上就是vue圆形进度条环形进度条组件内部显示图片示例的详细内容，更多关于vue进度条内部显示图片的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 关于Vue如何清除缓存的方法详解

    关于Vue如何清除缓存的方法详解

    缓存清除成为克服浏览器缓存中过时内容挑战的关键技术,术语“缓存清除”是指故意使静态资源失效或进行版本控制,迫使浏览器在发生更改时获取新资源,本文给大家介绍了Vue如何清除缓存,需要的朋友可以参考下
    2023-12-12
  • 解决vue-cli3 使用子目录部署问题

    解决vue-cli3 使用子目录部署问题

    这篇文章主要介绍了解决vue-cli3 使用子目录部署问题,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-07-07
  • Vue ElementUI this.$confirm async await封装方式

    Vue ElementUI this.$confirm async await封

    这篇文章主要介绍了Vue ElementUI this.$confirm async await封装方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • 聊聊Vue.js的template编译的问题

    聊聊Vue.js的template编译的问题

    这篇文章主要介绍了聊聊Vue.js的template编译的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • vue线上部署请求接口报错net::ERR_CONNECTION_REFUSED

    vue线上部署请求接口报错net::ERR_CONNECTION_REFUSED

    vue线上部署请求接口报错net::ERR_CONNECTION_REFUSED问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • Vue动态控制input的disabled属性的方法

    Vue动态控制input的disabled属性的方法

    这篇文章主要介绍了Vue动态控制input的disabled属性的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • 详解vue项目中实现图片裁剪功能

    详解vue项目中实现图片裁剪功能

    这篇文章主要介绍了vue项目中实现图片裁剪功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • 详解Vue中的自定义渲染器和异步渲染

    详解Vue中的自定义渲染器和异步渲染

    这篇文章主要为大家详细介绍了Vue中的自定义渲染器和异步渲染的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • vue内置动态组件component使用示例小结

    vue内置动态组件component使用示例小结

    component是vue内置组件,主要作用为动态渲染组件,这篇文章主要介绍了vue内置动态组件component使用示例小结,需要的朋友可以参考下
    2024-03-03
  • vue elementUi中的tabs标签页使用教程

    vue elementUi中的tabs标签页使用教程

    Tabs 组件提供了选项卡功能,默认选中第一个标签页,下面这篇文章主要给大家介绍了关于vue elementUi中的tabs标签页使用的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-03-03

最新评论