Vue는 사용 편의성과 유연성으로 인기 있는 JavaScript 프레임워크입니다. 이 기사에서는 장바구니에 항목을 추가할 때 사용자에게 더 나은 경험을 제공하기 위해 Vue에서 포물선 효과를 구현하는 방법을 살펴보겠습니다.
물체를 던지는 효과를 얻기 위해 vue-beautiful-dnd 플러그인을 사용할 수 있습니다. 다음 명령을 사용하여 NPM 패키지 관리자를 통해 설치할 수 있습니다.
npm install vue-beautiful-dnd --save
설치가 완료된 후 이를 Vue 애플리케이션에 도입해야 합니다.
import Vue from 'vue' import { DragDrop } from 'vue-beautiful-dnd' Vue.use(DragDrop)
이제 다음 작업을 수행해야 합니다. 장바구니 구성 요소를 만들고 여기에 필요한 항목을 추가합니다. 다음 템플릿을 사용하여 생성할 수 있습니다.
<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>
장바구니 데이터를 초기화하고 장바구니를 관리하려면 다음 코드도 추가해야 합니다.
<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>
이런 식으로 간단한 장바구니 컴포넌트를 생성하고 초기화했습니다. 장바구니 데이터.
vue-beautiful-dnd를 사용하면 물체를 던지는 효과를 쉽게 얻을 수 있습니다. 장바구니 버튼에 드래그 핸들러를 추가하기만 하면 됩니다. 핸들러에서 첫 번째 인수(드래그됨)를 사용하여 드래그되는 요소의 세부 정보를 가져오고 이를 사용하여 장바구니의 포물선에 애니메이션을 적용하는 항목을 엽니다.
구체적인 구현은 다음과 같습니다.
<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>
이로써 장바구니 던지는 객체 효과 추가 구현이 완료되었습니다. 이 장바구니 구성 요소에 다른 UI 개선 사항을 추가하려는 경우 자유롭게 추가할 수 있습니다. 그럼에도 불구하고 이는 Vue 애플리케이션을 더욱 매력적이고 대화형으로 만드는 데 유용한 기술입니다.
위 내용은 예를 들어 vue가 장바구니를 추가하고 객체를 던지는 기능을 구현하는 방법을 설명합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!