가변 높이 모듈의 JS 구성 요소를 수직으로 확장 및 축소하는 Vue.JS 방법에 대해
- 不言원래의
- 2018-06-19 17:11:341890검색
이 글에서는 가변 높이 모듈의 수직 확장 및 축소를 구현하는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!