快捷導(dǎo)航

Vue3實(shí)現(xiàn)刷新頁(yè)面局部?jī)?nèi)容的示例代碼

更新時(shí)間：2022年07月13日 15:43:02 作者：WEB前端李志杰

本文主要介紹了Vue3實(shí)現(xiàn)刷新頁(yè)面局部?jī)?nèi)容的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

在Vue2中我們除了使用v-if 指令讓局部dom的重新渲染，也可以新建一個(gè)空白組件，需要刷新局部頁(yè)面時(shí)跳轉(zhuǎn)至這個(gè)空白組件頁(yè)面，然后在空白組件內(nèi)的beforeRouteEnter 守衛(wèi)中又跳轉(zhuǎn)回原來(lái)的頁(yè)面。

如下圖所示，如何在Vue3.X中實(shí)現(xiàn)點(diǎn)擊刷新按鈕實(shí)現(xiàn)紅框范圍內(nèi)的dom重新加載，并展示對(duì)應(yīng)的加載狀態(tài)。

在這里插入圖片描述

由于Vue3.X中script setup 語(yǔ)法中組件內(nèi)守衛(wèi)只有onBeforeRouteUpdate 及onBeforeRouteUpdate 兩個(gè)API，因此我們來(lái)借助v-if 指令使局部dom重新渲染來(lái)實(shí)現(xiàn)這一需求。

第一步：定義狀態(tài)標(biāo)識(shí)

在全局狀態(tài)中定義一個(gè)isRouterAlive 標(biāo)識(shí)刷新?tīng)顟B(tài)，根據(jù)isRouterAlive 變化來(lái)重新渲染。isLoading 標(biāo)識(shí)加載狀態(tài)。

import { defineStore } from 'pinia'
export const useAppStore = defineStore({
  id: 'app',
  state: () =>
    ({
      isRouterAlive: true,
      isLoading: false
    } as { isRouterAlive: boolean; isLoading: boolean })
})

第二步、借用v-if 指令讓dom節(jié)點(diǎn)重新渲染

<template>
  <div class="common-layout">
    <el-container>
      <SideMenuView :collapse="isCollapse"></SideMenuView>
      <el-container>
        <NavMenuView v-model:collapse="isCollapse"></NavMenuView>
        <TabsView></TabsView>
        <!--核心 start-->
        <el-main
          v-loading="appStore.isLoading"
          element-loading-text="頁(yè)面加載中……"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <router-view v-if="appStore.isRouterAlive"> </router-view>
        </el-main>
        <!--核心 end-->
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import SideMenuView from './SideMenuView.vue'
import NavMenuView from './NavMenuView.vue'
import TabsView from './TabsView.vue'
import { useAppStore } from '@/stores/app'
const appStore = useAppStore()
const isCollapse = ref(false)
</script>

<style lang="scss" scoped>
…… CSS樣式
</style>

第三步、修改isRouterAlive 值，實(shí)現(xiàn)dom的重新渲染

<template>
  <div
    class="tabs-item cursor-pointer arrow-down"
    ref="buttonRef"
    @click="onClickOutside"
  >
    <el-icon><ArrowDownBold /></el-icon>
  </div>
  <el-popover
    ref="popoverRef"
    trigger="hover"
    virtual-triggering
    :virtual-ref="buttonRef"
  >
    <div class="arrow-down-item" @click="handleCommand('refresh')">刷新</div>
    <div class="arrow-down-item" @click="handleCommand('closeOther')">
      關(guān)閉其他
    </div>
    <div class="arrow-down-item" @click="handleCommand('closeLeft')">
      關(guān)閉左側(cè)
    </div>
    <div class="arrow-down-item" @click="handleCommand('closeRight')">
      關(guān)閉右側(cè)
    </div>
  </el-popover>
</template>

<script setup lang="ts">
import { CloseBold, ArrowDownBold } from '@element-plus/icons-vue'
import type { MenuItem } from '@/interface/menu'
import { useMenuRouterStore } from '@/stores/menu-router'
import { useTabsStore } from '@/stores/tabs'
import { useAppStore } from '@/stores/app'
const router = useRouter()
const menuRouterStore = useMenuRouterStore()
const tabsStore = useTabsStore()
const appStore = useAppStore()
// tabs功能操作
const buttonRef = ref()
const popoverRef = ref()
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.()
}
const handleCommand = (command: string) => {
  if (command === 'refresh') {
    appStore.isLoading = true // 展示數(shù)據(jù)加載狀態(tài)
    appStore.isRouterAlive = false // 設(shè)置為false，卸載dom
    setTimeout(() => { // 此處采用了定時(shí)器，并沒(méi)有采用網(wǎng)上比較常見(jiàn)的nextTick
      appStore.isRouterAlive = true // 設(shè)置為true，重新掛載dom
      appStore.isLoading = false // 隱藏?cái)?shù)據(jù)加載狀態(tài)
    }, 500)
  } else if (command === 'closeOther') {
    tabsStore.closeOther()
  } else {
    tabsStore.closeLeftOrRight(command)
  }
}
// ……
</script>

<style lang="scss" scoped>
…… CSS樣式
</style>

到此這篇關(guān)于Vue3實(shí)現(xiàn)刷新頁(yè)面局部?jī)?nèi)容的示例代碼的文章就介紹到這了,更多相關(guān)Vue3 刷新頁(yè)面局部?jī)?nèi)容內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: