js 折叠,vue折叠动画效果
这篇文章主要为大家详细介绍了Java脚本语言实现简易折叠面板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue。j实现简易折叠面板的具体代码，供大家参考，具体内容如下
代码如下：
主文件：app.vue
模板
div id=应用程序
img alt=Vue logo src= ./assets/logo.png
collpase
collpase项目
:title=item.name
:showAnimation=true
v-for=(item，i) in chapterList
:key=i
div class=list v-for=(it，index) in item.list :key=index
{{it.name}}
/div
/collpase-item
/collpase
/div
/模板
脚本
从导入科尔帕斯./组件/coll pase。vue ；
从导入CollpaseItem ./components/CollpaseItem.vue
导出默认值{
名称："应用程序",
data() {
返回{
章节列表：[
{
名称： 标题一，
列表：[
{
名称： 是是是是是是所
},
{
名称： 啊啊啊啊
}
]
},
{
名称： 标题二，
列表：[
{
名称： 是是是是是是所
},
{
名称： 啊啊啊啊
},
{
名称： 啊啊啊啊
}
]
}
]
}
},
组件：{
科尔帕斯，
CollpaseItem，
}
}
/脚本
风格
#app {
字体系列：Avenir、Helvetica、阿里亚、无衬线；
-WebKit-字体-平滑：抗锯齿；
-moz-osx-font-smoothing:灰度；
文本对齐：居中；
颜色：# 2c3e50
边距-顶部：60px
}
/风格
子组件：
模板
div class=折叠
插槽/
/div
/模板
脚本
导出默认值{
名称："折叠",
道具：{
手风琴：{
类型：[布尔型，字符串],
默认值：错误
}
},
提供(){
返回{
崩溃：这个
}
},
已创建(){
这个。儿童=[]
},
方法：{
onChange() {
让activeItem=[]
这个。孩子。foreach((VM)={
if (vm.isOpen) {
activeItem.push(vm.nameSync)
}
})
这个发出( change ，activeItem)
}
}
}
/脚本
style lang=css 范围。折叠{
宽度：100%;
显示器：flex
flex:1；
伸缩方向：列；
}
/风格
子组件：
模板
差异
div:class= { collapse-disabled :disabled， collapse-cell - notdisabled :禁用，折叠-单元格-打开：isOpen，折叠-单元格-隐藏:isOpen } class=折叠单元格
div:class= { collapse-disabled :disabled } class= collapse-cell _ _ title @ click= onClick
span class= collapse-cell _ _ title-text“{ title } }/span
img :class={ active: isOpen， active-animation :show animation===true } class= title-arrow src= https://static-mum way。OSS-cn-张家口。阿里云。com/网络前端/wsj/ysl bq/BTN _下拉。巴布亚新几内亚/
/div
div:class= { collapse-cell _ _ content-hide :是打开的} class= collapse-cell _ _ content
div:class= { active-animation :show animation===true } class= collapse-cell _ _ wrapper :style= { transform :iso pen？translate y(0): translate y(-50%)，-webkit-transform:isOpen？translate y(0): translate y(-50%) }
插槽/
/div
/div
/div
/div
/模板
脚本
导出默认值{
名称： UniCollapseItem ，
道具：{
标题：{
//列表标题
类型：字符串，
默认值：""
},
名称：{
//唯一标识符
类型：[数字，字符串],
默认值：0
},
已禁用：{
//是否禁用
类型：布尔型，
默认值：错误
},
显示动画：{
//是否显示动画
类型：布尔型，
默认值：错误
},
打开：{
//是否展开
类型：布尔型，
默认值：错误
},
拇指：{
//缩略图
类型：字符串，
默认值：""
}
},
data() {
返回{
isOpen:假
}
},
观察：{
打开(瓦尔){
this.isOpen=val
}
},
注入：[折叠],
已创建(){
this.isOpen=this.open
this.nameSync=this.name？这个。名字：这个。崩溃。孩子。长度
这个。崩。童。推（这个)
if(字符串(this。崩溃。accordion)= true ){
如果(this.isOpen) {
让lastEl=这个。崩溃。孩子【这个。崩溃。孩子。长度-2]
if (lastEl) {
这个。崩溃。孩子【这个。崩溃。孩子。长度-2].isOpen=false
}
}
}
},
方法：{
onClick() {
如果(this.disabled) {
返回
}
if(字符串(this。崩溃。accordion)= true ){
这个。崩溃。孩子。foreach(虚拟机={
if (vm===this) {
返回
}
vm.isOpen=false
})
}
this.isOpen=！这是打开的
这个。崩溃。改变这个。崩溃。onchange()
这个. forceUpdate()
}
}
}
/脚本
style lang=css 范围。折叠单元格{
伸缩方向：列；
边框-颜色：# f0f0f0
边框-底部-宽度：1px
}。折叠-单元格-打开{
背景色：# fff
}。折叠-禁用{
光标：不允许！重要；
}。折叠-单元格-隐藏{
高度：48px
}。活动动画{
过渡属性：转换；
过渡-持续时间：0.3秒
过渡-计时-功能：轻松；
}。折叠单元格_ _标题{
border-bottom:1px solid # f0f 0f 0；
填充：12px 20px
位置：相对；
显示器：flex
宽度：100%;
框大小：边框-框；
身高：44px
行高：44px
弯曲方向：行；
justify-content:space-between；
对齐-项目：居中；
光标：指针；
}。折叠单元格_ _标题-img {
右边距：10px
}。标题-箭头{
宽度：22px
高度：14px
}。活动{
变换：旋转(180度);
}。折叠单元格_ _标题-文本{
flex:1；
字体大小：16px
右边距：16px
空白：nowrap
颜色：# 333333;
字体粗细：粗体；
台词：1;
溢出：隐藏；
文本溢出：省略号；
}。折叠单元格_ _内容{
溢出-x:隐藏；
}。折叠单元格_ _包装器{
显示器：flex
伸缩方向：列；
}。折叠-单元格_ _内容-隐藏{
高度：0px
行高：0px
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。