witRefresh 刷新组件

witRefresh是一个提供页面刷新功能的组件，点击时触发路由视图重新加载，并显示旋转动画效果。组件使用了事件总线机制实现全局刷新通知，支持手动点击刷新和外部事件触发刷新。

用法实例

<template>
  <div>
    <!-- 基本用法 -->
    <witRefresh />
    
    <!-- 配合其他组件使用 -->
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item>
        <witRefresh /> 刷新页面
      </el-dropdown-item>
    </el-dropdown-menu>
  </div>
</template>

<script lang="ts" setup>
// 外部触发刷新动画的示例
const handleExternalRefresh = () => {
  $pub('refresh-rotate')
}
</script>

API

属性名	类型	默认值	描述
无	-	-	组件无需外部传入属性

插槽

插槽名	描述
无	组件不提供插槽

事件

事件名	描述	参数
无	组件不直接触发事件，通过事件总线通信	-

TIP

组件支持两种刷新触发方式：

1. 手动点击：直接点击刷新图标触发页面刷新
2. 外部事件：通过事件总线 $pub('refresh-rotate') 触发刷新动画

刷新时会显示500毫秒的旋转动画，动画结束后自动恢复初始状态。

组件依赖事件总线机制实现页面刷新功能，需要确保项目中已配置相关事件总线。

功能说明

1. 页面刷新：点击组件触发路由视图重新加载
2. 旋转动画：刷新时显示旋转动画效果，提供视觉反馈
3. 事件驱动：支持通过事件总线外部触发刷新动画
4. 自动恢复：动画结束后自动恢复初始状态

核心代码解析

// 旋转动画控制
const rotate = () => {
  className.value = 'rotate'  // 添加旋转类名
  useTimeoutFn(() => {
    className.value = ''      // 500毫秒后移除旋转类名
  }, 500)
}

// 刷新路由视图
const refreshRoute = () => {
  $pub('reload-router-view')  // 发布刷新事件
  rotate()                    // 触发旋转动画
}

// 监听外部刷新事件
onBeforeMount(() => {
  $sub('refresh-rotate', () => {
    rotate()  // 执行旋转动画
  })
})

依赖说明

依赖项	用途
wit-icon	提供刷新图标显示
useTimeoutFn	实现动画延时控制
$pub/$sub	事件总线，实现组件间通信
onBeforeMount	Vue生命周期钩子，组件挂载前执行初始化逻辑
defineOptions	Vue 3 API，定义组件选项