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(Breadcrumb)
Vue.use(BreadcrumbItem)

在页面中使用

breadcrumb非常简单，直接定义即刻，跳转的功能通过为BreadcrumbItem组件添加to属性即可。如下例子：

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

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

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’)”

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!