需要使用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);
}
然后点击这个盒子就可以旋转起来了