记录网页的刷新和全屏按钮功能实现

**网页刷新 **

就是用浏览器的location API location.reload()

<el-tooltip
  class="box-item"
  effect="dark"
  content="刷新"
  placement="bottom"
>
  <el-icon @click="handleRefresh" class="icon-btn"><Refresh /></el-icon>
</el-tooltip>
    
// 刷新页面
const handleRefresh = () => {
  location.reload()
}
    

网页全屏 使用vueuse 的hook - useFullscreen

• isFullscreen 是否全屏状态
• toggle 切换全屏状态
• enter 进入全屏状态
• exit 退出全屏状态

绑定其中的toggle就可以切换全屏状态

使用方法：

<el-tooltip
    class="box-item"
    effect="dark"
    content="全屏"
    placement="bottom"
>
    <!-- 绑定vueuse的核心事件：toggle -->
    <el-icon class="icon-btn" @click="toggle">
      <FullScreen v-if="!isFullscreen" />
      <aim v-else />
    </el-icon>
</el-tooltip>

import { useFullscreen } from '@vueuse/core' 
const { isFullscreen, enter, exit, toggle } = useFullscreen()