Wie vue+swiper das Seitenleistenmenü implementiert

Dieses Mal zeige ich Ihnen, wie Sie das Seitenleistenmenü mit vue+swiper implementieren. Hier sind die praktischen Fälle Schauen Sie einmal vorbei. Das Beispiel in diesem Artikel teilt Ihnen den spezifischen Code des Vue-Swipers mit, um den seitlichen Schiebemenüeffekt als Referenz zu erzielen. Der spezifische Inhalt ist wie folgt

Dieses Schieben nach links und rechts sowie nach oben und unten nutzt hauptsächlich die Karussellfunktion von Swiper. Der erste ist der Code der benutzerdefinierten

definierten Komponente

:

Diese Komponente hat vier Eigenschaften angepasst, nämlich die Breite des linken und rechten Schiebemenüs, die Höhe des Auf- und Ab-Schiebemenüs, leftWdith, rightWidth, topHeight, bottomHeight und verwendet dann ein horizontales Karussell zum Speichern des linken Schiebemenüs und des Der mittlere Inhalt wird nach rechts verschoben, und dann wird im mittleren Inhalt ein vertikales Karussell platziert, um das Slide-Up-Menü, den Inhalt und das Slide-Down-Menü zu platzieren. Wenn die Komponente gemountet ist, müssen die Breite und Höhe der vier Menüs basierend auf den von der übergeordneten Komponente übergebenen Werten initialisiert werden. Nachdem die Breite und Höhe initialisiert wurden, müssen die updateSlides von Swiper selbst aufgerufen werden, um alle zu aktualisieren Andernfalls werden beim Schieben die Breite und Höhe wie gewohnt aktualisiert. Wird in der übergeordneten Komponente aufgerufen:

<template> 
 <p class="s-slider"> 
 <swiper :options="horizontalSwiperOptions" ref="horizontalSwiper"> 
  <swiper-slide class="left" ref="left" v-bind:style="{&#39;background&#39;:getRandomColor()}"> 
  <slot name="left"></slot> 
  </swiper-slide> 
  <swiper-slide class="content"> 
  <swiper :options="verticalSwiperOptions" ref="verticalSwiper"> 
   <swiper-slide class="top" ref="top" v-bind:style="{&#39;background&#39;:getRandomColor()}"> 
   <slot name="top"></slot> 
   </swiper-slide> 
   <swiper-slide class="content" ref="content" v-bind:style="{&#39;background&#39;:getRandomColor()}"> 
   <slot name="content"></slot> 
   </swiper-slide> 
   <swiper-slide class="bottom" ref="bottom" v-bind:style="{&#39;background&#39;:getRandomColor()}"> 
   <slot name="bottom"></slot> 
   </swiper-slide> 
  </swiper> 
  </swiper-slide> 
  <swiper-slide class="right" ref="right" v-bind:style="{&#39;background&#39;:getRandomColor()}"> 
  <slot name="right"></slot> 
  </swiper-slide> 
 </swiper> 
 </p> 
</template> 
<script> 
 import {swiper, swiperSlide, swiperWraper} from 'vue-awesome-swiper' 
 export default { 
 name: "s-slider", 
 props: ['leftWidth','rightWidth','topHeight','bottomHeight'], 
 data() { 
  return { 
  horizontalSwiperOptions: { 
   slidesPerView: 'auto', 
   initialSlide: 0, 
   direction: 'horizontal' 
  }, 
  verticalSwiperOptions:{ 
   slidesPerView: 'auto', 
   initialSlide: 0, 
   direction: 'vertical' 
  } 
  } 
 }, 
 mounted() { 
  setTimeout(() => { 
  this._initMenuWidth(); 
  }, 20); 
 
 }, 
 methods: { 
  _initMenuWidth() { 
  this.$refs.left.$el.style.width = this.leftWidth; 
  this.$refs.right.$el.style.width = this.rightWidth; 
  this.$refs.top.$el.style.height = this.topHeight; 
  this.$refs.bottom.$el.style.height = this.bottomHeight; 
  this.horizontalSwiper.updateSlides(); 
  this.horizontalSwiper.slideTo(1, 1000, false); 
  this.verticalSwiper.updateSlides(); 
  this.verticalSwiper.slideTo(1, 1000, false); 
  }, 
  /*获取随机颜色*/ 
  getRandomColor() { 
  return "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6); 
  } 
 }, 
 computed: { 
  horizontalSwiper() { 
  return this.$refs.horizontalSwiper.swiper; 
  }, 
  verticalSwiper(){ 
  return this.$refs.verticalSwiper.swiper; 
  } 
 } 
 } 
</script> 
 
<style scoped lang="scss"> 
 @import "src/base/css/public/variable.scss"; 
 @import "swiper/dist/css/swiper.css"; 
 
 .s-slider { 
 height: 100%; 
 color: white; 
 .swiper-container { 
  @include fill-with-parent 
 } 
 } 
</style>

Vergessen Sie nicht, diese Vue-Komponente in die übergeordnete Komponente einzuführen.

<s-slider leftWidth="200px" rightWidth="300px" topHeight="100px" bottomHeight="150px"> 
  <p slot="left"> 
  left 
  </p> 
  <p slot="content"> 
  Content 
  </p> 
  <p slot="right"> 
  right 
  </p> 
  <p slot="top"> 
  top 
  </p> 
  <p slot="bottom"> 
  bottom 
  </p> 
 </s-slider>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Datenübertragungs- und Datenverteilungsschritte von vue.js

Benutzerdefinierte Anweisungen in Angular17 Detaillierte Gebrauchsanweisung

Das obige ist der detaillierte Inhalt vonWie vue+swiper das Seitenleistenmenü implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!