使用拖放功能实现 Vue.js 购物车

介绍

在这个项目中，你将学习如何实现一个具有拖放功能的在线购物车。本项目旨在帮助你理解和应用 Vue.js 的概念以及网页浏览器提供的拖放 API。

👀 预览

在线购物车演示

🎯 任务

在这个项目中，你将学习：

如何设置项目并熟悉提供的文件和结构。
如何为在线购物车实现拖放功能，允许用户将商品添加到购物车。
如何显示购物车信息，包括商品数量、商品详情和总价。
如何测试在线购物车并确保功能按预期工作。

🏆 成果

完成本项目后，你将能够：

使用 Vue.js 构建一个 Web 应用程序。
使用网页浏览器的内置 API 实现拖放功能。
显示动态数据并根据用户交互更新用户界面。
通过将应用程序组织成组件来编写简洁且可维护的代码。

设置项目结构

在这一步中，你将设置项目文件和结构。请按照以下步骤完成此步骤：

打开项目文件夹。目录结构如下：

├── images
│   ├── book.jpeg
│   ├── box.jpeg
│   ├── paper.jpeg
│   ├── trolley.jpeg
│   └── tv.jpg
├── index.css
├── index.html
├── js
│   ├── http-vue-loader.js
│   └── vue.min.js
└── trolley.vue

其中：

images 文件夹提供页面所需的商品图片。
index.css 是样式文件。
index.html 是主页。
js/vue.min.js 和 js/http-vue-loader.js 是与 Vue 库相关的文件。
trolley.vue 是需要完成的组件文件。

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

接下来，在 VM 顶部打开“Web 8080”并手动刷新，你将看到页面。

实现拖放功能

在这一步中，你将为在线购物车实现拖放功能。

打开 trolley.vue 文件。
在 data() 函数中，你可以看到 goods 数组，它包含了商品信息。这些数据将用于在“商品列表”部分显示商品。
在 methods 部分添加以下代码：

methods: {
  dragstart(e, good) {
    e.dataTransfer.setData("name", good.name);
    e.dataTransfer.setData("price", good.price);
  },
  dragover(e) {
    e.preventDefault();
  },
  drop(e) {
    const { bought } = this;
    const name = e.dataTransfer.getData("name");
    const price = e.dataTransfer.getData("price");
    bought.push({ name, price: Number(price) });
  }
}

解释：

dragstart 方法在用户开始拖动商品时被调用。它在 dataTransfer 对象中设置商品名称和价格，稍后可以在 drop 方法中访问。
dragover 方法在被拖动的项目悬停在购物车上时被调用。它阻止了浏览器的默认行为，这对于 drop 事件的正常工作是必要的。
drop 方法在用户将拖动的项目放入购物车时被调用。它从 dataTransfer 对象中获取商品名称和价格，并将商品添加到 bought 数组中。

在 computed 部分添加以下代码：

computed: {
  totalPrice() {
    const { bought } = this;
    var sum = 0;
    for (key in bought) {
      sum += bought[key].price;
    }
    return sum;
  },
  goodsDetail() {
    const { bought } = this;
    const names = [];
    const goods = [];
    for (key in bought) {
      names.push(bought[key].name);
    }
    function getRepeatNum() {
      return names.reduce(function (prev, next) {
        prev[next] = prev[next] + 1 || 1;
        return prev;
      }, {});
    }
    for (key in getRepeatNum()) {
      goods.push(`${key}*${getRepeatNum()[key]}`);
    }
    return goods.join(" ");
  }
},

解释：

totalPrice 计算属性计算购物车中商品的总价。
goodsDetail 计算属性生成购物车中商品的详细信息，显示商品名称和数量。

将拖放事件绑定到 HTML

在这一步中，我们需要将拖放事件绑定到 div 标签。

在 trolley.vue 文件的 template 部分，找到 <div class="good-list"> 元素。
将 <div class="good-list"> 元素修改为以下代码：

<div class="good-list">
  <div
    v-for="good in goods"
    :key="good.name"
    class="good"
    draggable="true"
    @dragstart="dragstart($event, good)"
  >
    <img :src="good.cover" draggable="false" />
    <span>{{ good.name }}</span>
    <span>$ {{ good.price }}</span>
  </div>
</div>

找到 <div class="trolley" id="trolley"> 元素。
将 <div class="trolley" id="trolley"> 元素修改为以下代码：

<div id="trolley" class="trolley" @dragover="dragover" @drop="drop">
  <span id="bought" class="bought" v-if="bought.length!== 0"
    >{{ bought.length }}</span
  >
  <img src="./images/trolley.jpeg" />
</div>

测试在线购物车

保存 trolley.vue 文件。
刷新页面，查看在线购物车的初始状态。
尝试将商品图片拖放到购物车中。
观察购物车中的变化，包括商品数量、商品详情和总价。
确保功能按预期工作。

最终实现效果如下：

图片描述

恭喜你！你已使用提供的基础项目和拖放功能成功实现了在线购物车。

总结

恭喜你！你已完成此项目。你可以在 LabEx 中练习更多实验以提升你的技能。

使用拖放功能的 Vue.js 购物车

介绍