Detaillierte Verwendung des Vue More Filter-Widgets

<Vorlage>
  <div :class="['colla-wrap']" ref="filter">
    <div Klasse = "colla-box" ref = "filterCont" :style = "maxBreite ? 'max-width:' + maxBreite: ''">
      <Steckplatz></Steckplatz>
    </div>
    <div Klasse="Strg">
      <div Klasse="deal-b" >
        <el-button size="mini" type="primary" icon="el-icon-search" @click="clickSearch">Suchen</el-button>
        <el-button size="mini" plain icon="el-icon-refresh-left" @click="clickReset">Zurücksetzen</el-button>
        <slot name="moreBtns"></slot>
        <div class="deal-b" @click="showCollapse" v-if="autoExpend.more">
          <i class="el-icon-arrow-down turnDown" v-if="!autoExpend.collapseVisible"></i>
          <i class="el-icon-arrow-up turnUp" v-if="autoExpend.collapseVisible"></i>
          <div v-if="!autoExpend.collapseVisible" class="more-words">Weitere Filterelemente</div>
          <div v-if="autoExpend.collapseVisible" class="more-words">Filter reduzieren</div>
        </div>
      </div>
    </div>
  </div>
</Vorlage>
<Skript>
Standard exportieren={
 Daten(){
  zurückkehren {
     Daten zusammenfassen: {
       Sichtbar reduzieren:false
     },
     //Automatisch einklappen, um mehr Filterelemente anzuzeigen autoExpend:{
       mehr:false,
       sichtbar reduzieren:false,
       hatTop:false,
       hatFilter:false
     },
  }
 },
 Requisiten: ['maxBreite'],
  montiert(){
    this.watchScrollHeight()
    window.addEventListener("Größe ändern", () => {
      this.watchScrollHeight()
    });
  },
  Methoden:{
    clickSearch(){
     dies.$emit('clickSearch')
   },
   klickReset(){
     dies.$emit('clickReset')
   },
   anzeigenCollapse(){
     diese.Methoden('showCollapse')
   },
   anzeigenCollapse(){
     this.autoExpend.collapseVisible = !this.autoExpend.collapseVisible
     dies.$refs.filterCont.style.height = dies.autoExpend.collapseVisible?'auto':'50px'
   }
 
   //Versuchen Sie, diese Höhe zu überwachenwatchScrollHeight(){
     lass filter = this.$refs.filter;
     if(filter){
       dies.$nextTick(() => {
         this.autoExpend.more = $(filter).find(".colla-box")[0].scrollHeight > 50;
       })
       
     }
     //Beurteilen Sie, ob sich darunter ein Elementknoten befindet, um zu bestimmen, ob dieser Slot angezeigt wird. //Beurteilen Sie den normalen Slot für die Position des Suchfelds, wenn (this.$refs.filterCont&&this.$refs.filterCont.childNodes.length) {
       this.autoExpend.hasFilter = true
     }
   }
  }
  
}
</Skript>
<style scoped lang="scss">
  .colla-wrap{
    Breite: 100 %;
    .colla-box{
      maximale Breite: berechnet (100 % – 400 Pixel);
      schweben: links;
      Box-Größe: Rahmenbox;
      Überlauf: versteckt;
      Höhe: 50px;
      >div,Schaltfläche{
        schweben: links;
        Rand rechts: 20px;
        Rand unten: 20px;
      }
    }
    .Strg{
      Anzeige: Flex;
      Elemente ausrichten: Flex-Start;
      Inhalt ausrichten: Flex-Start;
      Farbe: #409EFF;
      Taste{
        Rand rechts: 20px;
      }
      .deal-b{
        Anzeige: Flex;
        Elemente ausrichten: Flex-Start;
        Flex-Wrap: Nowrap;
        .deal-b{
          Rand rechts: 0;
          Rand unten: 0;
          Rand oben: 5px;
          Anzeige: Flex;
          Elemente ausrichten: zentrieren;
          Cursor: Zeiger;
          Farbe: #409EFF;
          .mehr-Wörter{
            Mindestbreite: 75px;
          }
          ich{
            Farbe: #409EFF;
            Rand rechts: 5px;
          }
        }
      }
    }
  }
</Stil>