Vue verwendet Split, um die universelle Drag-and-Slide-Partitionspanel-Komponente zu kapseln

Inhaltsverzeichnis

Vorwort
Start

Grundlegendes Layout
Datenbindung
Ereignisbindung

Optimierung

Optimieren Sie ein Jitter-Problem
Optimieren Sie den zweiten Mausstil
Optimieren Sie das Drei-Folien-Limit
Optimieren Sie die Standardbreite der vier Bedienfelder und die Breite des Schiebereglers
Optimieren Sie fünf Slots
Optimieren Sie sechs verbotene Auswahlen

Beenden

Vollständiger Komponentencode
Beispiele für die Verwendung von Komponenten

Vorwort

Kapseln Sie manuell eine Split-Komponente ähnlich wie Iview ein, um einen Bereich in zwei Bereiche aufzuteilen, die durch Ziehen in der Breite oder Höhe angepasst werden können. Der endgültige Effekt ist wie folgt:

Start

Grundlegendes Layout

Erstellen Sie eine SplitPane-Komponente im Vue-Projekt und fügen Sie sie zur Verwendung in die Seite ein.

<Vorlage>
 <div Klasse="Seite">
 <SplitPane />
 </div>
</Vorlage>

<Skript>
SplitPane aus „./components/split-pane“ importieren
Standard exportieren { 
 Komponenten: 
 Geteiltes Fenster 
 }, 
 Daten() { 
 zurückkehren {} 
 }
}
</Skript>

<style scoped lang="scss">
.Seite { 
 Höhe: 100%; 
 Polsterung: 10px;
 Hintergrund: #000;
}
</Stil>

// geteilter Bereich.vue

<Vorlage>
 <div Klasse="geteilter Bereich">
 Teilt
 </div>
</Vorlage>

<Skript>
Standard exportieren { 
 Daten() { 
 zurückkehren {} 
 }
}
</Skript>

<style scoped lang="scss">
.geteilter Bereich { 
 Hintergrund: blassgrün; 
 Höhe: 100%;
}
</Stil>

Die SplitPane-Komponente besteht aus drei Teilen: Bereich 1, Bereich 2 und Schiebereglern. Fügen Sie diese drei Elemente hinzu und fügen Sie jeweils Klassennamen hinzu. Beachten Sie, dass .pane von Bereich 1 und Bereich 2 gemeinsam genutzt wird.

<Vorlage>
<div Klasse="geteilter Bereich">
 <div Klasse="Bereich Bereich-eins"></div> 
 <div Klasse="pane-trigger"></div> 
 <div Klasse="Bereich Bereich-zwei"></div> 
</div>
</Vorlage>

Stellen Sie den Container auf Flex-Layout ein und setzen Sie die Flex-Eigenschaft von Bereich 2 auf 1. Dann passt sich Bereich 2 entsprechend der Breite von Bereich 1 an.

<style scoped lang="scss">
.geteilter Bereich { 
 Hintergrund: blassgrün;
 Höhe: 100%;
 Anzeige: Flex; 
 .Bereich-eins { 
 Breite: 50%; 
 Hintergrund: blassviolettrot; 
 } 
 .Bereichsauslöser { 
 Breite: 10px; 
 Höhe: 100%; 
 Hintergrund: blasses Goldrutenrot; 
 } 
 .Bereich-zwei { 
 biegen: 1; 
 Hintergrund: türkis; 
 }
}
</Stil>

Es ist ersichtlich, dass das Festlegen der Breitenänderung von Bereich 1 der Kernpunkt der Implementierung dieser Komponente ist.

Neben dem horizontalen Layout wird auch das vertikale Layout unterstützt, daher wird der Komponente ein Richtungsattribut hinzugefügt. Dieses Attribut wird von außen übergeben und sein Wert ist Zeile oder Spalte, die an das Flex-Direction-Attribut des übergeordneten Elements gebunden ist.

<Vorlage> 
 <div Klasse="split-pane" :style="{ flexDirection: Richtung }"> 
 <div Klasse="Bereich Bereich-eins"></div> 
 <div Klasse="pane-trigger"></div> 
 <div Klasse="Bereich Bereich-zwei"></div> 
 </div>
</Vorlage>

<Skript>
Standard exportieren { 
 Requisiten: { 
 Richtung:  
  Typ: Zeichenfolge,  
  Standard: „Zeile“ 
 } 
 }, 
 Daten() { 
 zurückkehren {} 
 }
}
</Skript>

Im horizontalen Layout ist Bereich 1 auf Breite: 50 % eingestellt und der Schieberegler auf Breite: 10px. Nach dem Wechsel zum vertikalen Layout sollten diese beiden Breiten zu Höhen werden. Löschen Sie daher die beiden Breiteneinstellungen im Stil, fügen Sie ein berechnetes Längentyp-Attribut hinzu und legen Sie die Breite und Höhe der beiden Elemente im Inline-Stil entsprechend unterschiedlicher Richtungen fest.

<Vorlage> 
 <div Klasse="split-pane" :style="{ flexDirection: Richtung }"> 
 <div Klasse="pane pane-one" :style="lengthType + ':50%'"></div>
 <div Klasse = "pane-trigger" :style = "lengthType + ':10px'"></div>  
 <div Klasse="Bereich Bereich-zwei"></div> 
</div>
</Vorlage>

berechnet: { 
 Längentyp() {  
 returniere this.direction === 'Zeile' ? 'Breite' : 'Höhe' 
 } 
}

Gleichzeitig beträgt im horizontalen Layout die Höhe von Bereich 1, Bereich 2 und dem Schieberegler alle 100 % und im vertikalen Layout sollten sie alle auf die Breite: 100 % geändert werden. Löscht also die ursprüngliche Höheneinstellung, bindet die Richtung an eine Klasse des Containers und setzt die Attribute der drei Kindelemente je nach Klasse auf 100%.

<Vorlage>
 <div class="split-pane" :class="direction" :style="{ flexDirection: direction }">
 <div Klasse="pane pane-one" :style="lengthType + ':50%'"></div>
 <div Klasse = "pane-trigger" :style = "lengthType + ':10px'"></div>
 <div Klasse="pane pane-two"></div>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Requisiten: {
 Richtung:
  Typ: Zeichenfolge,
  Standard: „Zeile“
 }
 },
 Daten() {
 zurückkehren {}
 },
 berechnet: {
 Längentyp() {
  returniere this.direction === 'Zeile' ? 'Breite' : 'Höhe'
 }
 }
}
</Skript>

<style scoped lang="scss">
.geteilter Bereich {
 Hintergrund: blassgrün;
 Höhe: 100%;
 Anzeige: Flex;
 &.Reihe {
 .Bereich {
  Höhe: 100%;
 }
 .Bereichsauslöser {
  Höhe: 100%;
 }
 }
 &.Spalte {
 .Bereich {
  Breite: 100 %;
 }
 .Bereichsauslöser {
  Breite: 100 %;
 }
 }
 .Bereich-eins {
 Hintergrund: blassviolettrot;
 }
 .Bereichsauslöser {
 Hintergrund: blasses Goldrutenrot;
 }
 .Bereich-zwei {
 biegen: 1;
 Hintergrund: türkis;
 }
}
</Stil>

Wenn Sie an dieser Stelle direction="column" an die Komponente auf der Seite übergeben, können Sie sehen, dass sie sich in vertical geändert hat.

<Vorlage>
 <div Klasse="Seite">
 <SplitPane Richtung="Spalte" />
 </div>
</Vorlage>

Datenbindung

Die Breite (Höhe) des aktuellen Bereichs 1 und die Breite (Höhe) des Schiebereglers sind beide im Stil fest codiert und müssen in js gebunden werden, um zu funktionieren. Geben Sie zunächst die Zahlen ein, die für die Berechnung in Daten verwendet werden können

Daten() {
 zurückkehren {
  paneLengthPercent: 50, // Breite von Bereich 1 (%)
  triggerLength: 10 // Slider-Breite (px)
 }
}

Anschließend gibt Calculated die in den beiden Stilen benötigten Strings zurück. Gleichzeitig sollte die Breite von Bereich 1 um die Hälfte der Breite des Sliders reduziert werden, um sicherzustellen, dass sich der Slider in der Mitte von Bereich 1 und Bereich 2 befindet.

 berechnet: {
 Längentyp() {
  returniere this.direction === 'Zeile' ? 'Breite' : 'Höhe'
 },

 Fensterlängenwert() {
  gibt `calc(${this.paneLengthPercent}% - ${this.triggerLength / 2 + 'px'})` zurück
 },

 triggerLängenwert() {
  gib dies zurück.triggerLength + 'px'
 }
 }

Zum Schluss die Vorlage einbinden

<Vorlage>
 <div class="split-pane" :class="direction" :style="{ flexDirection: direction }">
 <div Klasse="pane pane-one" :style="Längentyp + ':' + paneLengthValue"></div>
 <div Klasse="pane-trigger" :style="lengthType + ':' + triggerLengthValue"></div>
 <div Klasse="Bereich Bereich-zwei"></div>
 </div>
</Vorlage>

Ereignisbindung

Stellen Sie sich den Vorgang des Ziehens eines Schiebereglers vor. Der erste Schritt besteht darin, die Maus auf den Schieberegler zu drücken und dem Schieberegler ein Mousedown-Ereignis hinzuzufügen.

<div Klasse="pane-trigger" :style="Längentyp + ':' + Triggerlängenwert" @mousedown="handleMouseDown"></div>

Nachdem Sie die Maus gedrückt und mit dem Gleiten begonnen haben, sollten Sie auf das Ereignis „mousemove“ warten. Beachten Sie jedoch, dass Sie nicht auf den Gleiter, sondern auf das gesamte Dokument warten sollten, da die Maus an jede beliebige Stelle auf der Seite gleiten kann. Wenn der Benutzer die Maus loslässt, sollte der Mousemove-Listener für das gesamte Dokument gelöscht werden. Daher sollten im Moment des Drückens der Maus zwei Ereignisse zum Dokument hinzugefügt werden: Mausbewegung und Mausloslassen.

 Methoden: {
  //Drücken Sie den Schieberegler handleMouseDown(e) {
  document.addEventListener('Mausbewegung', this.handleMouseMove)
  document.addEventListener('mouseup', this.handleMouseUp)
 },

 // Bewegen Sie die Maus, nachdem Sie den Schieberegler gedrückt haben handleMouseMove(e) {
  console.log('ziehen')
 },

 // Lasse den Schieberegler los handleMouseUp() {
  document.removeEventListener('Mausbewegung', this.handleMouseMove)
 }
 }

Was wir eigentlich steuern möchten, ist die Breite von Bereich 1, wobei die Breite von Bereich 1 gleich dem Abstand zwischen der aktuellen Maus und der linken Seite des Containers sein muss. Das heißt, wenn sich die Maus in der folgenden Abbildung zur Kreisposition bewegt, entspricht die Breite von Bereich 1 der Länge in der Mitte:

Diese Länge kann basierend auf der Entfernung zwischen der aktuellen Maus und der äußersten linken Seite der Seite abzüglich der Entfernung zwischen dem Container und der äußersten linken Seite der Seite berechnet werden, d. h. die grüne Länge ist gleich der roten abzüglich der blauen:

Fügen Sie dem Container einen Verweis hinzu, um die DOM-Informationen des Containers abzurufen

...
<div ref="splitPane" class="split-pane" :class="direction" :style="{ flexDirection: direction }">
...

Wenn Sie getBoundingClientRect() von ref ausdrucken, können Sie die folgenden Informationen sehen:

Konsole.log(diese.$refs.splitPane.getBoundingClientRect())

Dabei stellt „links“ den Abstand des Containers von der linken Seite der Seite und „Breite“ die Breite des Containers dar.
Über das Ereignis pageX des Mausereignisobjekts können wir den aktuellen Abstand der Maus von der linken Seite der Seite ermitteln und so den erforderlichen Abstand der Maus von der linken Seite des Containers berechnen.
Teilen Sie diesen Abstand abschließend durch die Containerbreite und multiplizieren Sie ihn mit 100, um den Prozentwert dieses Abstands zu erhalten, und weisen Sie ihn „paneLengthPercent“ zu.

 // Bewegen Sie die Maus, nachdem Sie den Schieberegler gedrückt haben handleMouseMove(e) {
  const clientRect = this.$refs.splitPane.getBoundingClientRect()
  const offset = e.pageX - clientRect.left
  const paneLengthPercent = (Offset / ClientRect.Breite) * 100

  this.paneLengthPercent = paneLengthPercent
 },

Kompatibel mit Hochformat.

 // Bewegen Sie die Maus, nachdem Sie den Schieberegler gedrückt haben handleMouseMove(e) {
  const clientRect = this.$refs.splitPane.getBoundingClientRect()
  let paneLengthPercent = 0

  wenn (diese.Richtung === 'Zeile') {
  const offset = e.pageX - clientRect.left
  Fensterlängenprozentsatz = (Offset / Clientrechteckbreite) * 100
  } anders {
  const offset = e.pageY - clientRect.top
  Fensterlängenprozentsatz = (Offset / Clientrechteck.Höhe) * 100
  }

  this.paneLengthPercent = paneLengthPercent
 },

Optimierung

Zum jetzigen Zeitpunkt scheinen die Voraussetzungen erfüllt zu sein, allerdings gibt es als Gesamtbaustein noch einige Bereiche, die optimiert werden müssen.

Optimieren Sie ein Jitter-Problem

Nachdem Sie die Schiebereglerbreite auf einen größeren Wert eingestellt haben, kann ein Jitter-Problem wie folgt gefunden werden:

Wenn Sie auf eine der beiden Seiten des Schiebereglers drücken und ihn leicht bewegen, wird eine große Verschiebung verursacht, da die aktuelle Berechnungslogik immer davon ausgeht, dass sich die Maus in der Mitte des Schiebereglers befindet, ohne die Breite des Schiebereglers zu berücksichtigen.

Definieren Sie den aktuellen Mausversatz von der linken (oberen) Seite des Schiebereglers in Dota

 Daten() {
 zurückkehren {
  paneLengthPercent: 50, // Breite von Bereich 1 (%)
  triggerLength: 100, // Slider-Breite (px)
  triggerLeftOffset: 0 // Der Mausversatz von der linken (oberen) Seite des Schiebereglers}
 }

Dieser Wert entspricht dem Abstand von der Maus zur linken Seite der Seite abzüglich des Abstands vom Schieberegler zur linken Seite der Seite (über e.srcElement.getBoundingClientRect()). Er wird jedes Mal zugewiesen, wenn der Schieberegler gedrückt wird, und unterscheidet auch zwischen horizontalen/vertikalen Layouts: rot - blau = grün

 //Drücken Sie den Schieberegler handleMouseDown(e) {
  document.addEventListener('Mausbewegung', this.handleMouseMove)
  document.addEventListener('mouseup', this.handleMouseUp)

  wenn (diese.Richtung === 'Zeile') {
  this.triggerLeftOffset = e.pageX - e.srcElement.getBoundingClientRect().left
  } anders {
  this.triggerLeftOffset = e.pageY - e.srcElement.getBoundingClientRect().top
  }
 },

Mit diesem „triggerLeftOffset“ sollte die Breite von Bereich 1 wie folgt festgelegt werden: der Abstand von der Maus zur linken Seite des Containers minus dem Abstand von der Maus zur linken Seite des Schiebereglers (triggerLeftOffset) plus der halben Breite des Schiebereglers.
Dies entspricht dem Zurückpositionieren der Maus in die Mitte des Schiebereglers.

 // Bewegen Sie die Maus, nachdem Sie den Schieberegler gedrückt haben handleMouseMove(e) {
  const clientRect = this.$refs.splitPane.getBoundingClientRect()
  let paneLengthPercent = 0

  wenn (diese.Richtung === 'Zeile') {
  const offset = e.pageX - clientRect.left - this.triggerLeftOffset + this.triggerLength / 2
  Fensterlängenprozentsatz = (Offset / Clientrechteckbreite) * 100
  } anders {
  const offset = e.pageY - clientRect.top - this.triggerLeftOffset + this.triggerLength / 2
  Fensterlängenprozentsatz = (Offset / Clientrechteck.Höhe) * 100
  }

  this.paneLengthPercent = paneLengthPercent
 },

Keine Jitter-Probleme mehr

Optimieren Sie den zweiten Mausstil

Wenn die Maus über den Schieberegler fährt, sollte sich der Stil ändern, um dem Benutzer mitzuteilen, dass er gezogen werden kann. Fügen Sie Mausstiländerungen jeweils im Schieberegler-CSS der horizontalen und vertikalen Layouts hinzu.

<style scoped lang="scss">
.geteilter Bereich {
 Hintergrund: blassgrün;
 Höhe: 100%;
 Anzeige: Flex;
 &.Reihe {
 .Bereich {
  Höhe: 100%;
 }
 .Bereichsauslöser {
  Höhe: 100%;
  Cursor: col-resize; // hier}
 }
 &.Spalte {
 .Bereich {
  Breite: 100 %;
 }
 .Bereichsauslöser {
  Breite: 100 %;
  Cursor: Zeilengröße ändern; // hier}
 }
 .Bereich-eins {
 Hintergrund: blassviolettrot;
 }
 .Bereichsauslöser {
 Hintergrund: blasses Goldrutenrot;
 }
 .Bereich-zwei {
 biegen: 1;
 Hintergrund: türkis;
 }
}
</Stil>

Optimieren Sie das Drei-Folien-Limit

Als universelle Komponente sollte es externe Funktionen zum Festlegen der minimalen und maximalen Gleitdistanzgrenzen bereitstellen und zwei Requisiten erhalten, min. und max.

 Requisiten: {
 Richtung:
  Typ: Zeichenfolge,
  Standard: „Zeile“
 },
 
 Mindest: {
  Typ: Nummer,
  Standard: 10
 },

 max: {
  Typ: Nummer,
  Standard: 90
 }
 },

Urteil in handleMouseMove hinzufügen:

 // Bewegen Sie die Maus, nachdem Sie den Schieberegler gedrückt haben handleMouseMove(e) {
  const clientRect = this.$refs.splitPane.getBoundingClientRect()
  let paneLengthPercent = 0

  wenn (diese.Richtung === 'Zeile') {
  const offset = e.pageX - clientRect.left - this.triggerLeftOffset + this.triggerLength / 2
  Fensterlängenprozentsatz = (Offset / Clientrechteckbreite) * 100
  } anders {
  const offset = e.pageY - clientRect.top - this.triggerLeftOffset + this.triggerLength / 2
  Fensterlängenprozentsatz = (Offset / Clientrechteck.Höhe) * 100
  }

  wenn (Fensterlängenprozentsatz < this.min) {
  paneLengthPercent = this.min
  }
  wenn (Fensterlängenprozentsatz > this.max) {
  paneLengthPercent = this.max
  }

  this.paneLengthPercent = paneLengthPercent
 }

Optimieren Sie die Standardbreite der vier Bedienfelder und die Breite des Schiebereglers

Als allgemeine Komponente sollten das Initialisierungsverhältnis des Panels und die Breite des Schiebereglers auch von externen Benutzern bestimmt werden.
Übertragen Sie paneLengthPercent- und triggerLength-Daten an Props und empfangen Sie diese von außen.

 Requisiten: {
 Richtung:
  Typ: Zeichenfolge,
  Standard: „Zeile“
 },
 
 Mindest: {
  Typ: Nummer,
  Standard: 10
 },

 max: {
  Typ: Nummer,
  Standard: 90
 },

 FensterlängeProzent: {
  Typ: Nummer,
  Standard: 50
 },

 Triggerlänge: {
  Typ: Nummer,
  Standard: 10
 }
 },
 Daten() {
 zurückkehren {
  triggerLeftOffset: 0 // Der Mausversatz von der linken (oberen) Seite des Schiebereglers}
 },

Auf der Seite müssen Sie paneLengthPercent übergeben. Beachten Sie, dass paneLengthPercent ein in data definierter Wert sein muss und mit dem Modifikator .sync gekennzeichnet sein muss, da dieser Wert dynamisch geändert werden muss.

// Seite.vue

<Vorlage>
 <div Klasse="Seite">
 <SplitPane direction="Zeile" :paneLengthPercent.sync="paneLengthPercent" />
 </div>
</Vorlage>

...
 Daten() {
 zurückkehren {
  Fensterlänge in Prozent: 30
 }
 }
...

Ändern Sie dann den Wert „paneLengthPercent“ im „handleMouseMove“ der Komponente, indem Sie das Ereignis über this.$emit auslösen.

 // Bewegen Sie die Maus, nachdem Sie den Schieberegler gedrückt haben handleMouseMove(e) {
  const clientRect = this.$refs.splitPane.getBoundingClientRect()
  let paneLengthPercent = 0

  wenn (diese.Richtung === 'Zeile') {
  const offset = e.pageX - clientRect.left - this.triggerLeftOffset + this.triggerLength / 2
  Fensterlängenprozentsatz = (Offset / Clientrechteckbreite) * 100
  } anders {
  const offset = e.pageY - clientRect.top - this.triggerLeftOffset + this.triggerLength / 2
  Fensterlängenprozentsatz = (Offset / Clientrechteck.Höhe) * 100
  }

  wenn (Fensterlängenprozentsatz < this.min) {
  paneLengthPercent = this.min
  }
  wenn (Fensterlängenprozentsatz > this.max) {
  Fensterlängenprozentsatz = this.max
  }

  dies.$emit('update:paneLengthPercent', paneLengthPercent) // hier},

An diesem Punkt können die Elementinformationen der Komponente durch externe Eigenschaften gesteuert werden.

Optimieren Sie fünf Slots

Als Containerkomponente ist es nicht nutzlos, wenn Sie keinen Inhalt hinzufügen können. Fügen Sie den beiden Bereichen jeweils zwei benannte Slots hinzu.

<Vorlage>
 <div ref="splitPane" class="split-pane" :class="direction" :style="{ flexDirection: direction }">
 <div Klasse="pane pane-one" :style="Längentyp + ':' + paneLängenwert">
  <slot name="eins"></slot>
 </div>
 
 <div 
  Klasse = "Bereichsauslöser"
  :style="Längentyp + ':' + Triggerlängenwert"
  @mousedown="handleMouseDown">
 </div>
 
 <div Klasse="Bereich Bereich-zwei">
  <slot name="zwei"></slot>
 </div>
 </div>
</Vorlage>

Optimieren Sie sechs verbotene Auswahlen

Wenn sich während des Ziehvorgangs Textinhalt im Bereich befindet, wird der Text möglicherweise ausgewählt und dem Schieberegler ein Auswahlverbotseffekt hinzugefügt.

...
 .Bereichsauslöser {
 Benutzerauswahl: keine;
 Hintergrund: blasses Goldrutenrot;
 }
...

Beenden

Vollständiger Komponentencode

Die Hintergrundfarben werden lediglich zur Artikeldarstellung beibehalten und bei tatsächlicher Verwendung gelöscht.

<Vorlage>
 <div ref="splitPane" class="split-pane" :class="direction" :style="{ flexDirection: direction }">
 <div Klasse="pane pane-one" :style="Längentyp + ':' + paneLängenwert">
  <slot name="eins"></slot>
 </div>
 
 <div 
  Klasse = "Bereichsauslöser" 
  :style="Längentyp + ':' + Triggerlängenwert" 
  @mousedown="MouseDown ausführen"
 ></div>
 
 <div Klasse="Bereich Bereich-zwei">
  <slot name="zwei"></slot>
 </div>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Requisiten: {
 Richtung:
  Typ: Zeichenfolge,
  Standard: „Zeile“
 },
 
 Mindest: {
  Typ: Nummer,
  Standard: 10
 },

 max: {
  Typ: Nummer,
  Standard: 90
 },

 FensterlängeProzent: {
  Typ: Nummer,
  Standard: 50
 },

 Triggerlänge: {
  Typ: Nummer,
  Standard: 10
 }
 },
 Daten() {
 zurückkehren {
  triggerLeftOffset: 0 // Der Mausversatz von der linken (oberen) Seite des Schiebereglers}
 },
 berechnet: {
 Längentyp() {
  returniere this.direction === 'Zeile' ? 'Breite' : 'Höhe'
 },

 Fensterlängenwert() {
  gibt `calc(${this.paneLengthPercent}% - ${this.triggerLength / 2 + 'px'})` zurück
 },

 triggerLängenwert() {
  gib dies zurück.triggerLength + 'px'
 }
 },

 Methoden: {
 //Drücken Sie den Schieberegler handleMouseDown(e) {
  document.addEventListener('Mausbewegung', this.handleMouseMove)
  document.addEventListener('mouseup', this.handleMouseUp)

  wenn (diese.Richtung === 'Zeile') {
  this.triggerLeftOffset = e.pageX - e.srcElement.getBoundingClientRect().left
  } anders {
  this.triggerLeftOffset = e.pageY - e.srcElement.getBoundingClientRect().top
  }
 },

 // Bewegen Sie die Maus, nachdem Sie den Schieberegler gedrückt haben handleMouseMove(e) {
  const clientRect = this.$refs.splitPane.getBoundingClientRect()
  let paneLengthPercent = 0

  wenn (diese.Richtung === 'Zeile') {
  const offset = e.pageX - clientRect.left - this.triggerLeftOffset + this.triggerLength / 2
  Fensterlängenprozentsatz = (Offset / Clientrechteckbreite) * 100
  } anders {
  const offset = e.pageY - clientRect.top - this.triggerLeftOffset + this.triggerLength / 2
  Fensterlängenprozentsatz = (Offset / Clientrechteck.Höhe) * 100
  }

  wenn (Fensterlängenprozentsatz < this.min) {
  paneLengthPercent = this.min
  }
  wenn (Fensterlängenprozentsatz > this.max) {
  Fensterlängenprozentsatz = this.max
  }

  dies.$emit('update:paneLengthPercent', paneLengthPercent)
 },

 // Lasse den Schieberegler los handleMouseUp() {
  document.removeEventListener('Mausbewegung', this.handleMouseMove)
 }
 }
}
</Skript>

<style scoped lang="scss">
.geteilter Bereich {
 Hintergrund: blassgrün;
 Höhe: 100%;
 Anzeige: Flex;
 &.Reihe {
 .Bereich {
  Höhe: 100%;
 }
 .Bereichsauslöser {
  Höhe: 100%;
  Cursor: Spaltengröße ändern;
 }
 }
 &.Spalte {
 .Bereich {
  Breite: 100 %;
 }
 .Bereichsauslöser {
  Breite: 100 %;
  Cursor: Zeilengröße ändern;
 }
 }
 .Bereich-eins {
 Hintergrund: blassviolettrot;
 }
 .Bereichsauslöser {
 Benutzerauswahl: keine;
 Hintergrund: blasses Goldrutenrot;
 }
 .Bereich-zwei {
 biegen: 1;
 Hintergrund: türkis;
 }
}
</Stil>

Beispiele für die Verwendung von Komponenten

Die Hintergrundfarben werden lediglich zur Artikeldarstellung beibehalten und bei tatsächlicher Verwendung gelöscht.

<Vorlage>
 <div Klasse="Seite">
 <SplitPane 
  Richtung="Spalte" 
  :min="20" 
  :max="80" 
  :triggerLength="20" 
  :paneLengthPercent.sync="paneLengthPercent" 
 >
  <Vorlage v-slot:one>
  <div>
   Bereich 1</div>
  </Vorlage>

  <Vorlage v-slot:zwei>
  <div>
   Bereich 2</div>
  </Vorlage>

 </SplitPane>
 </div>
</Vorlage>

<Skript>
SplitPane aus „./components/split-pane“ importieren

Standard exportieren {
 Komponenten:
 Geteiltes Fenster
 },
 Daten() {
 zurückkehren {
  Fensterlänge in Prozent: 30
 }
 }
}
</Skript>

<style scoped lang="scss">
.Seite {
 Höhe: 100%;
 Polsterung: 10px;
 Hintergrund: #000;
}
</Stil>

Dies ist das Ende dieses Artikels darüber, wie Vue Split verwendet, um eine universelle Drag-and-Slide-Split-Panel-Komponente zu kapseln. Weitere relevante Inhalte zum Vue Drag-and-Slide-Split-Panel finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die folgenden verwandten Artikel weiter. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:

Detaillierte Erklärung zur Verwendung von Vue Smooth DnD, einer verschiebbaren Komponente von Vue
Vue Drag-Komponente Vuedraggable API-Optionen zum gegenseitigen Ziehen und Sortieren zwischen Boxen
Vue-Drag-Komponentenliste zum Realisieren einer dynamischen Seitenkonfigurationsfunktion
Detaillierte Erklärung zur Verwendung der Vue-Drag-Komponente
Detaillierte Erläuterung des Vue-Drag-Komponenten-Entwicklungsbeispiels
Vue implementiert die Anforderung des Ziehens und Ablegens dynamisch generierter Komponenten
Vue entwickelt eine Drag-Fortschrittsbalken-Schiebekomponente
vue draggable resizable realisiert die Komponentenfunktion der draggable-Skalierung
Verwenden Sie die Vue-Draggable-Komponente, um die Drag & Drop-Sortierung von Tabelleninhalten im Vue-Projekt zu implementieren
Die Vue-Komponente Draggable implementiert die Drag-Funktion
So implementieren Sie verschiebbare Komponenten in Vue

<<: Ubuntu MySQL 5.6 Version entfernen/installieren/Kodierungskonfigurationsdatei konfigurieren

>>: Beispiel für die Einrichtung eines Third-Level-Domain-Namens in nginx