vue3+element Plus实现弹框的拖拽、可点击底层页面功能

在Vue 3和Element Plus中，要实现一个可拖拽的弹框并且底层页面可点击，你可以使用Element Plus的Dialog组件结合第三方库如vuedraggable来实现拖拽功能，并确保底层页面可点击的效果。

首先，安装vuedraggable：

npm install vuedraggable

然后，在Vue组件中使用：

<template>
  <el-dialog
    v-model="dialogVisible"
    title="拖拽对话框"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div class="dialog-body">
      <draggable v-model="list" item-key="name" class="list-group">
        <template #item="{ element }">
          <div class="list-group-item">{{ element.name }}</div>
        </template>
      </draggable>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
 
<script setup>
import { ref } from 'vue';
import draggable from 'vuedraggable';
import 'vuedraggable/dist/vuedraggable.css';
 
const dialogVisible = ref(true);
const list = ref([
  { name: 'Item 1' },
  { name: 'Item 2' },
  { name: 'Item 3' },
]);
 
function handleClose() {
  // Handle close event
}
</script>
 
<style>
.dialog-body {
  max-height: 400px;
  overflow-y: auto;
}
.list-group {
  cursor: move;
}
.list-group-item {
  cursor: pointer;
  margin-bottom: 10px;
}
</style>

在这个例子中，draggable组件用于实现列表项的拖拽功能，而v-model用于维护列表的顺序。这样用户就可以在保持列表顺序的同时关闭对话框。底层页面默认可点击，无需额外代码处理。