Vue.JS如何实现垂直方向展开、收缩不定高度模块的JS组件
这篇文章主要介绍Vue.JS如何实现垂直方向展开、收缩不定高度模块的JS组件,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
成都创新互联公司公司2013年成立,是专业互联网技术服务公司,拥有项目网站建设、网站制作网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元文登做网站,已为上家服务,为文登各地企业和个人服务,联系电话:028-86922220
js有什么特点
1、js属于一种解释性脚本语言;2、在绝大多数浏览器的支持下,js可以在多种平台下运行,拥有着跨平台特性;3、js属于一种弱类型脚本语言,对使用的数据类型未做出严格的要求,能够进行类型转换,简单又容易上手;4、js语言安全性高,只能通过浏览器实现信息浏览或动态交互,从而有效地防止数据的丢失;5、基于对象的脚本语言,js不仅可以创建对象,也能使用现有的对象。
需求分析:
如图,有很多高度不固定的模块(图中只显示两个,本人项目有十三个),点击模块标题展开相应的模块,再次点击此模块匿藏,如何实现此需求并实现复用?
点击红框前:
点击后:
难点分析:
模块高度不固定。比如,本人一开始想到的方法如下:
Title
这种方法确实可以实现点击展开,再次点击收缩的需求,但是有一个明显的缺点:限定了容器的高度,也就是每个模块都需要固定高度,并不适用于需求场景。
解决方案:
1、实现一个函数式组件
本人命名为vertical-toggle.js // Created by xiaoqiang on 17/04/2018. const elTransition = '0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out' const Transition = { 'before-enter' (el) { el.style.transition = elTransition if (!el.dataset) el.dataset = {} el.dataset.oldPaddingTop = el.style.paddingTop el.dataset.oldPaddingBottom = el.style.paddingBottom el.style.height = 0 el.style.paddingTop = 0 el.style.paddingBottom = 0 }, 'enter' (el) { el.dataset.oldOverflow = el.style.overflow if (el.scrollHeight !== 0) { el.style.height = el.scrollHeight + 'px' el.style.paddingTop = el.dataset.oldPaddingTop el.style.paddingBottom = el.dataset.oldPaddingBottom } else { el.style.height = '' el.style.paddingTop = el.dataset.oldPaddingTop el.style.paddingBottom = el.dataset.oldPaddingBottom } el.style.overflow = 'hidden' }, 'after-enter' (el) { el.style.transition = '' el.style.height = '' el.style.overflow = el.dataset.oldOverflow }, 'before-leave' (el) { if (!el.dataset) el.dataset = {} el.dataset.oldPaddingTop = el.style.paddingTop el.dataset.oldPaddingBottom = el.style.paddingBottom el.dataset.oldOverflow = el.style.overflow el.style.height = el.scrollHeight + 'px' el.style.overflow = 'hidden' }, 'leave' (el) { if (el.scrollHeight !== 0) { el.style.transition = elTransition el.style.height = 0 el.style.paddingTop = 0 el.style.paddingBottom = 0 } }, 'after-leave' (el) { el.style.transition = '' el.style.height = '' el.style.overflow = el.dataset.oldOverflow el.style.paddingTop = el.dataset.oldPaddingTop el.style.paddingBottom = el.dataset.oldPaddingBottom } } export default { name: 'VerticalToggle', functional: true, render (h, { children }) { const data = { on: Transition } return h('transition', data, children) } }
2、引用此组件
在components中注册了此组件:
即可在teamplate中引用,请留意红框文字说明部分。
至此,Vue.js实现垂直展开、收缩不定高度模块组件实现完成及应用均已完成。
实现效果:
以上是“Vue.JS如何实现垂直方向展开、收缩不定高度模块的JS组件”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
新闻标题:Vue.JS如何实现垂直方向展开、收缩不定高度模块的JS组件
本文来源:http://hbruida.cn/article/ihijii.html