当前位置：首页 > article >正文

基于vue2 的 vueDraggable 示例，包括组件区、组件放置区、组件参数设置区在同一个文件中实现

article 2025/2/14 3:45:12

为了在Vue 2中实现一个包含组件区、组件放置区以及组件参数设置区的界面，我们可以使用vue-draggable库来处理拖拽功能，并结合其他UI组件库如Element UI来构建界面。下面是一个基本的示例，展示如何实现这样的布局。

第一步：安装必要的库
首先，你需要安装vue和vue-draggable。如果你打算使用Element UI作为UI库，也需要安装它。

npm install vue
npm install vuedraggable
npm install element-ui

第二步：配置Element UI
在你的Vue项目中配置Element UI。在你的main.js文件中添加以下代码：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
Vue.use(ElementUI);

第三步：创建Vue组件
创建一个Vue组件，例如DraggableLayout.vue，并设置其模板以包含组件区、放置区和参数设置区。

<template>
  <div>
    <el-row>
      <el-col :span="8">
        <div class="component-area">
          <h3>组件区</h3>
          <draggable v-model="components" group="components">
            <div v-for="component in components" :key="component.id">
              {{ component.name }}
            </div>
          </draggable>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="drop-area">
          <h3>组件放置区</h3>
          <draggable v-model="droppedComponents" group="components">
            <div v-for="component in droppedComponents" :key="component.id">
              {{ component.name }}
            </div>
          </draggable>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="settings-area">
          <h3>组件参数设置区</h3>
          <el-form v-if="selectedComponent">
            <el-form-item label="名称">
              <el-input v-model="selectedComponent.name"></el-input>
            </el-form-item>
            <!-- 其他参数设置 -->
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
import draggable from 'vuedraggable';
import { ref } from '@vue/composition-api'; // 如果你使用Composition API的话，需要引入这个包。否则，使用传统的Vue选项API。
 
export default {
  components: { draggable },
  setup() {
    const components = ref([{ id: 1, name: '组件1' }, { id: 2, name: '组件2' }]); // 初始组件列表
    const droppedComponents = ref([]); // 放置区的组件列表，初始为空
    const selectedComponent = ref(null); // 当前选中的组件，用于参数设置区显示和编辑
    return { components, droppedComponents, selectedComponent };
  }
};
</script>

第四步：样式调整（可选）
添加一些基本的CSS来美化你的布局：

<style scoped>
.component-area, .drop-area, .settings-area {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
  min-height: 200px; /* 根据需要调整 */
}
</style>

第五步：在父组件中使用这个布局组件
在你的主Vue组件中使用DraggableLayout.vue。例如，在App.vue中：

<template>
  <div id="app">
    <draggable-layout></draggable-layout>
  </div>
</template>

确保你已经注册了DraggableLayout组件：

import DraggableLayout from './components/DraggableLayout.vue'; // 路径根据实际情况调整。
export default { name: 'App', components: { DraggableLayout } }; // 在components对象中注册DraggableLayout。 如果你使用了Composition API，确保你的入口文件配置了@vue/composition-api插件。 否则，使用传统的Vue选项API。