成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Vue3實現(xiàn)刷新頁面局部內(nèi)容的示例代碼

3403771864 / 1155人閱讀

　　可以用實現(xiàn)局部組件（dom）的重新渲染可以實現(xiàn)頁面的局部刷新。有一個最簡單辦法，我們可以用Vue中的v-if指令來實現(xiàn)。

　　我們的思路是：除了上述用Vue中的v-if指令來實現(xiàn)，我們也可以用另一個方法就是新建一個空白組件，需要刷新局部頁面時跳轉(zhuǎn)至這個空白組件頁面，然后在空白組件內(nèi)的beforeRouteEnter守衛(wèi)中又跳轉(zhuǎn)回原來的頁面。

　　如下圖所示，在Vue3.X中不僅可以實現(xiàn)點(diǎn)擊刷新，按鈕實現(xiàn)紅框范圍內(nèi)的dom重新加載，也可以展現(xiàn)出正在加載頁面。

1.png

2.png

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

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

　　在全局狀態(tài)中定義一個isRouterAlive標(biāo)識刷新狀態(tài)，根據(jù)isRouterAlive變化來重新渲染。isLoading標(biāo)識加載狀態(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>
　　<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="頁面加載中……"
　　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>
　　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 scoped>
　　…… CSS樣式
　　</style>

　　第三步、修改isRouterAlive 值，實現(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 @click="handleCommand('refresh')">刷新</div>
　　<div @click="handleCommand('closeOther')">
　　關(guān)閉其他
　　</div>
　　<div @click="handleCommand('closeLeft')">
　　關(guān)閉左側(cè)
　　</div>
　　<div @click="handleCommand('closeRight')">
　　關(guān)閉右側(cè)
　　</div>
　　</el-popover>
　　</template>
　　<script setup>
　　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(() => { // 此處采用了定時器，并沒有采用網(wǎng)上比較常見的nextTick
　　appStore.isRouterAlive = true // 設(shè)置為true，重新掛載dom
　　appStore.isLoading = false // 隱藏數(shù)據(jù)加載狀態(tài)
　　}, 500)
　　} else if (command === 'closeOther') {
　　tabsStore.closeOther()
　　} else {
　　tabsStore.closeLeftOrRight(command)
　　}
　　}
　　// ……
　　</script>
　　<style scoped>
　　…… CSS樣式
　　</style>

      上述全部內(nèi)容，大家多多關(guān)注。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.hztianpu.com/yun/127782.html

相關(guān)文章

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點(diǎn)擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    sutaking 評論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點(diǎn)擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    khs1994 評論0 收藏0

  • 剖析Vue3中偵聽器watch的使用教程

    　　上一節(jié)我們簡單的介紹了一下vue3 項目中的計算屬性，這一節(jié)我們繼續(xù) vue3 的基礎(chǔ)知識講解。　　這一節(jié)我們來說 vue3 的偵聽器?！　W(xué)過 vue2 的小伙伴們肯定學(xué)習(xí)過偵聽器，主要是用來監(jiān)聽頁面數(shù)據(jù)或者是路由的變化，來執(zhí)行相應(yīng)的操作，在 vue3里面呢，也有偵聽器的用法，功能基本一樣，換湯不換藥的東西。 偵聽器是常用的 Vue API 之一，它用于監(jiān)聽一個數(shù)據(jù)并在數(shù)據(jù)變動時做一些自定義...

    3403771864 評論0 收藏0

  • vue3集成Element-plus實現(xiàn)按需自動引入組件的方法匯總

    　　本篇文章就是介紹關(guān)于vue3集成Element-plus實現(xiàn)按需自動引入組件的相關(guān)資料,為了讓大家詳細(xì)了解，附有詳細(xì)內(nèi)容?！　lement-plus正是element-ui針對于vue3開發(fā)的一個UI組件庫，　　它的使用方式和很多其他的組件庫是一樣的，其他類似于ant-design-vue、NaiveUI、VantUI都是差不多的；安裝element-plus　　首先下載element-pl...

    3403771864 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<