Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Satu contoh menerangkan cara menggunakan vue untuk melaksanakan fungsi seret bar sisi

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

PHPz
Lepaskan: 2023-04-07 10:16:57
asal
1310 orang telah melayarinya

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan