求大神指导,使用的技术vue.js和antd-vue的ui框架怎么实现购物车逻辑和组件间的拖拽效果?

困难点:找不到a-upload组件中的HTML标签
1、点击上传材料上传本地文件,上传的材料份数会动态显示
2、通过拖拽实现左右两个容器材料份数的一增一减(购物车效果,一增一减)
图片说明

https://www.jb51.net/article/173540.htm

参考GPT和自己的思路:

对于实现购物车逻辑和组件间的拖拽效果,使用vue.js和antd-vue的ui框架是可行的。以下是一个简单的实现思路:

  1. 创建一个组件,用于显示当前已上传的材料以及相应的数量。这个组件应该有一个上传文件的按钮,用户可以通过点击按钮或拖拽文件来上传材料。

  2. 在上传文件后,组件应该显示上传的材料以及相应的数量。这可以通过使用Vue数据绑定来实现。

  3. 创建另一个组件,用于显示购物车。这个组件应该有两个容器,一个用于显示已选择的材料,另一个用于显示未选择的材料。

  4. 在左侧的未选择容器中,每个材料都应该能够被拖拽到右侧的已选择容器中。这可以通过Vue的拖拽指令来实现。

  5. 当一个材料被拖到右侧的已选择容器中时,购物车组件应该增加相应的数量。同样,当一个材料被从右侧的已选择容器中拖出时,数量应该减少。

  6. 在购物车组件中,应该有一个按钮,当用户点击时,购物车中所有选定的材料将被提交。这可以通过调用一个API来实现。

综上所述,使用vue.js和antd-vue的ui框架可以实现购物车逻辑和组件间的拖拽效果。具体实现可以根据具体情况进行适当的调整和修改。对于找不到a-upload组件中的HTML标签的问题,可以参考antd-vue的官方文档或开源代码来进行研究和学习。