Satu contoh menerangkan cara menggunakan vue untuk melaksanakan fungsi seret bar sisi

Vue ialah rangka kerja JavaScript popular yang membolehkan pembangun membina aplikasi web moden dan responsif dengan cepat. Salah satu ciri yang sangat menarik ialah penyeretan bar sisi, yang merupakan ciri yang sangat popular dan praktikal Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan penyeretan bar sisi.

Pertama, anda perlu memasang Vue.js Anda boleh menggunakan npm atau benang untuk memasangnya dan memperkenalkan Vue.js ke dalam projek:

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

Dalam Vue.js, anda. boleh menentukan komponen dalam Tulis kod untuk menyeret bar sisi dalam komponen. Dalam contoh ini, kami akan mencipta komponen yang dipanggil DragSidebar. Dalam komponen DragSidebar, dua sifat data perlu ditakrifkan: menyeret dan tetikusX. menyeret menunjukkan sama ada bar sisi sedang diseret, dan tetikusX menunjukkan koordinat X tetikus.

<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>

Dalam kod di atas, kami mentakrifkan tiga kaedah: mousedown, mouseup dan mousemove, yang mengendalikan acara tetikus, lepas dan gerakkan masing-masing. Dalam tetikus turun, kami menetapkan sifat seret kepada benar, yang bermaksud bar sisi mula diseret dan koordinat X tetikus direkodkan. Dalam mouseup, kami menetapkan sifat seret kepada palsu, yang bermaksud bar sisi berhenti diseret. Dalam mousemove, kami melaraskan kedudukan bar sisi berdasarkan sejauh mana tetikus telah bergerak.

Akhir sekali, kami menggunakan komponen DragSidebar dalam komponen induk dan menambah beberapa komponen anak di dalamnya untuk diuji. Anda mungkin perlu menambah sendiri beberapa gaya CSS untuk memenuhi keperluan projek anda.

<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>

Ini semua tentang menggunakan Vue untuk melaksanakan penyeretan bar sisi Melalui langkah di atas, anda boleh melaksanakan penyeretan bar sisi praktikal dengan cepat.

Atas ialah kandungan terperinci Satu contoh menerangkan cara menggunakan vue untuk melaksanakan fungsi seret bar sisi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!