欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vben Admin 多標(biāo)簽頁(yè)狀態(tài)管理源碼學(xué)習(xí)

 更新時(shí)間:2022年09月01日 11:23:27   作者:Andurils  
這篇文章主要為大家介紹了Vben Admin 多標(biāo)簽頁(yè)狀態(tài)管理源碼學(xué)習(xí),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

引言

本文將對(duì) Vue-Vben-Admin 的狀態(tài)管理實(shí)現(xiàn)源碼進(jìn)行分析解讀,耐心讀完,相信您一定會(huì)有所收獲!

multipleTab.ts 系統(tǒng)鎖屏

文件 src\store\modules\multipleTab.ts 聲明導(dǎo)出一個(gè)store實(shí)例 useMultipleTabStore 、一個(gè)方法 useMultipleTabWithOutStore()用于沒(méi)有使用 setup 組件時(shí)使用。

// 多標(biāo)簽頁(yè)信息存儲(chǔ)
export const useMultipleTabStore = defineStore({
  id: 'app-multiple-tab',
  state: { /*...*/ },
  getters: { /*...*/ }
  actions:{ /*...*/ }   
});
export function useMultipleTabWithOutStore() {
  return useMultipleTabStore(store);
}

State/Getter

狀態(tài)對(duì)象定義了標(biāo)簽頁(yè)路由列表、緩存標(biāo)簽頁(yè)名稱以及最后一次拖動(dòng)標(biāo)簽的索引。同時(shí)提供了對(duì)應(yīng)方法用于獲取該狀態(tài)值。

// 多標(biāo)簽頁(yè)狀態(tài)
export interface MultipleTabState { 
  cacheTabList: Set<string>;  // 緩存標(biāo)簽頁(yè)路由名稱 
  // 標(biāo)簽頁(yè)路由列表   RouteLocationNormalized  路由記錄的標(biāo)準(zhǔn)化版本
  tabList: RouteLocationNormalized[];  
  lastDragEndIndex: number; // 最后一次拖動(dòng)標(biāo)簽的索引
} 
state: (): MultipleTabState => ({ 
  cacheTabList: new Set(), 
  tabList: cacheTab ? Persistent.getLocal(MULTIPLE_TABS_KEY) || [] : [],  // 優(yōu)先加載緩存/本地存儲(chǔ)內(nèi)容
  lastDragEndIndex: 0,
}),
getters: {
  // 獲取標(biāo)簽頁(yè)路由列表
  getTabList(): RouteLocationNormalized[] {
    return this.tabList;
  },
  // 獲取緩存標(biāo)簽頁(yè)路由名稱列表
  getCachedTabList(): string[] {
    return Array.from(this.cacheTabList);
  },
  // 獲取最后一次拖動(dòng)標(biāo)簽的索引
  getLastDragEndIndex(): number {
    return this.lastDragEndIndex;
  },
}, 

Actions

方法 addTab 方法用于打開(kāi)標(biāo)簽頁(yè)。

  • 判斷當(dāng)前打開(kāi)是否特殊頁(yè)面(錯(cuò)誤處理/登錄/重定向)。
  • 若存在已經(jīng)打開(kāi)路徑相同的標(biāo)tianj簽頁(yè),更新其標(biāo)簽頁(yè)路由記錄,否則添加新頁(yè)面路由記錄。
  • 更新需要緩存的標(biāo)簽頁(yè)路由名稱,使用本地存儲(chǔ)持久化。
// 打開(kāi)標(biāo)簽頁(yè)
async addTab(route: RouteLocationNormalized) {
  // 路由基本屬性
  const { path, name, fullPath, params, query, meta } = getRawRoute(route);
  // 錯(cuò)誤處理頁(yè)面 登錄 重定向 等頁(yè)面
  if (
    path === PageEnum.ERROR_PAGE ||
    path === PageEnum.BASE_LOGIN ||
    !name ||
    [REDIRECT_ROUTE.name, PAGE_NOT_FOUND_ROUTE.name].includes(name as string)
  ) {
    return;
  }
  let updateIndex = -1;
  // 標(biāo)簽頁(yè)已經(jīng)存在,不在重復(fù)添加標(biāo)簽
  const tabHasExits = this.tabList.some((tab, index) => {
    updateIndex = index;
    return (tab.fullPath || tab.path) === (fullPath || path);
  });
  // 標(biāo)簽已經(jīng)存在,執(zhí)行更新操作
  if (tabHasExits) {
    const curTab = toRaw(this.tabList)[updateIndex]; // 獲取當(dāng)前標(biāo)簽頁(yè)路由記錄
    if (!curTab) {
      return;
    }
    curTab.params = params || curTab.params; // 從 path 中提取的已解碼參數(shù)字典
    curTab.query = query || curTab.query; // 從 URL 的 search 部分提取的已解碼查詢參數(shù)的字典。
    curTab.fullPath = fullPath || curTab.fullPath; // URL 編碼與路由地址有關(guān)。包括 path、 query 和 hash。
    this.tabList.splice(updateIndex, 1, curTab); // 替換原有的標(biāo)簽頁(yè)路由記錄
  } else {
    // 添加標(biāo)簽頁(yè)
    // 獲取動(dòng)態(tài)路由打開(kāi)數(shù),超過(guò) 0 即代表需要控制打開(kāi)數(shù)
    const dynamicLevel = meta?.dynamicLevel ?? -1;
    if (dynamicLevel > 0) {
      // 如果設(shè)置大于 0 了,那么就要限制該路由的打開(kāi)數(shù)限制了
      // 首先獲取到真實(shí)的路由,使用配置方式減少計(jì)算開(kāi)銷(xiāo).
      // const realName: string = path.match(/(\S*)\//)![1];
      const realPath = meta?.realPath ?? '';
      // 獲取到已經(jīng)打開(kāi)的動(dòng)態(tài)路由數(shù), 判斷是否大于某一個(gè)值
      if (
        this.tabList.filter((e) => e.meta?.realPath ?? '' === realPath).length >= dynamicLevel
      ) {
        // 關(guān)閉第一個(gè)
        const index = this.tabList.findIndex((item) => item.meta.realPath === realPath);
        index !== -1 && this.tabList.splice(index, 1);
      }
    }
    this.tabList.push(route); // 添加至路由列表中
  }
  this.updateCacheTab();
  // 使用本地存儲(chǔ)持久化
  cacheTab && Persistent.setLocal(MULTIPLE_TABS_KEY, this.tabList);
},

方法updateCacheTab用于更新需要緩存的標(biāo)簽頁(yè)路由名稱,返回一個(gè) Set 集合。若路由中meta中設(shè)置ignoreKeepAlivetrue,該標(biāo)簽頁(yè)不會(huì)被緩存。

// 根據(jù)當(dāng)前打開(kāi)的標(biāo)簽更新緩存
async updateCacheTab() {
  // Set 集合存儲(chǔ)
  const cacheMap: Set<string> = new Set();
  for (const tab of this.tabList) {
    const item = getRawRoute(tab);
    // 若忽略KeepAlive緩存 不緩存
    const needCache = !item.meta?.ignoreKeepAlive;
    if (!needCache) {
      continue;
    }
    const name = item.name as string;
    cacheMap.add(name);
  }
  this.cacheTabList = cacheMap; // 存儲(chǔ)路由記錄名稱的 Set 集合
},

方法setTabTitle使用meta屬性,將最新標(biāo)題內(nèi)容附加到路由上。

// 設(shè)置標(biāo)簽標(biāo)題
async setTabTitle(title: string, route: RouteLocationNormalized) {
  const findTab = this.getTabList.find((item) => item === route);
  if (findTab) {
    findTab.meta.title = title; // meta實(shí)現(xiàn) 設(shè)置每個(gè)頁(yè)面的title標(biāo)題
    await this.updateCacheTab();
  }
},

在標(biāo)簽頁(yè)組件中,根據(jù)傳入打開(kāi)頁(yè)面路由記錄tabItem,標(biāo)簽頁(yè)標(biāo)題名稱綁定計(jì)算屬性 getTitle 。

// src\layouts\default\tabs\components\TabContent.vue 
<template>
  <Dropdown :dropMenuList="getDropMenuList" :trigger="getTrigger" @menu-event="handleMenuEvent">
    <div :class="`${prefixCls}__info`" @contextmenu="handleContext" v-if="getIsTabs">
      <span class="ml-1">{{ getTitle }}</span>
    </div> 
  </Dropdown>
</template>
props: {
  tabItem: {
    type: Object as PropType<RouteLocationNormalized>,
    default: null,
  },
  isExtra: Boolean,
},
// 獲取標(biāo)題信息
const getTitle = computed(() => {
  const { tabItem: { meta } = {} } = props;
  return meta && t(meta.title as string);
});

以上就是Vben Admin 多標(biāo)簽頁(yè)狀態(tài)管理源碼學(xué)習(xí)的詳細(xì)內(nèi)容,更多關(guān)于Vben Admin 多標(biāo)簽頁(yè)狀態(tài)管理的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評(píng)論