À propos de la méthode Vue.JS d'expansion et de contraction verticales des composants JS des modules à hauteur variable-js tutoriel-php.cn

À propos de la méthode Vue.JS d'expansion et de contraction verticales des composants JS des modules à hauteur variable

不言

Libérer： 2018-06-19 17:11:34

original

1868 Les gens l'ont consulté

Cet article présente principalement les composants JS de Vue.JS qui implémentent l'expansion et le rétrécissement verticaux de modules à hauteurs variables. Cet article vous le présente en détail et a une certaine valeur de référence. Les amis qui en ont besoin peuvent s'y référer. 🎜>

Analyse des besoins :

Comme le montre l'image, il existe de nombreux modules à hauteurs variables (seulement deux sont affichés sur l'image, et là sont treize dans mon projet), cliquez sur Développer le module correspondant dans le titre du module, puis cliquez à nouveau sur ce module pour le masquer. Comment réaliser cette exigence et réaliser la réutilisation ?

Avant de cliquer sur la case rouge :

À propos de la méthode Vue.JS dexpansion et de contraction verticales des composants JS des modules à hauteur variable

Après avoir cliqué :

À propos de la méthode Vue.JS dexpansion et de contraction verticales des composants JS des modules à hauteur variable

Analyse des difficultés :

La hauteur du module n'est pas fixe. Par exemple, la méthode à laquelle j'ai initialement pensé était la suivante :

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

Copier après la connexion

Cette méthode peut effectivement réaliser le besoin de cliquer pour agrandir et de cliquer à nouveau pour réduire, mais elle a un défaut évident : elle limite la hauteur du conteneur, c'est-à-dire que chaque module nécessite une hauteur fixe, ce qui ne convient pas aux scénarios de demande.

Solution :

1. Implémenter un composant fonctionnel

本人命名为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)
 }
}

Copier après la connexion

2. Référencer ce composant

À propos de la méthode Vue.JS dexpansion et de contraction verticales des composants JS des modules à hauteur variable

Enregistrer ce composant dans composants :

À propos de la méthode Vue.JS dexpansion et de contraction verticales des composants JS des modules à hauteur variable

peut être cité dans teamplate, veuillez faire attention à la description textuelle dans l’encadré rouge.

À propos de la méthode Vue.JS dexpansion et de contraction verticales des composants JS des modules à hauteur variable

À ce stade, Vue.js a terminé la mise en œuvre et l'application de l'expansion et de la contraction verticales des composants du module à hauteur variable.

Effet de mise en œuvre :

À propos de la méthode Vue.JS dexpansion et de contraction verticales des composants JS des modules à hauteur variable

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Plus de contenu connexe Veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment créer des images en noir et blanc avec les compétences JavaScript_javascript

Vue à composant unique pour atteindre des niveaux illimités Sélectionnez la fonction de menu

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!