vue实现可视化可拖放的自定义表单的示例代码

2019-11-19 11:58:10

字体：大中小

来源：转载

供稿：网友

实现如例子所示的可视化可拖放表单功能。整个页面，分为左中右三栏布局，左栏的部件库的部件（组件）作为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'      }     }  })) },})

拖放操作和数据的组装

在文章开头已经分析好了，整个数据的流向，接下来就是用vuex去实现。

拖放组件使用vuedraggable,拖放完成的时候，鉴于MVVM的特点，画面改变<=>数据改变，操作vuex时注意不能直接修改state

computed: {  myList: {    get() {      return this.$store.state.myList    },    set(value) {      this.$store.commit('updateList', value)    }  }}

整个数据流向：左栏组件库<-->中间展示栏 <---->右栏属性设置, 控制不好数据的话，可能会出现原始数据被修改的情况。请看：

var a = { k: 1 }var b = ab.k = 2console.log(a) // { k: 2 }

这就会无意间导致数据被修改，很难排查。可以使用Object.freeze冻结对象，避免出错。

Object.freeze

function deepFreeze(obj) { // 取回定义在obj上的属性名 var propNames = Object.getOwnPropertyNames(obj); // 在冻结自身之前冻结属性 propNames.forEach(function(name) {  var prop = obj[name];  // 如果prop是个对象，冻结它  if (typeof prop == 'object' && prop !== null)   deepFreeze(prop); }); // 冻结自身(no-op if already frozen) return Object.freeze(obj);}

demo项目github

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：vue使用Proxy实现双向绑定的方法示例

下一篇：详解JavaScript作用域和作用域链