Vue如何实现可视化拖拽表单

<template>
  <div class="form-builder">
    <!-- 表单项拖拽列表 -->
    <draggable v-model="formItems" @end="updateFormItems">
      <div
        class="form-item"
        v-for="(item, index) in formItems"
        :key="item.id">
        {{ item.label }} - {{ item.type }}
      </div>
    </draggable>
  </div>
</template>
 
<script>
import draggable from 'vuedraggable';
 
export default {
  components: {
    draggable,
  },
  data() {
    return {
      formItems: [
        { id: 1, label: 'Input', type: 'input' },
        { id: 2, label: 'Select', type: 'select' },
        { id: 3, label: 'Date Picker', type: 'datePicker' },
      ],
    };
  },
  methods: {
    updateFormItems() {
      // 更新formItems的方法，可以用于保存新的排序
    },
  },
};
</script>
 
<style>
.form-builder {
  /* 样式内容 */
}
.form-item {
  /* 样式内容 */
}
</style>

这个代码实例展示了如何在Vue应用中使用draggable组件来实现表单项的拖拽排序功能。formItems数组中的对象代表了表单项，每个对象都有一个唯一的id、label和type属性。draggable组件允许用户通过拖拽来重新排列列表中的表单项。当拖拽结束时，会调用updateFormItems方法来处理新的排序，例如可以将排序结果发送到服务器或本地存储。