element 面包屑,vue 面包屑

　　这篇文章主要为大家详细介绍了某视频剪辑软件元素面包屑组件封装方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了某视频剪辑软件元素面包屑组件封装的具体代码，供大家参考，具体内容如下

一.选择用哪种样式

二.在组件文件夹下创建组件

三.在Bread.vue复制如下代码

　　模板

　　！-面包屑-

　　面包

　　el面包屑分隔符-class=el-icon-arrow-right

　　key=index:to= { path:/ item。路径}“{ { item。name } }/El-面包屑-项目

　　/el-breadcrumb

　　/div

　　/模板

　　脚本

　　导出默认值{

　　名称："面包",

　　道具：[来自父亲]

　　}

　　/脚本

　　style lang=less 。面包

　　背景色：# fff

　　宽度：100%;

　　高度：50px

　　填充：0 16px

　　边框：1px #EFEFEF实心；

　　框大小：边框-框；

　　盒影：1px 2px 4px #巴巴巴；

　　边距-底部：36px。埃尔图标-箭头-向右：之前{

　　颜色：# 000;

　　}。el-breadcrumb__item {

　　字体大小：20px

　　行高：50px

　　}。el-breadcrumb__inner {

　　光标：指针！重要；

　　}

　　}

　　/风格

四.在你需要的页面上应用

　　//html代码

　　！-面包屑导航-

　　面包：来自父亲=数据路径/面包

　　//js代码

　　从进口面包./././components/Bread.vue //引入面包屑组件

　　导出默认值{

　　姓名： nicklist ，

　　组件：{

　　面包//注册面包屑组件

　　},

　　data() {

　　返回{

　　数据路径：[

　　{

　　名称： 课程, //名称，自定

　　路径： nicklist //路由导航，自定

　　},

　　{

　　名称： 课程管理，

　　路径：" nicklist "

　　}

　　] //面包屑数据

　　}

　　}

　　}

　　效果如图：

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。