vue基础之面包屑和标签tag介绍
作者:互联网
一、面包屑导航(breadCrumb)
标签(tag)
![image](https://www.icode9.com/i/l/?n=22&i=blog/2821749/202207/2821749-20220710180524113-630829934.png)
1.在main.js中引用tag
2.在页面或组件中使用tag
3.Tag的属性
4.Tag的事件有两个,点击和关闭
总结
面包屑导航(breadcrumb)
面包屑导航显示当前页面的路径,同时支持跳回之前任意页面
breadcrumb的使用:
按需引入的需要引入两个模块:Breadcrumb、BreadcrumbItem,在main.js中
// main.js
import {Breadcrumb, BreadcrumbItem} from 'element-ui';
// 面包屑导航,注入到全局
vue.use(Breadcrumbhttp://www.cppcns.com)
Vue.use(BreadcrumbItem)
在页面中使用
breadcrumb很简单,直接定义即时,跳转功能通过为BreadcrumbItem组件添加to属性即可。如下例子:
{{item.label}}
<;/el-breadcrumb>
export default {
name:'ComHeader',
data:function(){
return {
tabList:[
{
name:'index',
// 这里的路径必须是vue-router里定义的路由
path:'/',
label:'首页'
},{
name:'user',
// 这里的路径必须是vue-router里定义的路由
path:'/user',
www.cppcns.com label:'用户管理'
},{
name:'mall',
// 这里的路径必须是vue-router里定义的路由
path:'/mall',
label:'商品管理'
}
]
}
}
标签:vue,name,label,BreadcrumbItem,tag,面包屑 来源: https://www.cnblogs.com/zmh114712318/p/16463669.html