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>

两个组件模板的属性说明：

breadcrumb

breadcrumb-item

标签(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的关闭是通过手动删除数据实现的
       handleClose(tag,index){
           console.dir(tag)
           this.tags.splice(index,1)
       },
   },
}
</script>

3.Tag的属性

4.Tag的事件有两个，点击和关闭

来源：https://blog.csdn.net/jayLog/article/details/122851622