Vue melaksanakan lebar kawalan seretan tetikus

Vue.js ialah rangka kerja JavaScript yang popular Ia bukan sahaja rangka kerja, tetapi juga pustaka yang sangat fleksibel dan berkuasa. Rangka kerja ini membolehkan pembangun melaksanakan aplikasi bahagian hadapan dengan cekap. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Vue.js untuk melaksanakan kawalan seret tetikus terhadap lebar.

Melaksanakan seretan tetikus untuk mengawal lebar ialah interaksi biasa dalam banyak aplikasi web, seperti menyeret bar sempadan atau peluncur untuk mengubah saiz bekas atau mengubah saiz imej. Bahagian UI paling asas dalam interaksi ini ialah elemen boleh seret dan bekas sebagai elemen sasaran. Dalam Vue.js, kami menggunakan arahan dan pengendali acara untuk melaksanakan seret dan lepas.

Langkah pertama ialah mentakrifkan arahan yang mencetuskan penyeretan dalam tika Vue. Arahan "v-draggable" perlu terikat pada elemen seret. Arahan ini didaftarkan sebagai komponen global atau tempatan menggunakan API arahan tersuai Vue.

Vue.directive('draggable', {
bind(el, binding, vnode) {

  let xOffset = 0;
  let yOffset = 0;

  const handleMouseDown = (event) => {
      if (!event.target.classList.contains('drag-handle')) {
          return;
      }

      xOffset = event.clientX;
      yOffset = event.clientY;

      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
  };

  const handleMouseMove = (event) => {
      const currentX = event.clientX;
      const currentY = event.clientY;

      const dx = currentX - xOffset;
      const dy = currentY - yOffset;

      const newWidth = el.offsetWidth + dx;

      vnode.context[binding.expression] = newWidth;
  };

  const handleMouseUp = () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
  };

  el.querySelector('.drag-handle').addEventListener('mousedown', handleMouseDown);

}
});

in directive , kami mentakrifkan acara turun tetikus (mousedown). Kami mengikat peristiwa itu kepada unsur pengikat (el) arahan. Selepas peristiwa berlaku, kami merekodkan tetikus mengimbangi relatif kepada elemen supaya kami boleh mengira kedudukan baharu elemen semasa menyeret. Kami kemudian mengira offset dalam acara mousemove, mengetahui lebar baharu dan mengikatnya ke dalam contoh Vue.

Akhir sekali, kami mengikat acara mouseup (mouseup) pada objek dokumen supaya acara mouseup masih dapat dikesan selepas pengguna meninggalkan kawasan seret, dan acara mousemove dan mouseup dikosongkan daripada pendengar.

Seterusnya, kami menggunakan arahan "v-draggable" untuk mengikat elemen seret pada sifat data komponen Vue.

4883ec0eb33c31828b7c767c806e14c7
d1e062c00b82b4850bb5e4d5394a595fSeret Saya16b28748ea4df4d9c2150843fecfba68
785f07db0995384dc29013e643215cd116b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

Vue.component('resizable', {
templat: `

<div class="resizable">
  <div class="wrapper">
    <div class="panel-a">
      <div v-draggable="width" class="drag-area">
        <div class="drag-handle"></div>
      </div>
    </div>
    <div class="panel-b" :style="{ width: width + 'px' }"></div>
  </div>
</div>

`,
data() {

return {
  width: 400,
};

},
});

Dalam contoh ini, kami mencipta komponen React "Boleh saiz semula". Ia terdiri daripada kawasan boleh seret dan bekas. Kami menggunakan arahan v-draggable untuk mengikat elemen seret kepada nilai lebar, dan elemen itu ditambahkan pada bekas kelas "kawasan seret".

Akhir sekali, kami menjadikan komponen itu ke dalam DOM.

Vue baharu({
el: '#app',
});

Dengan cara ini kami berjaya menggunakan Vue.js untuk melaksanakan seret dan lepas tetikus untuk mengawal lebar elemen yang diseret . Vue.js menyediakan banyak fleksibiliti dan kebolehlanjutan, menjadikan pembangunan interaksi jenis ini sangat mudah.

Atas ialah kandungan terperinci Vue melaksanakan lebar kawalan seretan tetikus. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!