Un exemple explique comment utiliser vue pour implémenter une fonction de déplacement de la barre latérale

Vue est un framework JavaScript populaire qui permet aux développeurs de créer rapidement des applications Web modernes et réactives. L'une des fonctionnalités très intéressantes est le glissement de la barre latérale, qui est une fonctionnalité très populaire et pratique. Cet article explique comment utiliser Vue pour implémenter le glissement de la barre latérale.

Tout d'abord, vous devez installer Vue.js. Vous pouvez utiliser npm ou Yarn pour l'installer et introduire Vue.js dans le projet :

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Dans Vue.js, vous pouvez définir des composants et écrire le code pour faire glisser la barre latérale. dans les composants. Dans cet exemple, nous allons créer un composant appelé DragSidebar. Dans le composant DragSidebar, deux propriétés de données doivent être définies : glisser et mouseX. glisser indique si la barre latérale est déplacée et mouseX indique la coordonnée X de la souris.

<template>
  <div class="drag-container">
    <div class="sidebar" :style="{ transform: translate }" @mousedown="mousedown"
         @mouseup="mouseup" @mousemove="mousemove">
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dragging: false,
      mouseX: 0,
      sidebarX: 0
    }
  },
  computed: {
    translate() {
      return `translate3d(${this.sidebarX}px, 0, 0)`
    }
  },
  methods: {
    mousedown(event) {
      this.dragging = true
      this.mouseX = event.clientX
    },
    mouseup() {
      this.dragging = false
    },
    mousemove(event) {
      if (this.dragging) {
        const diff = event.clientX - this.mouseX
        this.sidebarX += diff
        this.mouseX = event.clientX
      }
    }
  }
}
</script>

<style scoped>
.drag-container {
  display: flex;
  align-items: stretch;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  width: 320px;
  min-width: 320px;
  height: 100%;
  background-color: #F2F2F2;
  transition: transform .3s ease;
}

.content {
  padding: 24px;
}
</style>

Dans le code ci-dessus, nous avons défini trois méthodes : mousedown, mouseup et mousemove, qui gèrent respectivement les événements de pression, de relâchement et de déplacement de la souris. Dans mousedown, nous définissons la propriété dragging sur true, ce qui signifie que la barre latérale commence à être déplacée et que la coordonnée X de la souris est enregistrée. En mouseup, nous définissons la propriété dragging sur false, ce qui signifie que la barre latérale cesse d'être déplacée. Dans mousemove, nous ajustons la position de la barre latérale en fonction de la distance parcourue par la souris.

Enfin, nous utilisons le composant DragSidebar dans le composant parent et y ajoutons des composants enfants pour tester. Vous devrez peut-être ajouter vous-même certains styles CSS pour répondre aux besoins de votre projet.

<template>
  <div class="app">
    <drag-sidebar>
      <h1>Title</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Suspendisse consectetur pharetra ante sit amet bibendum.</p>
    </drag-sidebar>
    <div class="main">
      <h1>Main content</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Suspendisse consectetur pharetra ante sit amet bibendum.</p>
    </div>
  </div>
</template>

<script>
import DragSidebar from './components/DragSidebar.vue'

export default {
  components: {
    DragSidebar
  }
}
</script>

<style>
.app {
  height: 100vh;
  display: flex;
}

.main {
  flex-grow: 1;
  padding: 24px;
}
</style>

Il s'agit d'utiliser Vue pour implémenter le glissement de la barre latérale Grâce aux étapes ci-dessus, vous pouvez rapidement implémenter un glissement pratique de la barre latérale.

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!