이 글에서는 가변 높이 모듈의 수직 확장 및 축소를 구현하는 Vue.JS의 JS 구성 요소를 주로 소개합니다. 이 글은 매우 자세하게 소개되어 있으며 필요한 친구들이 참고할 수 있습니다
요구사항 분석 :
그림과 같이 가변 높이의 모듈이 많이 있습니다(그림에는 2개만 표시되어 있고 내 프로젝트에는 13개가 있습니다). 모듈 제목을 클릭하면 해당 모듈이 확장됩니다. 이 모듈을 다시 클릭하여 숨기세요. 이 요구 사항을 달성하고 재사용하려면 어떻게 해야 합니까?
빨간색 상자를 클릭하기 전:
클릭 후:
난이도 분석:
모듈 높이가 고정되어 있지 않습니다. 예를 들어 제가 처음에 생각한 방법은 다음과 같습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ height:500px; background-color:black; overflow: hidden; } .mybox-leave-active,.mybox-enter-active{ transition: all 1s ease; } .mybox-leave-active,.mybox-enter{ height:0px !important; } .mybox-leave,.mybox-enter-active{ height: 500px; } </style> </head> <body> <p id="box"> <transition name="mybox"> <p class="box" v-show="boxshow"></p> </transition> <button @click="togglebox">按钮</button> </p> </body> <script src="../bower_components/vue/dist/vue.js"></script> <script> new Vue({ el:'#box', data:{ boxshow:false }, methods:{ togglebox:function(){ this.boxshow = !this.boxshow; } } }); </script> </html>
이 방법은 실제로 클릭하면 확장되고 다시 클릭하면 축소된다는 점을 실현할 수 있지만 분명한 단점이 있습니다. 즉, 컨테이너의 높이를 제한한다는 것입니다. , 각 모듈에는 고정 높이가 필요하며 수요 시나리오에는 적합하지 않습니다.
해결책:
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. 이 구성 요소를 참조하세요
구성 요소에 등록됨:
ie 인용 가능 팀플레이트에서 빨간색 상자 안의 텍스트 설명을 주의 깊게 살펴보시기 바랍니다.
이제 Vue.js의 가변 높이 모듈 컴포넌트의 수직 확장 및 축소 구현 및 적용이 완료되었습니다.
구현 효과:
위 내용은 모두의 학습에 도움이 되기를 바랍니다.
관련 권장 사항:
JavaScript_javascript 기술로 사진을 흑백으로 만드는 방법
vue 단일 구성 요소로 무제한 레벨 다중 선택 메뉴 기능 구현
위 내용은 가변 높이 모듈의 JS 구성 요소를 수직으로 확장 및 축소하는 Vue.JS 방법에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!