Vue實(shí)現(xiàn)Tab標(biāo)簽路由效果并用Animate.css做轉(zhuǎn)場(chǎng)動(dòng)畫效果的代碼第1/3頁(yè)

更新時(shí)間：2020年07月16日 10:31:44 作者：情緒羊

這篇文章主要介紹了Vue實(shí)現(xiàn)Tab標(biāo)簽路由效果，并用Animate.css做轉(zhuǎn)場(chǎng)動(dòng)畫效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

類似于瀏覽器窗口一樣的路由切換邏輯，看著還是挺高大上的，本以為有很多高級(jí)的玩意兒，奈何復(fù)雜的東西總是由簡(jiǎn)單的東西拼接而成的，這個(gè)功能也不例外。

本篇文章主要描述兩個(gè)問(wèn)題：

如何實(shí)現(xiàn)這種Tab標(biāo)簽頁(yè)的路由效果如何為路由切換添加轉(zhuǎn)場(chǎng)動(dòng)畫。

該功能的開(kāi)發(fā)主要使用到 AntDesignVue 組件庫(kù)的Tab組件和 Animate.css

效果如下：

Tab標(biāo)簽頁(yè)實(shí)現(xiàn)

首先是該組件的模板部分， ContextMenu 組件是我們自定義的右鍵菜單，后面會(huì)說(shuō)到。 a-tabs 組件則是 ant 的組件，具體用法不詳述，可以查看官方文檔。還有一個(gè) PageToggleTransition 組件，是我們用來(lái)實(shí)現(xiàn)動(dòng)畫切換的組件，非常簡(jiǎn)單。

/**
 * TabLayout.vue 的模板部分，簡(jiǎn)單看一下有個(gè)印象
 */
<template>
 <PageLayout>
 <ContextMenu
 :list="menuItems"
 :visible.sync="menuVisible"
 @select="onMenuSelect"
 />
 <!-- 標(biāo)簽部分 -->
 <a-tabs
 type="editable-card"
 :hide-add="true"
 :active-key="activePage"
 @change="changePage"
 @edit="editPage"
 @contextmenu="onContextmenu"
 >
 <a-tab-pane v-for="page in pageList" :key="page.fullPath">
 <template #tab>
  <span :data-key="page.fullPath">
  {{ page.name }}
  </span>
 </template>
 </a-tab-pane>
 </a-tabs>
 <!-- 路由出口 -->
 <PageToggleTransition name="fadeIn">
 <keep-alive :exclude="dustbin">
 <router-view />
 </keep-alive>
 </PageToggleTransition>
 </PageLayout>
</template>

原理

維護(hù)一個(gè) pageList ，通過(guò)監(jiān)聽(tīng)路由變化動(dòng)態(tài)的添加和刪除page。而所謂的page，就是頁(yè)面的路由對(duì)象（$route），我們正是通過(guò) $route.fullPath 作為頁(yè)面的唯一標(biāo)識(shí)的。而刪除頁(yè)面時(shí)不光要操作 pageList ，還要利用 keep-alive 組件的 exclude 屬性刪除緩存。至于 a-tabs 組件的這個(gè)插槽，主要是為了綁定一個(gè)數(shù)據(jù)key，以便觸發(fā)contextmenu事件時(shí)，可以更容易的獲取到對(duì)應(yīng)頁(yè)面的key值（fullPath）

理論存在，實(shí)踐開(kāi)始。

路由監(jiān)聽(tīng)

watch: {
 $route: {
 handler (route) {
 this.activePage = route.fullPath
 this.putCache(route)
 const index = this.pageList.findIndex(item => item.fullPath === route.fullPath)
 if (index === -1) {
  this.pageList.push(route)
 }
 },
 immediate: true
 }
}

路由變化時(shí)，主要做三件事：

設(shè)置當(dāng)前頁(yè)（activePage）
將當(dāng)前頁(yè)加入緩存，即移出垃圾桶（dustbin）
如果當(dāng)前頁(yè)不在pageList中，則添加進(jìn)來(lái)。

頁(yè)面跳轉(zhuǎn)

methods: {
 changePage (key) {
 this.activePage = key
 this.$router.push(key)
 },
 editPage (key, action) {
 if (action === 'remove') {
 this.remove(key)
 }
 },
 remove (key) {
 if (this.pageList.length <= 1) {
 return message.info('最后一頁(yè)了哦~')
 }
 let curIndex = this.pageList.findIndex(item => item.fullPath === key)
 const { matched } = this.pageList[curIndex]
 const componentName = last(matched).components.default.name
 this.dustbin.push(componentName)
 this.pageList.splice(curIndex, 1)
 // 如果刪除的是當(dāng)前頁(yè)才需要跳轉(zhuǎn)
 if (key === this.activePage) {
 // 判斷向左跳還是向右跳
 curIndex = curIndex >= this.pageList.length ? this.pageList.length - 1 : curIndex
 const page = this.pageList[curIndex]
 this.$router.push(page.fullPath).finally(() => {
  this.dustbin.splice(0) // 重置，否則會(huì)影響到某些組件的緩存
 })
 }
 }
 ...
 ...
}

這里主要主要說(shuō)一下remove方法：

如果是最后一頁(yè)，則忽略
在pageList中找到當(dāng)前頁(yè)對(duì)應(yīng)的組件名用于刪除緩存（這里不清楚的可以看一下 keep-alive組件，和 $route.matched ）
如果刪除的是當(dāng)前頁(yè)，需要進(jìn)行頁(yè)面跳轉(zhuǎn)，向左挑還是向右跳呢？

需要強(qiáng)調(diào)的時(shí) keep-alive 的 exclude 屬性，當(dāng)組件名被匹配到的時(shí)候就會(huì)立即清除緩存，所以， dustbin 添加完之后記得要重置，否則下次就不會(huì)緩存了。

自定義contextmenu事件

解釋下，contextmenu事件就是右鍵菜單事件，我們可以通過(guò)監(jiān)聽(tīng)事件，使得右鍵菜單事件觸發(fā)的時(shí)候顯示我們的自定義菜單。

methods: {
 // 自定義右鍵菜單的關(guān)閉功能
 onContextmenu (e) {
 const key = getTabKey(e.target) // 這里的判斷，用到了前面在span標(biāo)簽上加的data-key自定義屬性
 if (!key) return // 主要是為了控制菜單的顯示或隱藏

 e.preventDefault() // 組織默認(rèn)行為，顯示我們的自定義郵件菜單
 this.menuVisible = true
 }
 ...
 ...
}
/**
 * 由于ant-design-vue組件庫(kù)的TabPane組件暫不支持自定義監(jiān)聽(tīng)器，無(wú)法直接獲取到右鍵target所在標(biāo)簽頁(yè)的key 。故增加此方法用于
 * 查詢右鍵target所在標(biāo)簽頁(yè)的標(biāo)識(shí) key ，以用于自定義右鍵菜單的事件處理。
 * 注：TabPane組件支持自定義監(jiān)聽(tīng)器后可去除該方法并重構(gòu) ‘自定義右鍵菜單的事件處理'
 * @param target 查詢開(kāi)始目標(biāo)
 * @param depth 查詢層級(jí)深度 （查找層級(jí)最多不超過(guò)3層，超過(guò)3層深度直接返回 null）
 * @returns {String}
 */
function getTabKey (target, depth = 0) {
 if (depth > 2 || !target) {
 return null
 }
 return target.dataset.key || getTabKey(target.firstElementChild, ++depth)
}

另外要說(shuō)的是，dom元素上以 data- 開(kāi)頭的屬性會(huì)被收錄進(jìn)元素的 dataset 屬性中， data-key 訪問(wèn)時(shí)就是 dom.dataset.key

下面就是我們的 ContextMenu 組件了：

效果圖：

代碼如下：

<template>
 <a-menu
 v-show="visible"
 class="contextmenu"
 :style="style"
 :selectedKeys="selectedKeys"
 @click="handleClick"
 >
 <a-menu-item v-for="item in list" :key="item.key">
 <a-icon v-if="item.icon" :type="item.icon"/>
 <span>{{ item.text }}</span>
 </a-menu-item>
 </a-menu>
</template>

<script>
export default {
 name: 'ContextMenu',
 props: {
 visible: {
 type: Boolean,
 required: false,
 default: false
 },
 list: {
 type: Array,
 required: true,
 default: () => []
 }
 },
 data () {
 return {
 left: 0,
 top: 0,
 target: null,
 selectedKeys: []
 }
 },
 computed: {
 style () {
 return {
 left: this.left + 'px',
 top: this.top + 'px'
 }
 }
 },
 created () {
 const clickHandler = () => this.closeMenu()
 const contextMenuHandler = e => this.setPosition(e)
 window.addEventListener('click', clickHandler)
 window.addEventListener('contextmenu', contextMenuHandler)
 this.$emit('hook:beforeDestroy', () => {
 window.removeEventListener('click', clickHandler)
 window.removeEventListener('contextmenu', contextMenuHandler)
 })
 },
 methods: {
 closeMenu () {
 this.$emit('update:visible', false)
 },
 setPosition (e) {
 this.left = e.clientX
 this.top = e.clientY
 this.target = e.target
 },
 handleClick ({ key }) {
 this.$emit('select', key, this.target)
 this.closeMenu()
 }
 }
}
</script>

<style lang="stylus" scoped>
 .contextmenu
 position fixed
 z-index 1000
 border-radius 4px
 border 1px lightgrey solid
 box-shadow 4px 4px 10px lightgrey !important
 .ant-menu-item
 margin 0 !important
</style>

這里需要強(qiáng)調(diào)的是鉤子函數(shù) created 的內(nèi)容：

1.首先全局事件需要成對(duì)出現(xiàn)，有添加就要有移除，否則可能造成內(nèi)存泄漏，并導(dǎo)致一些其他的bug。就比如在模塊熱替換的項(xiàng)目中，會(huì)造成反復(fù)綁定的問(wèn)題。

2.為什么這里要給window綁定contextmenu事件和click事件，之前不是綁過(guò)了嗎？這里的click事件主要是為了關(guān)閉菜單，右鍵菜單的特點(diǎn)是，不論點(diǎn)了什么點(diǎn)了哪里，只要點(diǎn)一下就會(huì)關(guān)閉。這里的contextmenu事件主要是為了獲取到事件對(duì)象 event ，以此來(lái)設(shè)置菜單的位置。而之前綁定在 a-tabs 組件上的contextmenu事件主要是為了阻止默認(rèn)事件，我們只攔截了該組件，而不需要攔截全局范圍。

自定義右鍵菜單主要是為了從 event.target 中獲取到我們需要的key并以事件的形式傳遞出來(lái) ，便于分發(fā)后面的邏輯，即：

onMenuSelect (key, target) {
 const tabKey = getTabKey(target)
 switch (key) {
 case '1': this.closeLeft(tabKey); break
 case '2': this.closeRight(tabKey); break
 case '3': this.closeOthers(tabKey); break
 default: break
 }
}

這三種情況的邏輯是基本一致的，主要做了三件事：

清除緩存
刪除頁(yè)面，并設(shè)置當(dāng)前頁(yè)面
頁(yè)面跳轉(zhuǎn)

以closeOthers為例：

closeOthers (tabKey) {
 const index = this.pageList.findIndex(item => item.fullPath === tabKey) // 找到觸發(fā)事件時(shí)鼠標(biāo)停留在那個(gè)tab上
 for (const route of this.pageList) {
 if (route.fullPath !== tabKey) {
  this.clearCache(route) // 清緩存
 }
 }
 const page = this.pageList[index]
 this.pageList = 
                            123下一頁(yè)閱讀全文
                            
                                您可能感興趣的文章:vue封裝Animate.css動(dòng)畫庫(kù)的使用方式
Vue3?路由頁(yè)面切換動(dòng)畫?animate.css效果
vue中使用Animate.css的教程詳解
vue中使用animate.css實(shí)現(xiàn)炫酷動(dòng)畫效果
Animate.css在vue中的使用方式