>  기사  >  웹 프론트엔드  >  가변 높이 모듈의 JS 구성 요소를 수직으로 확장 및 축소하는 Vue.JS 방법에 대해

가변 높이 모듈의 JS 구성 요소를 수직으로 확장 및 축소하는 Vue.JS 방법에 대해

不言
不言원래의
2018-06-19 17:11:341859검색

이 글에서는 가변 높이 모듈의 수직 확장 및 축소를 구현하는 Vue.JS의 JS 구성 요소를 주로 소개합니다. 이 글은 매우 자세하게 소개되어 있으며 필요한 친구들이 참고할 수 있습니다

요구사항 분석 :

그림과 같이 가변 높이의 모듈이 많이 있습니다(그림에는 2개만 표시되어 있고 내 프로젝트에는 13개가 있습니다). 모듈 제목을 클릭하면 해당 모듈이 확장됩니다. 이 모듈을 다시 클릭하여 숨기세요. 이 요구 사항을 달성하고 재사용하려면 어떻게 해야 합니까?

빨간색 상자를 클릭하기 전:

가변 높이 모듈의 JS 구성 요소를 수직으로 확장 및 축소하는 Vue.JS 방법에 대해

클릭 후:

가변 높이 모듈의 JS 구성 요소를 수직으로 확장 및 축소하는 Vue.JS 방법에 대해

난이도 분석:

모듈 높이가 고정되어 있지 않습니다. 예를 들어 제가 처음에 생각한 방법은 다음과 같습니다.

<!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:&#39;#box&#39;,
    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 = &#39;0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out&#39;
const Transition = {
 &#39;before-enter&#39; (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
 },
 &#39;enter&#39; (el) {
  el.dataset.oldOverflow = el.style.overflow
  if (el.scrollHeight !== 0) {
   el.style.height = el.scrollHeight + &#39;px&#39;
   el.style.paddingTop = el.dataset.oldPaddingTop
   el.style.paddingBottom = el.dataset.oldPaddingBottom
  } else {
   el.style.height = &#39;&#39;
   el.style.paddingTop = el.dataset.oldPaddingTop
   el.style.paddingBottom = el.dataset.oldPaddingBottom
  }
  el.style.overflow = &#39;hidden&#39;
 },
 &#39;after-enter&#39; (el) {
  el.style.transition = &#39;&#39;
  el.style.height = &#39;&#39;
  el.style.overflow = el.dataset.oldOverflow
 },
 &#39;before-leave&#39; (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 + &#39;px&#39;
  el.style.overflow = &#39;hidden&#39;
 },
 &#39;leave&#39; (el) {
  if (el.scrollHeight !== 0) {
   el.style.transition = elTransition
   el.style.height = 0
   el.style.paddingTop = 0
   el.style.paddingBottom = 0
  }
 },
 &#39;after-leave&#39; (el) {
  el.style.transition = &#39;&#39;
  el.style.height = &#39;&#39;
  el.style.overflow = el.dataset.oldOverflow
  el.style.paddingTop = el.dataset.oldPaddingTop
  el.style.paddingBottom = el.dataset.oldPaddingBottom
 }
}
export default {
 name: &#39;VerticalToggle&#39;,
 functional: true,
 render (h, { children }) {
  const data = {
   on: Transition
  }
  return h(&#39;transition&#39;, data, children)
 }
}

2. 이 구성 요소를 참조하세요

가변 높이 모듈의 JS 구성 요소를 수직으로 확장 및 축소하는 Vue.JS 방법에 대해

구성 요소에 등록됨:

가변 높이 모듈의 JS 구성 요소를 수직으로 확장 및 축소하는 Vue.JS 방법에 대해

ie 인용 가능 팀플레이트에서 빨간색 상자 안의 텍스트 설명을 주의 깊게 살펴보시기 바랍니다.

가변 높이 모듈의 JS 구성 요소를 수직으로 확장 및 축소하는 Vue.JS 방법에 대해

이제 Vue.js의 가변 높이 모듈 컴포넌트의 수직 확장 및 축소 구현 및 적용이 완료되었습니다.

구현 효과:

가변 높이 모듈의 JS 구성 요소를 수직으로 확장 및 축소하는 Vue.JS 방법에 대해

위 내용은 모두의 학습에 도움이 되기를 바랍니다.

관련 권장 사항:

JavaScript_javascript 기술로 사진을 흑백으로 만드는 방법

vue 단일 구성 요소로 무제한 레벨 다중 선택 메뉴 기능 구현

위 내용은 가변 높이 모듈의 JS 구성 요소를 수직으로 확장 및 축소하는 Vue.JS 방법에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.