vue实现可视化可拖放的自定义表单的示例代码资源-CSDN文库

126 浏览量 2021-01-19 18:53:47 上传评论收藏 46KB PDF 举报

资源推荐

资源详情

资源评论

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'

}

}

}))

},

})

拖放操作和数据的组装拖放操作和数据的组装

在文章开头已经分析好了，整个数据的流向，接下来就是用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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

weixin_38606206

粉丝: 3
资源: 926

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip