Un exemple explique comment vue implémente la fonction d'ajout d'un panier et de lancement d'objets

Vue est un framework JavaScript populaire pour sa facilité d'utilisation et sa flexibilité. Dans cet article, nous explorerons comment implémenter l'effet parabolique dans Vue pour offrir aux utilisateurs une meilleure expérience lors de l'ajout d'articles au panier.

1. Présentation du plug-in parabole

Afin d'obtenir l'effet de lancer d'objets, nous pouvons utiliser le plug-in vue-beautiful-dnd. Vous pouvez l'installer via le gestionnaire de packages NPM avec la commande suivante :

npm install vue-beautiful-dnd --save

Une fois l'installation terminée, vous devez l'introduire dans votre application Vue :

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

Vue.use(DragDrop)

2. Créer le composant panier

Maintenant, nous devons créez un composant de panier d'achat et ajoutez-y les articles requis. Nous pouvons utiliser le modèle suivant pour le créer :

<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>

Nous devons également ajouter le code suivant pour initialiser les données du panier et gérer le panier :

<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>

De cette façon, nous avons créé un composant de panier simple et initialisé les données du panier.

3. Ajouter un effet parabole

En utilisant vue-beautiful-dnd, nous pouvons facilement obtenir l'effet de lancement d'objet. Ajoutez simplement un gestionnaire de glissement au bouton du panier. Dans le gestionnaire, nous utiliserons le premier argument (glissé) pour obtenir les détails de l'élément déplacé et l'utiliserons pour ouvrir un élément qui anime la parabole dans le panier.

Ce qui suit est l'implémentation spécifique :

<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>

De cette façon, nous avons terminé l'implémentation de l'ajout de l'effet d'objet lançant le panier. Si vous souhaitez également ajouter d'autres améliorations de l'interface utilisateur à ce composant de panier, vous êtes libre de le faire. Quoi qu'il en soit, il s'agit d'une compétence utile pour rendre vos applications Vue plus attrayantes et interactives.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!