學習使用vue router tab切換(四)

2022-09-10 02:51:17 字數 3975 閱讀 2990

您可以通過配置 routertab 元件的tab-transitionpage-transition屬性,分別替換預設的頁籤和頁面過渡效果

注意示例:

"

page-fade

" tab-transition="

tab-scale

" />

您還可以使用物件的方式設定tab-transitionpage-transition的值,以實現詳細的過渡效果配置

配置參考: vue - transition

tab

:tab-transition="

"/>

routertab 支援通過以下插槽個性化頁籤元件:

插槽名稱

作用域說明

default

tab

頁籤項start

-頁籤欄開始

end

-頁籤欄結束

通過 routertab 元件的預設作用域插槽,我們可以自定義頁籤顯示的內容

插槽的作用域提供頁籤項資訊tab供模板使用,包括以下屬性或方法

屬性型別

說明base

component

routertab 例項

data

object

頁籤資料

idstring

頁籤 id

title

string

標題tips

string

提示icon

string

圖示tabclass

string

頁籤 class

closable

boolean

是否可關閉

index

number

頁籤索引

close

function

頁籤關閉方法

示例:

class="

">

link

class="

tab-slot-icon rt-icon-home

"to="

/slot/

"title="首頁"

/>

class="

tab-slot-icon":

class="

fullscreen ? 'rt-icon-fullscreen-exit' : 'rt-icon-fullscreen'

":title="

fullscreen ? '退出全屏' : '全屏'

"@click="

fullscreen = !fullscreen

" />

default="

tab">

if="

tab.icon

"class="

router-tab__item-icon

" :class="

tab.icon

" />

class="

router-tab__item-title

" :title="

tab.tips

">}

class="

tab-badge

">}

v-if="

tab.closable

"class="

router-tab__item-close

"@click.prevent="

tab.close

" />

你可以通過配置:contextmenu="false"來禁用右鍵選單

示例:

"

false

" />

通過陣列方式配置contextmenu,可以自定義右鍵選單

提示參考:內建右鍵選單(opens new window)

示例:

tab

:class="

":contextmenu="

contextmenu

" />

routertab 元件提供了i18n屬性,用以配置自定義的國際化轉換方法,從而實現路由頁籤的多語言展示。

示例:

"

i18n

" />

頁籤支援國際化的字段有:title頁籤標題,tips頁籤提示

定義國際化的方式:

'i18n:custom.i18n.key'字串方式:i18n:字首 + 國際化欄位的key

['custom.i18n.key', ...params]陣列方式: 第一項為國際化欄位的key,後面為引數列表。適用於動態的國際化內容。

參考: 動態頁籤

const routes =[},}

]

通過配置 routertab 元件的lang屬性,可以設定元件顯示的語言 (主要表現為頁籤右鍵選單)。

routertab 缺省會根據瀏覽器語言自動識別元件語言。

目前元件內建的語言有:'zh''en'

指定元件顯示

"zh

" />

自定義的語言 (參考配置 (opens new window)

)

"

customlanguage

" />

routertab 預設支援頁籤拖拽排序,你可以通過配置:dragsort="false"來禁用該功能

示例:

"

false

" />

示例:next

" />

預設情況下,routertab 最後乙個頁籤不允許手動關閉。

通過配置:keep-last-tab="false"可以修改這一行為。

在關閉最後的頁籤後,routertab 會為你跳轉到預設路由。

示例:

"

false

" />

通過設定滾動元素,已經快取的頁籤在重新啟用時,將會保持滾動位置。

當滾動條在頁面節點外部時,可以通過 routertab 元件的page-scroller屬性設定全域性滾動元素。

routertab 預設設定的全域性滾動元素是.router-tab__container, 你也可以設定其它的滾動元素。

示例:

"

.global-page-scroller

" />

當滾動條在頁面節點內部時,可以通過頁面元件選項pagescroller設定頁面滾動元素。

示例:乙個滾動元素

export default

多個滾動元素

export default

當頁面內有非同步載入的內容時,可以在非同步完成後,通過頁面例項$emit('page-loaded')來通知 routertab 還原滾動位置。

示例:

export default

},activated() , math.random() * 1000

) }

}

MySQL使用學習使用 mysql學習使用

1 mysql學習 1 安裝 ubuntu下直接安裝 apt get install mysql server 2 檢查伺服器是否啟動 sudo netstat tap grep mysql,如果啟動成功,出現以下資訊 tcp00localhost.localdomain mysql listen ...

學習使用CSDN markdown使用

建立乙個自定義列表 如何建立乙個註腳 注釋也是必不可少的 katex數學公式 新的甘特圖功能,豐富你的文章 uml 圖表 flowchart流程圖 匯出與匯入 你好!這是你第一次使用markdown編輯器所展示的歡迎頁。如果你想學習如何使用markdown編輯器,可以仔細閱讀這篇文章,了解一下mar...

學習使用PIVOT

假設有這樣的乙個需求 有乙個表中儲存了某個部門的各個員工的每一年的各類薪金,記錄儲存格式如 員工姓名 薪金數目 薪金種類 年份 現在要求根據員工的姓名進行查詢,查詢出某些員工各個年份的薪金總數,出來的結果要求 columnname 年份 員工1姓名 員工2姓名 columnvalue 年份 薪金總數...