Element plus的RefreshLeft图标旋转3秒停止的实现方案

72 阅读1分钟

check.png

需要使用RefreshLeft图标,一般都要使用到旋转功能,但是根据element plus官网的在标签上 加上is-loading,会使这个图标一直旋转无法停止,我们想要的是旋转3秒就能停止的效果,实现操作如下

1 给图标的div盒子加ref='isloading',名字顺便取

 <div class="check" ref="isloading" @click="flushed">
     <RefreshLeft style="color: #FFFFFF;width: 2.0625rem;height: 2.0625rem;" />
 </div>

2.在script标签中用ref获取并操作dom元素

// 点击刷新按钮的方法
const isloading = ref()
function flushed() {
animation
    //顺时针1.5秒一圈,3秒钟停止刚好两圈
    isloading.value.style.animation = 'rotating 1.5s linear infinite reverse'
    //计时器,设置停止时间
    setTimeout(() => {
        isloading.value.style.animation = ''
    }, 3000);
}

然后点击这个盒子就可以旋转起来了