Vue.js implementiert ein einfaches Faltpanel

<Vorlage>
  <div id="app">
    <img alt="Vue-Logo" src="./assets/logo.png">
    <Zusammenfassung>
      <collpase-item
        :Titel="Artikelname"
        :showAnimation="wahr"
        v-for="(item, i) in Kapitelliste"
        :Schlüssel="i"
      >
        <div Klasse="Liste" v-for="(it, index) in Artikel.Liste" :Schlüssel="index">
          {{it.name}}
        </div>
      </collpase-item>
    </collpase>
  </div>
</Vorlage>

<Skript>
importiere Collpase aus „./components/Collpase.vue“;
CollpaseItem aus „./components/CollpaseItem.vue“ importieren

Standard exportieren {
  Name: "App",
  Daten() {
    zurückkehren {
      Kapitelliste: [
        {
          Name: „Titel 1“,
          Liste: [
            {
              Name: 'Ja, ja, ja, ja, ja'
            },
            {
              Name: 'Ahhhhh'
            }
          ]
        },
        {
          Name: „Titel 2“,
          Liste: [
            {
              Name: 'Ja, ja, ja, ja, ja'
            },
            {
              Name: 'Ahhhhh'
            },
            {
              Name: 'Ahhhhh'
            }
          ]
        }
      ]
    }
  },
  Komponenten:
    Zusammenbruch,
    CollpaseItem,
  }
}
</Skript>

<Stil>
#app {
  Schriftfamilie: Avenir, Helvetica, Arial, serifenlos;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
  Textausrichtung: zentriert;
  Farbe: #2c3e50;
  Rand oben: 60px;
}
</Stil>

<Vorlage>
 <div Klasse="collapse">
  <Steckplatz />
 </div>
</Vorlage>
<Skript>
 Standard exportieren {
  Name: 'Zusammenbruch',
  Requisiten: {
   Akkordeon: {
    Typ: [Boolean, String],
    Standard: false
   }
  },
  bieten() {
   zurückkehren {
    Zusammenbruch: dieser
   }
  },
  erstellt() {
   dies.Kinder = []
  },
  Methoden: {
   beiÄnderung() {
    let activeItem = []
    dies.childrens.forEach((vm) => {
     wenn (vm.isOpen) {
      ActiveItem.push(vm.nameSync)
     }
    })
    dies.$emit('ändern', aktivesElement)
   }
  }
 }
</Skript>
<style lang="css" scoped>
 .zusammenklappen {
  Breite: 100 %;
  Anzeige: Flex;
  biegen: 1;
  Flex-Richtung: Spalte;
 }
</Stil>

<Vorlage>
 <div>
    <div :class="{ 'collapse-disabled': deaktiviert,'collapse-cell--nicht deaktiviert': !deaktiviert, 'collapse-cell--öffnen': ist geöffnet,'collapse-cell--verstecken': !ist geöffnet }" class="collapse-cell">
      <div :class="{ 'collapse-disabled': deaktiviert}" class="collapse-cell__title" @click="beimKlick">
        <span class="collapse-cell__title-text">{{ Titel }}</span>
        <img :class="{ 'active': isOpen, 'active-animation': showAnimation === true }" class="title-arrow" src="https://static-mumway.oss-cn-zhangjiakou.aliyuncs.com/NetworkFrontEnd/wsj/yslbq/btn_dropdown.png"/>
      </div>
      <div :class="{'collapse-cell__content--hide':!isOpen}" class="collapse-cell__content">
        <div :class="{ 'active-animation': showAnimation === true }" class="collapse-cell__wrapper" :style="{'transform':isOpen?'translateY(0)':'translateY(-50%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-50%)'}">
          <Steckplatz />
        </div>
      </div>
    </div>
  </div>
</Vorlage>

<Skript>
 Standard exportieren {
  Name: 'UniCollapseItem',
  Requisiten: {
   Titel:
    // Listentiteltyp: String,
    Standard: ''
   },
   Name: {
    // Eindeutiger Kennungstyp: [Zahl, Zeichenfolge],
    Standard: 0
   },
   deaktiviert:
    // Ob Typ deaktiviert werden soll: Boolean,
    Standard: false
   },
   Animation anzeigen:
    // Ob Animationstyp angezeigt werden soll: Boolean,
    Standard: false
   },
   offen:
    // Ob Typ erweitert werden soll: Boolean,
    Standard: false
   },
   Daumen:
    // Miniaturbildtyp: String,
    Standard: ''
   }
  },
  Daten() {
   zurückkehren {
    isOpen: false
   }
  },
  betrachten:
   öffnen(Wert) {
    this.isOpen = Wert
   }
  },
  einfügen: ['kollabieren'],
  erstellt() {
   dies.istOffen = dies.öffnen
   dieser.nameSync = dieser.name ? dieser.name : diese.collapse.childrens.length
   dies.collapse.children.push(dies)
   wenn (String(this.collapse.accordion) === 'true') {
    wenn (dies.istOffen) {
     let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2]
     if (letztesEl) {
      this.collapse.childrens[this.collapse.childrens.length - 2].istOffen = falsch
     }
    }
   }
  },
  Methoden: {
   beiKlick() {
    wenn (dies.deaktiviert) {
     zurückkehren
    }
    wenn (String(this.collapse.accordion) === 'true') {
     dies.collapse.childrens.forEach(vm => {
      wenn (vm === dies) {
       zurückkehren
      }
      vm.isOpen = false
     })
    }
    dies.istOffen = !dies.istOffen
    dies.collapse.onChange und dies.collapse.onChange()
    dies.$forceUpdate()
   }
  }
 }
</Skript>

<style lang="css" scoped>
 .Zelle zusammenklappen {
  Flex-Richtung: Spalte;
  Rahmenfarbe: #f0f0f0;
  Breite des unteren Rahmens: 1px;
 }
 .collapse-cell--open {
  Hintergrundfarbe: #fff;
 }
 .collapse-deaktiviert {
  Cursor: nicht erlaubt !wichtig;
 }
 .Zelle ausblenden {
  Höhe: 48px;
 }
 .aktive-animation {
  Übergangseigenschaft: transformieren;
  Übergangsdauer: 0,3 s;
  Übergangs-Timing-Funktion: Leichtigkeit;
 }

 .collapse-cell__title {
  Rahmen unten: 1px durchgezogen #f0f0f0;
  Polsterung: 12px 20px;
  Position: relativ;
  Anzeige: Flex;
  Breite: 100 %;
  Box-Größe: Rahmenbox;
  Höhe: 44px;
  Zeilenhöhe: 44px;
  Flex-Richtung: Reihe;
  Inhalt ausrichten: Abstand dazwischen;
  Elemente ausrichten: zentrieren;
  Cursor: Zeiger;
 }
 .collapse-cell__title-img {
  Rand rechts: 10px;
 }
 .Titel-Pfeil {
  Breite: 22px;
  Höhe: 14px;
 }
 .aktiv {
  transformieren: drehen (180 Grad);
 }
 .collapse-cell__title-text {
  biegen: 1;
  Schriftgröße: 16px;
  Rand rechts: 16px;
  Leerzeichen: Nowrap;
  Farbe: #333333;
    Schriftstärke: fett;
  Zeilen: 1;
  Überlauf: versteckt;
  Textüberlauf: Auslassungspunkte;
 }
 .collapse-cell__content {
  Überlauf-x: versteckt;
 }
 .collapse-cell__wrapper {
  Anzeige: Flex;
  Flex-Richtung: Spalte;
 }
 .collapse-cell__content--hide {
  Höhe: 0px;
  Zeilenhöhe: 0px;
 }
</Stil>