热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了vue实现可视化可拖放的自定义表单的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

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

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

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

动态显示template

第二个重要点就是让template可编程,

例如: 传来一个字符串按钮,如何显示成为组件而不是字符串标签呢。

关键点: 使用js和vue extends

新建js

export default Vue.component('CustomTemplate', {
  props: {
    html: String
  },
  render (h) {
   return h(Vue.extend({ // 关键点
     template: `
${this.html}
`, 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 = a
b.k = 2
console.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

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


推荐阅读
author-avatar
时尚经典语录覀---
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有