vue picker组件封装,vue常用组件封装
这篇文章主要为大家详细介绍了某视频剪辑软件面包屑组件的封装方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
某视频剪辑软件中自己封装面包屑组件，供大家参考，具体内容如下
要实现效果
前言
很多电商类产品都需要实现面包屑导航，用来优化用户体验
一、初级面包屑封装组件
1.封装基础结构组件面包。某视频剪辑软件
模板
div class=xtx-bread
div class=xtx-bread-item
RouterLink to=/首页/RouterLink
/div
I class= icon font icon-angle-right /I
div class=xtx-bread-item
RouterLink to=/category/10000 二级级导航/RouterLink
/div
I class= icon font icon-angle-right /I
div class=xtx-bread-item
跨度三级导航/span
/div
/div
/模板
样式范围语言=少。xtx-面包{
显示器：flex
填充：25像素10像素
-项目{
一个{
颜色：# 666;
过渡：所有。4s；
：悬停{
颜色：@ xtxColor
}
}
}
我{
字体大小：12px
左边距：5px
右边距：5px
行高：22px
}
}
/风格
2.定义小道具暴露父路径父名称属性，默认插槽，动态渲染组件
div class=xtx-bread
div class=xtx-bread-item
RouterLink to=/首页/RouterLink
/div
I class= icon font icon-angle-right /I
模板v-if=parentName
div class= xtx-bread-item v-if= parent name
路由器链接v-if=父路径 to=/category/10000"{父名称} }/路由器链接
span v-else{{parentName}}/span
/div
/模板
I v-if=" parent name " class= icon font icon-angle-right /I
div class=xtx-bread-item
跨度插槽//span
/div
/div
//用小道具接收数据
道具：{
parentName: {
类型：字符串，
默认值：""
},
父路径：{
类型：字符串，
默认值：""
}
}
3.注册组件，使用验证效果
从…进口面包。/面包
导出默认值{
安装（应用程序){
//Vue2中，参数是某视频剪辑软件构造函数
//Vue3中，参数是根组件的实例对象
//配置一个全局组件
app.component(Bread.name，Bread)
}
}
4.使用组件
面包父路径=/category/1005000 父名称=服饰飞织系列/面包
Bread parentName=服饰飞织系列/Bread //parentPath去掉后不能实现跳转
二、高级封装 无限极导航
参考元素-用户界面的面包屑组件：
el面包屑分隔符=/
El-bread crumb-item:to= { path:/ } 首页/el-breadcrumb-item
El-面包屑-itema href=/ rel=外部无关注活动管理/a/el-breadcrumb-item
埃尔-面包屑-项目活动列表/el-breadcrumb-item
埃尔-面包屑-项目活动详情/el-breadcrumb-item
/el-breadcrumb
1.封装基础结构组件BrendItem.vue
模板
div class=xtx-bread-item
路由器链接v-if= to :to= to slot//路由器链接
span v-elseslot //span
I class= icon font icon-angle-right /I
/div
/模板
脚本
导出默认值{
名称： XtxBreadItem ，
道具：{
收件人：{
type: [String，Object] //to的值即可以是字符串，也可以是对象
}
}
}
/脚本
//使用时
面包-项目to=/XXX/id /面包-项目
面包-项目：to= { path:/XXX/id } /面包-项目
2.封装布伦德维
模板
div class=xtx-bread
插槽/
/div
/模板
脚本
导出默认值{
名称：" XtxBread "
}
/脚本
样式范围语言=少。xtx-面包{
显示器：flex
填充：25像素10像素
:deep(-item) {
一个{
颜色：# 666;
过渡：全0.4s
：悬停{
颜色：@ xtxColor
}
}
}
:deep(i) {
字体大小：12px
左边距：5px
右边距：5px
行高：22px
}
}
/风格
3.注册
从导入面包项目100元/面包项目
从…进口面包。/面包
导出默认值{
安装（应用程序){
//Vue2中，参数是某视频剪辑软件构造函数
//Vue3中，参数是根组件的实例对象
//配置一个全局组件
app.component(Bread.name，Bread)
app.component(BreadItem.name，BreadItem)
}
}
4.使用
//面包屑
面包
BreadItem to=/首页/xtxxbread项目
BreadItem to=/category/1005000 服饰/xtxxbread项目
面包项目飞织系列/xtxxbread项目
/XtxBread
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。