用預設插槽封裝麵包屑導航

2021-10-12 21:34:30 字數 549 閱讀 1389

在專案中常會用到elementui提供的麵包屑導航(也叫路徑導航),但是在多個元件中都會使用到,此時需要封裝成乙個公用的元件,以便於在每個元件中用最簡單的方式實現路徑導航。

1、定義乙個麵包屑元件

首頁

2、在封裝的js外掛程式src/pulgin中全域性註冊

// 對vue進行一些擴充套件功能(全域性註冊-過濾器等)

import mybread from '@/components/my-bread'

export default

}

3、main.js中匯入並使用封裝的外掛程式

import plugin from '@/plugin'

vue.use(plugin) // 全域性註冊自己封裝的vue外掛程式(麵包屑)

4、使用插槽

超簡單
如果vue中沒有提供想要的外掛程式,可以自己封裝乙個vue外掛程式

對不同插槽的說明和使用

麵包屑導航

麵包屑是一種常見的導航工具,通常出現在網頁內容的上方。麵包屑小巧,簡單,有時候甚至很難引起人們的注意,但就是這麼乙個簡單的小東西,卻有十分重要的作用。今天我們就教大家來認識麵包屑。麵包屑的概念來自於童話故事 漢賽爾和格萊特 當漢賽爾和格萊特穿過森林時,不小心迷路了,但他們發現在沿途走過的地方都撒下了...

Bootstrap 麵包屑導航

十一月小例子效果如下 jsp頁面 查詢 重置資源名稱 資源提供方 資源型別 資源使用方 應用系統 申請時間 操作 資源名稱 資源提供方 資源型別 資源使用方 應用系統 申請時間 操作 js function else if count 1 table list datatable fndestroy...

vue element ui麵包屑導航

1 公共元件layout中引入麵包屑導航元件,具體位置根據自己需要設定,麵包屑導航利用element ui中的,可事先了解 breadcrumb for item in levellist key item.path handlelink item a el breadcrumb item tran...