An example explains how vue implements the function of adding a shopping cart and throwing objects

Vue is a popular JavaScript framework popular for its ease of use and flexibility. In this article, we will explore how to implement the parabolic effect in Vue to give users a better experience when adding items to the shopping cart.

1. Introducing the parabola plug-in

In order to achieve the effect of throwing objects, we can use the vue-beautiful-dnd plug-in. You can install it through the NPM package manager with the following command:

npm install vue-beautiful-dnd --save

After the installation is complete, you need to introduce it into your Vue application:

import Vue from 'vue'
import { DragDrop } from 'vue-beautiful-dnd'

Vue.use(DragDrop)

2. Create Shopping Cart Component

Now, we need to create a shopping cart component and add the required items to it. We can use the following template to create it:

<template>
  <div>
    <h2>您的购物车</h2>
    <div class="cart-items">
      <div v-for="(item, index) in cartItems" :key="index" class="cart-item">
        <img :src="item.image" :alt="item.title">
        <div class="item-details">
          <h4>{{ item.title }}</h4>
          <span>{{ item.price }}</span>
        </div>
        <button @click="handleAddToCart(item)">添加到购物车</button>
      </div>
    </div>

    <div class="cart-dropdown" v-if="showCart">
      <div class="droppable" ref="cart">
        <div class="cart-item" v-for="(item, index) in cart" :key="item.id">
          <img :src="item.image" :alt="item.title">
          <div class="item-details">
            <h4>{{ item.title }}</h4>
            <span>{{ item.price }}</span>
          </div>
          <button @click="handleRemoveFromCart(item)">删除</button>
        </div>
      </div>
      <div class="cart-total">
        <span>总计: {{ total }}</span>
      </div>
    </div>
  </div>
</template>

You also need to add the following code to initialize the shopping cart data and manage the shopping cart:

<script>
export default {
  data() {
    return {
      cartItems: [
        {
          id: 1,
          title: '商品1',
          price: 12.99,
          image: 'path/to/image'
        },
        {
          id: 2,
          title: '商品2',
          price: 24.99,
          image: 'path/to/image'
        },
        {
          id: 3,
          title: '商品3',
          price: 8.99,
          image: 'path/to/image'
        }
      ],
      cart: [],
      showCart: false
    }
  },
  computed: {
    total() {
      return this.cart.reduce((total, item) => total + item.price, 0)
    }
  },
  methods: {
    handleAddToCart(item) {
      this.cart.push(item)
      this.showCart = true
    },
    handleRemoveFromCart(item) {
      const index = this.cart.findIndex(cartItem => cartItem.id === item.id)
      this.cart.splice(index, 1)
    }
  }
}
</script>

In this way, we have created a simple shopping cart component , and initialize the shopping cart data.

3. Add parabola effect

Using vue-beautiful-dnd, we can easily achieve the throwing object effect. Just add a drag handler to the cart button. In the handler, we'll use the first parameter (dragged) to get the details of the element being dragged and use it to open an item that animates the parabola in the cart.

The following is the specific implementation:

<template>
  <div>
    <!-- div.cart-items 代码序列不变 -->
    <div class="cart-dropdown" v-if="showCart">
      <div class="droppable" ref="cart">
        <div
          ref="droppable"
          class="cart-item"
          v-for="(item, index) in cart"
          :key="item.id"
        >
          <img :src="item.image" :alt="item.title">
          <div class="item-details">
            <h4>{{ item.title }}</h4>
            <span>{{ item.price }}</span>
          </div>
          <button @click="handleRemoveFromCart(item)">删除</button>
        </div>
      </div>
      <div class="cart-total">
        <span>总计: {{ total }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { Drag, Drop } from 'vue-beautiful-dnd'
export default {
  // data、computed、methods 部分省略
  components: {
    Drag,
    Drop
  },
  methods: {
    handleAddToCart(item, event) {
      const cartEle = this.$refs.cart
      this.cart.push(item)

      const droppableEle = this.$refs.droppable
      const draggableEle = event.target.closest('.cart-item')

      const start = {
        x: draggableEle.offsetLeft,
        y: draggableEle.offsetTop
      }
      const end = {
        x: cartEle.offsetLeft + droppableEle.offsetLeft + droppableEle.offsetWidth / 2,
        y: cartEle.offsetTop + droppableEle.offsetTop + droppableEle.offsetHeight / 2
      }

      const distance = Math.sqrt(
        Math.pow(end.x - start.x, 2) + Math.pow(end.y - start.y, 2)
      )
      const time = 500
      const speed = distance / time
      const path = anime.path(
        `M${start.x} ${start.y} Q ${(start.x + end.x) / 2} ${(start.y + end.y) / 2} ${end.x} ${end.y}`
      )
      anime({
        targets: draggableEle,
        translateX: path('x') - start.x,
        translateY: path('y') - start.y,
        duration: time,
        easing: 'easeOutQuad',
        complete: () => {
          anime({
            targets: draggableEle,
            translateY: 0,
            translateX: 0,
            duration: 200
          })

          this.showCart = true
        }
      })
    }
  }
}
</script>

In this way, we have completed the implementation of adding the shopping cart throwing object effect. If you also want to add other UI improvements to this shopping cart component, you are free to do so. Regardless, this is a useful skill to make your Vue applications more engaging and interactive.

The above is the detailed content of An example explains how vue implements the function of adding a shopping cart and throwing objects. For more information, please follow other related articles on the PHP Chinese website!