Satu contoh menerangkan cara Vue melaksanakan fungsi menambah troli beli-belah dan membaling objek

Vue ialah rangka kerja JavaScript popular yang popular kerana kemudahan penggunaan dan fleksibilitinya. Dalam artikel ini, kami akan meneroka cara melaksanakan kesan parabola dalam Vue untuk memberikan pengguna pengalaman yang lebih baik apabila menambahkan item pada troli beli-belah.

1. Memperkenalkan pemalam parabola

Untuk mencapai kesan membaling objek, kita boleh menggunakan pemalam vue-beautiful-dnd. Anda boleh memasangnya melalui pengurus pakej NPM dengan arahan berikut:

npm install vue-beautiful-dnd --save

Selepas pemasangan selesai, anda perlu memperkenalkannya ke dalam aplikasi Vue anda:

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

Vue.use(DragDrop)

2. Buat Komponen Troli Beli-belah

Kini, kita perlu mencipta komponen troli beli-belah dan menambah item yang diperlukan padanya. Kami boleh menggunakan templat berikut untuk menciptanya:

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

Kami juga perlu menambah kod berikut untuk memulakan data troli beli-belah dan menguruskan troli beli-belah:

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

Dalam ini caranya, kami telah mencipta komponen troli beli-belah yang mudah dan memulakan data troli beli-belah.

3. Tambah kesan parabola

Menggunakan vue-beautiful-dnd, kita boleh mencapai kesan objek lontaran dengan mudah. Hanya tambahkan pengendali seret pada butang troli. Dalam pengendali, kami akan menggunakan hujah pertama (diseret) untuk mendapatkan butiran elemen yang diseret dan menggunakannya untuk membuka item yang menghidupkan parabola dalam troli.

Berikut ialah pelaksanaan khusus:

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

Dengan cara ini, kami telah menyelesaikan pelaksanaan menambah kesan objek membaling troli beli-belah. Jika anda juga ingin menambah penambahbaikan UI lain pada komponen troli beli-belah ini, anda bebas untuk berbuat demikian. Walau apa pun, ini adalah kemahiran yang berguna untuk menjadikan aplikasi Vue anda lebih menarik dan interaktif.

Atas ialah kandungan terperinci Satu contoh menerangkan cara Vue melaksanakan fungsi menambah troli beli-belah dan membaling objek. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!