实现拖拽生成vue
拖拽生成 Vue 组件的基础实现
使用 Vue 的 v-draggable 指令或第三方库如 vue-draggable 可以快速实现拖拽功能。安装依赖：
npm install vuedraggable在组件中引入并使用：
<template>
<draggable v-model="list" @end="onDragEnd">
<div v-for="item in list" :key="item.id">{{ item.name }}</div>
</draggable>
</template>
<script>
import draggable from 'vuedraggable';
export default {
components: { draggable },
data() {
return { list: [{ id: 1, name: 'Item 1' }] };
},
methods: {
onDragEnd() {
console.log('拖拽结束');
}
}
};
</script>结合可视化编辑器
使用 vue-design 或 form-generator 等工具实现可视化拖拽生成表单：
npm install form-generator示例代码结构：
<template>
<fm-generator
:data="formData"
:remote="remoteFuncs"
@change="handleChange"
/>
</template>
<script>
import { FmGenerator } from 'form-generator';
export default {
components: { FmGenerator },
data() {
return {
formData: { fields: [] },
remoteFuncs: {}
};
}
};
</script>自定义拖拽逻辑
通过原生 HTML5 拖拽 API 实现自定义控制：
<template>
<div
draggable="true"
@dragstart="handleDragStart"
@dragover.prevent
@drop="handleDrop"
>拖拽元素</div>
</template>
<script>
export default {
methods: {
handleDragStart(e) {
e.dataTransfer.setData('text/plain', '自定义数据');
},
handleDrop(e) {
const data = e.dataTransfer.getData('text/plain');
console.log('接收数据:', data);
}
}
};
</script>动态组件生成
拖拽后动态渲染组件：
<template>
<component
v-for="(item, index) in components"
:key="index"
:is="item.type"
v-bind="item.props"
/>
</template>
<script>
export default {
data() {
return {
components: [
{ type: 'el-button', props: { type: 'primary' } }
]
};
}
};
</script>与后端数据交互
拖拽结果保存到后端：
methods: {
async saveLayout() {
const res = await axios.post('/api/save', this.layoutData);
console.log('保存结果:', res.data);
}
}
