vue基础之面包屑和标签tag介绍

　　目录

　　面包屑导航(breadcrumb)

　　标签(tag)

　　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:'商品管理'

　　}

　　]

　　}

　　}

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

　　breadcrumb

参数	说明	默认值
separator	分隔符号，默认斜杠: /	‘/’
separator-class	分割符号的样式类名，可以为分隔符添加定制样式

　　breadcrumb-item

参数	说明	类型
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

　　{{item.label}}

　　export default {

　　data(){

　　return {

　　tags:[

　　{

　　name:'index',

　　path:'/',

　　label:'首页'

　　},{

　　name:'user',

　　path:'/user',

　　label:'用户管理'

　　},{

　　name:'mall'hEYPZNmH,

　　path:'/mall',

宝哥软件园

label:'商品管理'

　　}

　　]

　　}

　　},

　　methods:{

　　handleMenu:function(tag){

　　console.dir(tag)

　　},

　　// tag的关闭是通过手动删除数据实现的

　　handleClose(tag,index){

　　console.dir(tag)

　　this.tags.splice(index,1)

　　},

　　},

　　}

　　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的事件有两个，点击和关闭

事件名称	说明	回调参数
click	点击 Tag 时触发的事件	传入函数名，可加参数；
close	点击Tag的关闭按钮时触发的事件	传入函数名，可加参数。例如@close=“func(‘close’)”

　　总结

　　本篇文章就到这里了，希望能够给大家提供帮助。今后想要了解软件教程就关注宝哥软件园！