vue2 前端可视化拖拽布局 包括组件区，组件放置区，组件参数设置区，单个vue实现

以下是一个完整的 Vue2 单文件组件（.vue 文件）实现，包含 组件区、组件放置区 和 组件参数设置区 的可视化拖拽布局。我们将使用 vuedraggable 和 vue-grid-layout 来实现拖拽和布局功能。

  

    
    

      
组件区
      
        
          

            {{ element.name }}
          
        
      
    
    
    

      
组件放置区
      
        
          
        
      
    
    
    

      
组件参数设置区
      

        

          {{ key }}
          
        
      
      

        请选择一个组件进行设置
      
    
  


import { GridLayout, GridItem } from 'vue-grid-layout';
import draggable from 'vuedraggable';
// 动态组件
const ButtonComponent = {
  template: `
    
      {{ props.text }}
    
  `,
  props: {
    text: String,
    color: String,
  },
};
const InputComponent = {
  template: `
    
  `,
  props: {
    text: String,
    color: String,
  },
};
export default {
  components: {
    GridLayout,
    GridItem,
    draggable,
  },
  data() {
    return {
      // 组件区列表
      componentList: [
        { id: 1, name: '按钮', component: 'ButtonComponent' },
        { id: 2, name: '文本框', component: 'InputComponent' },
      ],
      // 放置区布局
      layout: [],
      // 当前选中的组件
      selectedComponent: null,
    };
  },
  methods: {
    // 克隆组件
    cloneComponent(component) {
      return {
        ...component,
        i: Date.now().toString(), // 唯一 ID
        x: 0,
        y: 0,
        w: 2,
        h: 2,
        props: {
          text: '默认文本',
          color: '#000000',
        },
      };
    },
    // 选中组件
    selectComponent(component) {
      this.selectedComponent = component;
    },
  },
  // 注册动态组件
  beforeCreate() {
    this.$options.components.ButtonComponent = ButtonComponent;
    this.$options.components.InputComponent = InputComponent;
  },
};


.container {
  display: flex;
  height: 100vh;
}
.component-list {
  width: 200px;
  padding: 10px;
  border-right: 1px solid #ccc;
}
.component-item {
  padding: 10px;
  margin: 5px 0;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  cursor: grab;
}
.drop-area {
  flex: 1;
  padding: 10px;
}
.settings-area {
  width: 300px;
  padding: 10px;
  border-left: 1px solid #ccc;
}
.grid-item-content {
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  height: 100%;
  box-sizing: border-box;
}

功能说明

组件区：

展示可拖拽的组件列表（如按钮、文本框）。

使用 vuedraggable 实现拖拽功能。

组件放置区：

使用 vue-grid-layout 实现网格布局。

支持拖拽调整位置和大小。

点击组件后，可以在参数设置区修改组件属性。

组件参数设置区：

选中组件后，显示组件的属性（如 text、color）。

使用 v-model 动态绑定属性值，实时更新组件。

动态组件：

使用 Vue 的动态组件 () 渲染不同的组件。

在 beforeCreate 钩子中注册动态组件。

运行效果

组件区：显示可拖拽的组件列表（按钮、文本框）。

组件放置区：将组件拖拽到放置区，支持调整位置和大小。

组件参数设置区：选中放置区中的组件后，可以动态修改组件的属性（如文本、颜色等）。

关键点

拖拽功能：使用 vuedraggable 实现组件区的拖拽。

布局功能：使用 vue-grid-layout 实现放置区的网格布局。

动态组件：通过 Vue 的动态组件 () 渲染不同的组件。

参数设置：通过 v-model 绑定组件的属性，实现动态修改。

扩展功能

保存布局：将 layout 数据保存到本地存储或后端。

撤销/重做：通过记录 layout 的历史状态实现撤销和重做功能。

响应式布局：根据屏幕大小调整布局。

安装依赖

确保安装了以下依赖：

npm install vuedraggable vue-grid-layout

通过以上代码，你可以在单个 .vue 文件中实现一个完整的可视化拖拽布局系统！