An einem Beispiel wird erläutert, wie Vue die Funktion zum Hinzufügen eines Warenkorbs und zum Werfen von Objekten implementiert

Vue ist ein beliebtes JavaScript-Framework, das für seine Benutzerfreundlichkeit und Flexibilität bekannt ist. In diesem Artikel untersuchen wir, wie man den parabolischen Effekt in Vue implementiert, um Benutzern ein besseres Erlebnis beim Hinzufügen von Artikeln zum Warenkorb zu bieten.

1. Einführung des Parabel-Plug-Ins

Um den Effekt des Werfens von Objekten zu erzielen, können wir den vue-beautiful-dnd-Plugin verwenden -In. Sie können es über den NPM-Paketmanager mit dem folgenden Befehl installieren:

npm install vue-beautiful-dnd --save

Nachdem die Installation abgeschlossen ist, müssen Sie es in Ihre Vue-Anwendung einführen:

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

Vue.use(DragDrop)

# 🎜 🎜#Warenkorbkomponente erstellen

Jetzt müssen wir eine Warenkorbkomponente erstellen und ihr die erforderlichen Artikel hinzufügen. Wir können die folgende Vorlage verwenden, um es zu erstellen:

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

Außerdem müssen wir den folgenden Code hinzufügen, um die Warenkorbdaten zu initialisieren und den Warenkorb zu verwalten:

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

Auf diese Weise Wir haben eine einfache Warenkorbkomponente erstellt und die Warenkorbdaten initialisiert.

Parabeleffekt hinzufügen

Mit vue-beautiful-dnd können wir den Wurfobjekteffekt leicht erzielen. Fügen Sie einfach einen Drag-Handler zur Warenkorb-Schaltfläche hinzu. Im Handler verwenden wir das erste Argument (dragged), um die Details des Elements abzurufen, das gezogen wird, und verwenden es, um ein Element zu öffnen, das die Parabel im Warenkorb animiert.

Das Folgende ist die spezifische Implementierung:

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

Auf diese Weise haben wir die Implementierung des Hinzufügens des Warenkorb-Wurfobjekteffekts abgeschlossen. Wenn Sie dieser Warenkorbkomponente auch weitere UI-Verbesserungen hinzufügen möchten, können Sie dies gerne tun. Unabhängig davon ist dies eine nützliche Fähigkeit, um Ihre Vue-Anwendungen ansprechender und interaktiver zu gestalten.

Das obige ist der detaillierte Inhalt vonAn einem Beispiel wird erläutert, wie Vue die Funktion zum Hinzufügen eines Warenkorbs und zum Werfen von Objekten implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!