没有弄动图,大概就是悬浮时从0%到100%,一个顺时针充满的效果。
最一开始是想到利用element这的progress环形进度条组件来实现,鼠标移入时将percentage从0设为100,移除时再设为0即可。
底下的那个圆环不想要灰色、中间不想要文字,可以这样设置:
/deep/ .el-progress__text{ display:none; } .el-progress /deep/ path:first-child { stroke: #cff4e1; }
后面研究了一下element实现这个的原理,是用svg path 画圆,再利用 Stroke 属性,主要是stroke-dasharray 属性画虚线的功能。自己写了一个,代码如下:
<template> <div> <div v-for="(i,index) in showList" :key="index" @mouseover="turnShow(index)" @mouseleave="turnHidden(index)" class="main" :class="{'show':i,'noshow':!i}"> <svg width="100" height="100"> <!--底下那个圈--> <path fill="none" d="M 50 50 m -46 0 a 46 46 0 1 1 92 0 a 46 46 0 1 1 -92 0" stroke="pink" stroke-width="8px" stroke-linecap="round"/> <!--会动的那个圈--> <path fill="none" d="M 50 50 m -46 0 a 46 46 0 1 1 92 0 a 46 46 0 1 1 -92 0" stroke-width="0px" stroke-linecap="round" stroke-dasharray="0,290"/> <text x="18" y="55" fill="red">I love SVG</text> </svg> </div> </div> </template> <script> export default { data() { return { showList: [false, false, false, false] } }, methods: { turnShow(index) { this.$set(this.showList, index, true) }, turnHidden(index) { this.$set(this.showList, index, false) } } } </script> <style lang="less" scoped> .main{ width:100px; display:inline-block; margin-right:100px; } .show{ path:nth-child(2){ stroke:red; stroke-width: 8px; stroke-dasharray: 290,290; transition: stroke-dasharray 0.6s; } } .noshow{ path:nth-child(2){ stroke:pink; // 消失的时候不需要渐变消失就用这行 // stroke-width: 0px; stroke-width: 8px; stroke-dasharray: 0,290; // 消失的时候不需要渐变消失就用这行 // transition: stroke-dasharray 0.6s // 设置颜色变化的延时时间为0.5s是大概试出来的一个时间,不是绝对完美 // 设为0.6的话鼠标移动很快的话,会感觉很不顺畅 transition: stroke-dasharray 0.6s,stroke 0s linear 0.5s; } } </style>
参考链接:
svg path画圆看的这篇:https://blog.csdn.net/cdc_csdn/article/details/80473541