vue基礎之面包屑和標簽tag詳解

更新時間：2022年02月10日 10:43:36 作者：jayLog

這篇文章主要為大家詳細介紹了vue的面包屑和標簽tag，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

面包屑導航(breadcrumb)

面包屑導航顯示當前頁面的路徑，同時支持跳回之前任意頁面

breadcrumb的使用：

按需引入的需要引入兩個模塊:Breadcrumb、BreadcrumbItem,在main.js中

// main.js
import {Breadcrumb, BreadcrumbItem} from 'element-ui';
// 面包屑導航,注入到全局
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)

在頁面中使用

breadcrumb非常簡單，直接定義即刻，跳轉的功能通過為BreadcrumbItem組件添加to屬性即可。如下例子：

<template>
    <el-breadcrumb>
        <!-- 跳轉傳入的為一個對象，需要一個path屬性指明跳轉的地址。{path:路由地址} -->
        <el-breadcrumb-item v-for="item in tabList" :key="item.name" :to="{path:item.path}">{{item.label}}</el-breadcrumb-item>
    </el-breadcrumb>
</template>
<script>
export default {
    name:'ComHeader',
    data:function(){
        return {
            tabList:[
                {
                    name:'index',
                    // 這里的路徑必須是vue-router里定義的路由
                    path:'/',
                    label:'首頁'
                },{
                    name:'user',
                    // 這里的路徑必須是vue-router里定義的路由
                    path:'/user',
                    label:'用戶管理'
                },{
                    name:'mall',
                    // 這里的路徑必須是vue-router里定義的路由
                    path:'/mall',
                    label:'商品管理'
                }
            ]
        }
    }
</script>

請?zhí)砑訄D片描述

兩個組件模板的屬性說明：

breadcrumb

參數(shù)	說明	默認值
separator	分隔符號，默認斜杠: /	‘/’
separator-class	分割符號的樣式類名，可以為分隔符添加定制樣式

breadcrumb-item

參數(shù)	說明	類型
to	要跳轉的地址，字符串或對象的形式。對象使用`{path:路由地址}`	string\object
replace	在使用 to 進行路由跳轉時，啟用 replace 將不會向 history 添加新記錄	boolean(默認false)

標簽(tag)

用于標記和選擇

1.在main.js中引用tag

// main.js
import {Tag} from 'element-ui'
// 全局注入vue中
Vue.use(Tag)

2.在頁面或組件中使用tag

<template>
<div class="tag-group">
    <el-tag 
    v-for="(item,index) in tags"
    :key="item.name"
    :closable="true"
    @click="handleMenu(item)"
    @close="handleClose(item,index)"
    size="small"
    :effect="item.name === $router.name ? 'light' : 'dark'"
    >{{item.label}}</el-tag>
</div>
</template>
<script>
export default {
    data(){
        return {
            tags:[
                {
                    name:'index',
                    path:'/',
                    label:'首頁'
                },{
                    name:'user',
                    path:'/user',
                    label:'用戶管理'
                },{
                    name:'mall',
                    path:'/mall',
                    label:'商品管理'
                }
            ]
        }
    },
    methods:{
        handleMenu:function(tag){
            console.dir(tag)
        },
        // tag的關閉是通過手動刪除數(shù)據(jù)實現(xiàn)的
        handleClose(tag,index){
            console.dir(tag)
            this.tags.splice(index,1)
        },
    },
}
</script>

請?zhí)砑訄D片描述

3.Tag的屬性

屬性	屬性值	說明
type	`success/info/warning/danger`	設置tag的幾種背景顏色
closable	`boolean`默認false	tag是否可關閉，默認不可關閉
disable-transitions	`boolean`默認false	是否禁用漸變東西和，默認不禁止
hit	`boolean`默認false	是否有邊框描邊
size	`medium / small / mini`	定義tag大小
effect	`dark / light / plain`默認light	主題

4.Tag的事件有兩個，點擊和關閉

事件名稱	說明	回調參數(shù)
click	點擊 Tag 時觸發(fā)的事件	傳入函數(shù)名，可加參數(shù)；
close	點擊Tag的關閉按鈕時觸發(fā)的事件	傳入函數(shù)名，可加參數(shù)。例如@close=“func(‘close’)”