ant design vue 图片拖拽

Ant Design Vue 提供了一个组件 <a-draggable>，它可以帮助你实现图片拖拽功能。你可以在该组件中添加图片元素并设置拖拽功能。代码示例如下：

<template>
  <a-draggable v-model="dragList" :options="{animation: 150}">
    <div v-for="item in dragList" :key="item.idx">
      <img :src="item.imgUrl">
    </div>
  </a-draggable>
</template>

<script>
import {ADraggable} from 'ant-design-vue';
export default {
  components: {
    ADraggable
  },
  data() {
    return {
      dragList: [
        {
          idx: 1,
          imgUrl: 'https://picsum.photos/id/237/200/200'
        },
        ...
      ]
    };
  }
};
</script>

相关问题

ant design vue 图片上传并拖拽

好的，可以使用 ant design 的 Upload 组件来实现图片上传和拖拽功能。具体步骤如下：

1. 引入 Upload 组件和 message 组件（用于提示消息）

import { Upload, message } from 'ant-design-vue';

2. 在 template 中使用 Upload 组件，并配置 props

<Upload
  action="/upload"
  :before-upload="beforeUpload"
  :onChange="handleChange"
  :show-upload-list="false"
>
  <div class="upload-area">
    <span class="upload-icon">
      <i class="el-icon-plus"></i>
    </span>
    <span class="upload-text">点击上传或将文件拖拽到此处</span>
  </div>
</Upload>

3. 在 methods 中实现 beforeUpload 和 handleChange 方法

methods: {
  beforeUpload(file) {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('只能上传 JPG/PNG 格式的图片');
      return false;
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('图片大小不能超过 2MB');
      return false;
    }
    return true;
  },
  handleChange(info) {
    if (info.file.status === 'done') {
      message.success(`${info.file.name} 上传成功`);
      // 上传成功后的操作，比如更新页面上的图片列表等
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} 上传失败`);
    }
  },
}

其中 beforeUpload 方法用于判断上传的文件格式和大小，handleChange 方法用于处理上传结果并给出提示。

4. 在样式中设置上传区域的样式，用于实现拖拽效果

.upload-area {
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  padding: 40px 20px;
  text-align: center;
}
.upload-area:hover {
  border-color: #1890ff;
}
.upload-icon {
  display: inline-block;
  font-size: 32px;
  margin-bottom: 10px;
}
.upload-text {
  display: block;
  font-size: 14px;
  color: #666;
}

以上就是使用 ant design vue 实现图片上传和拖拽的方法。希望对你有帮助！

Ant Design Vue 拖拽排序

Ant Design Vue 提供了一个可以实现拖拽排序的组件 - `<a-draggable>`。

使用方法如下：

1. 首先安装 `ant-design-vue`：

npm install ant-design-vue --save

2. 在需要使用的组件中引入 `a-draggable`：

<template>
  <div>
    <a-draggable class="drag-wrapper" :list="list" :item-key="item => item.id">
      <div v-for="item in list" :key="item.id" class="drag-item">{{ item.content }}</div>
    </a-draggable>
  </div>
</template>

<script>
import { ADraggable } from 'ant-design-vue';

export default {
  components: {
    ADraggable,
  },
  data() {
    return {
      list: [
        { id: 1, content: 'Item 1' },
        { id: 2, content: 'Item 2' },
        { id: 3, content: 'Item 3' },
        { id: 4, content: 'Item 4' },
      ],
    };
  },
};
</script>

在上面的示例中，我们首先引入了 `ADraggable` 组件，并将其注册到当前组件中。然后在模板中使用 `a-draggable` 标签包裹要进行拖拽排序的元素，其中 `list` 是要排序的数据列表，`item-key` 属性用来指定每个元素的唯一标识符。

在 `a-draggable` 组件内部，我们使用 `v-for` 指令遍历 `list` 中的数据，并将每个元素渲染为一个 `div` 标签。这里要注意，我们给每个 `div` 标签指定了 `key` 属性，这样可以帮助 Vue 更好地追踪每个元素的变化。

最后，在样式中定义好拖拽排序元素的样式即可：

.drag-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.drag-item {
  width: 200px;
  height: 100px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
}

这样就实现了一个简单的拖拽排序功能。