Bagaimana untuk mengalih keluar pelekat dalam vue

Membina aplikasi web berdasarkan vue.js telah menjadi pilihan semakin ramai pembangun bahagian hadapan. Pelaksanaan fungsi pelekat juga telah menjadi bahagian penting dalam banyak aplikasi sosial. Dalam timbunan teknologi vue.js, bagaimana untuk melaksanakan fungsi pelekat? Artikel ini akan memberikan pengenalan terperinci kepada kaedah melaksanakan pelekat dalam vue.js.

1. Sediakan bahan

Untuk melaksanakan fungsi pelekat dalam vue.js, anda perlu menyediakan bahan yang berkaitan. Iaitu, folder yang mengandungi imej pelekat dan fail data yang berkaitan (seperti nama pelekat, lokasi, dll.). Di sini, kami boleh menggunakan require.ensure untuk memuatkan fail bahan secara tidak segerak, supaya aplikasi boleh bertindak balas dengan cepat kepada operasi pengguna dan memendekkan masa memuatkan halaman.

2. Paparkan pelekat

Untuk memaparkan pelekat dalam vue.js, kita perlu menggunakan fungsi pemaparan vue.js untuk menambah elemen pelekat pada halaman. Atas dasar ini, kami boleh mencapai kesan interaktif seperti menyeret dan mengezum pelekat dengan memantau peristiwa tetikus pengguna.

1. Pelekat Render

Dalam fungsi pemaparan vue.js, kita boleh melintasi tatasusunan pelekat melalui arahan v-untuk dan menjadikan setiap pelekat ke halaman.

render(h) {
  return h('div', {
    class: 'sticker-wrapper',
  },
  this.$store.state.stickers.map(sticker => {
    return h('img', {
      class: 'sticker',
      style: {
        top: `${sticker.y}px`,
        left: `${sticker.x}px`,
        width: `${sticker.width}px`,
      },
      domProps: {
        src: sticker.src,
      },
      on: {
        mousedown: (event) => {
          this.dragSticker(event, sticker);
        },
      },
    });
  }));
}

2. Penyeretan pelekat

Dengan mendengar acara tetikus, kita boleh mencapai kesan seretan pelekat.

dragSticker(event, sticker) {
  this.selectedSticker = sticker;
  this.dragging = true;
  this.mouseStartX = event.clientX;
  this.mouseStartY = event.clientY;
  this.stickerStartX = sticker.x;
  this.stickerStartY = sticker.y;
  window.addEventListener('mousemove', this.moveSticker);
  window.addEventListener('mouseup', this.finishDrag);
},
moveSticker(event) {
  if (!this.dragging || !this.selectedSticker) {
    return;
  }
  const deltaX = event.clientX - this.mouseStartX;
  const deltaY = event.clientY - this.mouseStartY;
  this.selectedSticker.x = this.stickerStartX + deltaX;
  this.selectedSticker.y = this.stickerStartY + deltaY;
},
finishDrag() {
  this.dragging = false;
  this.selectedSticker = null;
  window.removeEventListener('mousemove', this.moveSticker);
  window.removeEventListener('mouseup', this.finishDrag);
},

3. Penskalaan pelekat

Serupa dengan kesan seret dan lepas, kami juga boleh melaraskan saiz pelekat secara dinamik dengan mendengar peristiwa tetikus pengguna.

resizeSticker(event, sticker, handle) {
  this.selectedSticker = sticker;
  event.stopPropagation();
  this.resizing = handle;
  this.mouseStartX = event.clientX;
  this.mouseStartY = event.clientY;
  this.stickerStartX = sticker.x;
  this.stickerStartY = sticker.y;
  this.stickerWidth = sticker.width;
  window.addEventListener('mousemove', this.handleResize);
  window.addEventListener('mouseup', this.finishResize);
},
handleResize(event) {
  if (!this.resizing || !this.selectedSticker) {
    return;
  }
  const deltaX = event.clientX - this.mouseStartX;
  const deltaY = event.clientY - this.mouseStartY;
  const scale = Math.min(Math.abs(deltaX), Math.abs(deltaY));
  if (this.resizing === 'nw') {
    this.selectedSticker.x = this.stickerStartX + deltaX;
    this.selectedSticker.y = this.stickerStartY + deltaY;
    this.selectedSticker.width = this.stickerWidth - scale;
  } else if (this.resizing === 'ne') {
    this.selectedSticker.y = this.stickerStartY + deltaY;
    this.selectedSticker.width = this.stickerWidth + scale;
  } else if (this.resizing === 'sw') {
    this.selectedSticker.x = this.stickerStartX + deltaX;
    this.selectedSticker.width = this.stickerWidth - scale;
  } else if (this.resizing === 'se') {
    this.selectedSticker.width = this.stickerWidth + scale;
  }
},
finishResize() {
  this.resizing = null;
  this.selectedSticker = null;
  window.removeEventListener('mousemove', this.handleResize);
  window.removeEventListener('mouseup', this.finishResize);
},

3. Simpan maklumat lokasi pelekat

Agar pengguna mendapat maklumat lokasi pelekat sebelumnya apabila aplikasi dibuka pada masa akan datang, kami boleh menyimpan susunan pelekat di global keadaan vuex, melalui Vuex menguruskan perubahan pada data pelekat.

mutations: {
  addSticker(state, newSticker) {
    state.stickers.push(newSticker);
  },
  removeSticker(state, sticker) {
    state.stickers.splice(state.stickers.indexOf(sticker), 1);
  },
  updateSticker(state, payload) {
    const sticker = payload.sticker;
    if (payload.prop === 'x') {
      sticker.x = payload.value;
    } else if (payload.prop === 'y') {
      sticker.y = payload.value;
    } else if (payload.prop === 'width') {
      sticker.width = payload.value;
    }
  },
},

Dengan menggabungkan data yang diuruskan dalam vuex dengan sifat dikira komponen, kami boleh mencapai pengikatan data dua hala dengan mudah.

computed: {
  ...mapState(['stickers']),
},

4. Ringkasan

Melalui fungsi pemaparan vue.js dan pengurusan data vuex, kita boleh dengan mudah menyedari kesan interaktif fungsi pelekat dan menyimpan maklumat kedudukan pelekat dalam keadaan global , supaya maklumat lokasi pelekat boleh dipulihkan apabila anda membuka apl seterusnya. Pada masa yang sama, kita juga mesti memberi perhatian untuk mengelakkan masalah seperti pelekat bertindih dan lari dari skrin untuk meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar pelekat dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!