Home > Article > Web Front-end > About Vue.JS's method of vertically expanding and contracting JS components of variable-height modules

About Vue.JS's method of vertically expanding and contracting JS components of variable-height modules

不言Original: 2018-06-19 17:11:341883browse

This article mainly introduces the JS components of Vue.JS that implement vertical expansion and shrinking of modules with variable height. This article introduces you to it in great detail and has certain reference value. Friends who need it can refer to it

Requirement analysis:

As shown in the picture, there are many modules with variable heights (only two are shown in the picture, and there are thirteen in my project), click Expand the corresponding module in the module title, and click this module again to hide it. How to realize this requirement and achieve reuse?

Before clicking the red box:

About Vue.JSs method of vertically expanding and contracting JS components of variable-height modules

After clicking:

About Vue.JSs method of vertically expanding and contracting JS components of variable-height modules

Difficulty Analysis:

The module height is not fixed. For example, the method I initially thought of is as follows:

<!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>

This method can indeed realize the need to click to expand and click to shrink again, but it has an obvious shortcoming: it limits the height of the container, that is, each module All require a fixed height and are not suitable for demand scenarios.

Solution:

1. Implement a functional component

本人命名为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. Reference this component

About Vue.JSs method of vertically expanding and contracting JS components of variable-height modules

That is It can be quoted in teamplate, please pay attention to the text description in the red box.

About Vue.JSs method of vertically expanding and contracting JS components of variable-height modules

At this point, the implementation and application of Vue.js's vertical expansion and contraction of variable-height module components have been completed.

Implementation effect:

About Vue.JSs method of vertically expanding and contracting JS components of variable-height modules

The above is the entire content of this article. I hope it will be helpful to everyone’s study. More related content Please pay attention to PHP Chinese website!

Related recommendations:

How to make pictures black and white with JavaScript_javascript skills

vue single component to achieve unlimited levels Select menu function

The above is the detailed content of About Vue.JS's method of vertically expanding and contracting JS components of variable-height modules. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Solve the problem of input box being blocked by input methodNext article：Solve the problem of input box being blocked by input method

See more

About Vue.JS's method of vertically expanding and contracting JS components of variable-height modules

Related articles