vue实现可视化可拖放的自定义表单

import. 发布于2019-08-23 16:08 / 604人阅读

摘要：实现如例子所示的可视化可拖放表单功能。点击某个组件时，在右栏显示其属性，其实也就是在存放的数据中查找数据迭代属性。左中右三栏左右固定中间自适应布局首先，布局上来看，左右都是可以拉伸的，中间是自适应的布局。可以使用冻结对象，避免出错。

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

GPU云服务器云服务器可拖放图片剪裁 java表单可拖拽 php的自定义函数 vue表单控件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102718.html

使用 Drag and Drop 给Web应用提升交互体验

摘要：注意点在鼠标操作拖放期间，有一些事件可能触发多次，比如和。可拖拽元素，建议使用，设定可拖拽元素的鼠标游标，提升交互。在中使用拖拽中使用可以直接绑定到组件上。什么是 Drag and Drop （拖放）？简单来说，HTML5 提供了 Drag and Drop API，允许用户用鼠标选中一个可拖动元素，移动鼠标拖放到一个可放置到元素的过程。我相信每个人都或多或少接触过拖放，比如浏览...

legendmohe 2019-08-02 12:03 评论0 收藏0
Drag&Drop 拖放API简介以及在React中的实践

摘要：如其他属性及方法，详细可以查看跨终端能力跨终端能力是最大的特点。在指定区域的事件中，通过对象的属性，即可获得文件列表信息，如打印文件名在中实践在项目中使用，依然遵循数据驱动的原则，即事件数据更新。同时，在事件中执行判断。最近有个需求，需要产品导航栏支持拖放。虽然开源社区已有不少成熟的拖放库，但考虑到代码可控性和可定制性，还是自己写吧。选型关于选型，前端实现拖放功能，无外乎几种： 1、通...

lcodecorex 2019-05-23 17:27 评论0 收藏0
jsPlumb（4）-元素拖放

摘要：使用的一个普通的特性就是元素的拖放。拖拽内嵌元素拖拽多个元素拖拽时文本选中浏览器默认的拖拽行为是选择里的元素。废止了这种行为，没有。为了支持这种情况，被拖拽元素都增加了这个类。在拖拽结束后被去除。使用jsPlumb的一个普通的特性就是元素的拖放。方法如下：myInstanceOfJsPlumb.draggable(elementId); 接受的参数类型元素id的字符串元素 li...

Lowky 2019-08-21 10:42 评论0 收藏0