vue提供了内置的过渡封装组件,vue封装组件步骤
这篇文章主要为大家详细介绍了某视频剪辑软件折叠面板组件的封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件折叠面板组件的封装代码，供大家参考，具体内容如下
该组件使用了元素的一些图标图标，以及过渡动画埃尔-塌陷-过渡，需安装元素
具体使用方法，主要知识点提供，注射，这个。$儿童和_uid (vue中无论递归组件，还是自定义组件，每个组件都有唯一的_uid)
！-折叠组件-
导航栏v-model=巴纳姆手风琴
导航栏项目标签=测试1 name=1 行测试1/导航栏项目
导航栏项目标签=测试 2 name=2 line测试2/导航栏项目
导航栏项目标签=测试3 name=3 测试3/导航栏项目
/导航栏
导航栏组件代码如下
模板
差异
插槽/插槽
/div
/模板
脚本
导出默认值{
名称：导航栏，
提供(){
返回{
酒吧：这个
}
},
道具：{
值：{
类型：字符串，
默认值：""
},
手风琴：{
类型：布尔型，
默认值：错误
}
},
方法：{
变更状态(id) {
这个. children.forEach(item={
如果（项. uid！==id) {
item.isShow=false
}否则{
item.isShow=！item.isShow
}
})
}
},
}
/脚本
样式范围
/风格
导航栏项目组件代码如下，el图像的图片地址使用的本地图片，请更换自己的路径
模板
div:行！"怎么了，"内容 :
div class=导航栏 @ click= foldClick
div class= navigationBarLeft /div
div class=navigationBarRight
span{{label}}/span
div class=" navigationBarIcon "
El-image style= width:18px；高度：18px :src=require(./资产/img/问题。png )/El-image
我：怎么了？rotate : rotate 1 ref= foldIcon style= margin-left:10px class= El-icon-arrow-down /I
/div
/div
/div
埃尔-坍缩-跃迁
div v-show=isShow
插槽/插槽
/div
/El-折叠-转换
/div
/模板
脚本
导出默认值{
名称： navigationBarItem ，
注入：[Bar]，
道具：{
标签:{
类型：字符串，
必填：真
},
名称：{
类型：字符串，
默认值：""
},
行：{
类型：布尔型，
默认值：错误
}
},
data() {
返回{
isShow: false
}
},
已安装(){
//默认展开
这个. Bar.value===this.name？this.isShow=true:" "
},
方法：{
//导航条折叠
foldClick() {
如果（这个Bar.accordion) {
这个Bar.changeState(这个. uid)
}否则{
this.isShow=！这个。是秀；
}
}
}
}
/脚本
样式范围。导航栏{
显示器：flex
}。导航栏：悬停{
光标：指针；
}。导航栏左侧{
宽度：6px
高度：25px
背景色：# 3179F4
}。导航障碍{
flex:1；
显示器：flex
高度：25px
背景色：# F2F2F2
justify-content:space-between；
填充：0 10px
对齐-项目：居中；
字体大小：14px
}。导航图标{
显示器：flex
对齐-项目：居中；
}。旋转{
变换：旋转(180度);
过渡：转换. 3s
}。旋转1 {
变换：旋转(0度);
过渡：转换. 3s
}。内容{
border-bottom:1px solid # DCD Fe 6；
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。