vue element el-progress组件增强,鼠标移动到组件上时会触发一个回弹动画效果
有时候需求就是这么奇怪，要求鼠标移动到组件上面有一个动画回弹效果
组件代码如下（ts写法）
1 <template> 2 <div @mouseover="onMouseover" @mouseout="onMouseout"> 3 <el-progress 4 v-bind="$attrs" 5 :percentage="showPercentage" 6 v-on="$listeners" 7 ></el-progress> 8 </div> 9 </template> 10 <script lang="ts"> 11 import { Component, Vue, Watch, Prop } from "vue-property-decorator"; 12 /** 13 * 14 * el-progress组件增强 15 * 当鼠标移动到组件上时会触发一个动画效果 16 * 17 * 用法和el-progress一样 18 * 19 */ 20 @Component({ 21 name: "ZbProgress" 22 }) 23 export default class ZbProgress extends Vue { 24 // 百分比 25 @Prop() percentage!: any; 26 // 监听百分比数值 27 @Watch("percentage", { immediate: true }) 28 updatePercentage(v: number) { 29 // 因为需要通过改变百分比来实现动画效果 30 // 所以这里将具体值赋值给一个内部字段 31 this.showPercentage = v; 32 } 33 // 动画执行时间（毫秒） 34 @Prop({ default: 200 }) animationTime!: number; 35 // 动画波动百分比变化范围 36 // 可以为负值 37 @Prop({ default: 30 }) animationRange!: number; 38 // 百分比显示值 39 showPercentage: number = 0; 40 41 // 是否正在执行动画 42 isAnimationIng: boolean = false; 43 // 上传鼠标离开元素时间 44 outTime: number = 0; 45 // 当鼠标移动到元素内时 46 onMouseover() { 47 // console.log("onMouseover鼠标移动到"); 48 // 获取鼠标上次离开时间 49 const outTime = this.outTime; 50 // 是否执行动画 51 let is = true; 52 if (outTime) { 53 // 如果上次离开时间与当前时间间隔太短 54 // 说明鼠标并没有真正的离开当前元素，只是在内部移动 55 // 此时不执行动画 56 is = new Date().getTime() - outTime > 100; 57 } 58 if (is) { 59 // 执行动画 60 this.showAnimation(this.showPercentage); 61 } 62 } 63 // 当鼠标离开时 64 onMouseout() { 65 // console.log("onMouseout鼠标离开"); 66 // 记录当前离开时间 67 this.outTime = new Date().getTime(); 68 } 69 // 执行动画 70 showAnimation(v: number) { 71 const me = this as any; 72 // 如果没用正在执行动画 73 if (!me.isAnimationIng) { 74 // 标识动画效果正则执行 75 me.isAnimationIng = true; 76 const { 77 // 动画波动百分比变化范围 78 animationRange, 79 // 动画执行时间（毫秒） 80 animationTime 81 } = me; 82 // 获取下个动画波动值 83 let percentage = v - animationRange; 84 // 将波动值限制到0-100 85 if (percentage <= 0) { 86 percentage = 0; 87 } else if (percentage >= 100) { 88 percentage = 100; 89 } 90 // 设置动画波动值 91 me.showPercentage = percentage; 92 setTimeout(() => { 93 // 延迟执行重置百分比，这样就能实现一个波动动效 94 me.showPercentage = v; 95 setTimeout(() => { 96 // 延迟标识动画效果已经结束 97 me.isAnimationIng = false; 98 }, 200); 99 }, animationTime); 100 } 101 } 102 } 103 </script>
使用
<template>
<div>
<zb-progress :show-text="false" :stroke-width="26" :percentage="70" :animationRange="-30">
</zb-progress>
<br />
<zb-progress :show-text="false" :stroke-width="26" :percentage="30">
</zb-progress>
<br />
<zb-progress :show-text="false" :stroke-width="26" :percentage="15" :animationTime='1000'>
</zb-progress>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({ name: "elementProgress" })
export default class elementProgress extends Vue {}
</script>
