vue实现可视化可拖放的自定义表单（代码示例）-木庄网络博客

本文摘自PHP中文网，作者不言，侵删。

本篇文章给大家带来的内容是关于vue实现可视化可拖放的自定义表单（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

实现如例子所示的可视化可拖放表单功能。整个页面，分为左中右三栏布局，左栏的部件库的部件（组件）作为key,拖放到中间区域时，往vuex存放数组数据，拖一个就push一个。点击某个组件时，在右栏显示其属性，其实也就是在vuex存放的数据中查找数据迭代属性。

左中右三栏左右固定中间自适应布局

首先，布局上来看，左右都是可以拉伸的，中间是自适应的布局。

左右分别float left和float right, 中间栏使用margin撑开布局，即可完成布局

动态缩放浏览器窗口来查看效果

动态显示template

第二个重要点就是让template可编程,
例如：传来一个字符串<el-button>按钮</el-button>,如何显示成为组件而不是字符串标签呢。

关键点：使用js和vue extends

新建js

export default Vue.component('CustomTemplate', {
    props: {
        html: String
    },
    render (h) {
      return h(Vue.extend({ // 关键点
          template: `<div class="root-custom-template">${this.html}</div>`,
          data () {
            return {
              current: ''
            }
          },
          methods: {
            doclick (uuid, id) {
              this.current = uuid
              this.$store.commit('EditPanel/changeId', uuid)
            },
            dodragstart (ev) {
              ev.dropEffect = 'move'
            }
          }
    }))
  },
})