How to remove stickers in vue

Building web applications based on vue.js has become the choice of more and more front-end developers. The implementation of the sticker function has also become an important part of many social applications. In the vue.js technology stack, how to implement the sticker function? This article will give a detailed introduction to the method of implementing stickers in vue.js.

1. Prepare materials

To implement the sticker function in vue.js, you need to prepare relevant materials. That is, the folder containing sticker images and related data files (such as sticker name, location, etc.). Here, we can use require.ensure to load material files asynchronously, so that the application can quickly respond to user operations and shorten page loading time.

2. Display stickers

To display stickers in vue.js, we need to use the rendering function of vue.js to add sticker elements to the page. On this basis, we can achieve interactive effects such as dragging and scaling stickers by monitoring the user's mouse events.

1. Render stickers

In the rendering function of vue.js, we can traverse the sticker array through the v-for instruction and render each sticker to the page.

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. Sticker dragging

By listening to mouse events, we can achieve the dragging effect of stickers.

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. Sticker scaling

Similar to the drag and drop effect, we can also dynamically adjust the sticker size by listening to user mouse events.

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. Store sticker location information

In order for the user to get the location information of the previous sticker the next time he opens the application, we can store the sticker array in the global state of vuex, through Vuex manages changes to sticker data.

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;
    }
  },
},

By combining the data managed in vuex with the calculated properties of the component, we can easily achieve two-way binding of data.

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

4. Summary

Through the rendering function of vue.js and the data management of vuex, we can easily realize the interactive effect of the sticker function and save the sticker position information in the global state , so that the sticker’s location information can be restored the next time you open the app. At the same time, we must also pay attention to avoiding problems such as stickers overlapping and running off the screen to improve user experience.

The above is the detailed content of How to remove stickers in vue. For more information, please follow other related articles on the PHP Chinese website!