若是真感情，天天520
一、效果
这封装成一个组件，在需要使用的地方引入即可，完整代码上传到git上面了，地址：https://github.com/zxc1989092...
二、基本配置（左边公共组件)
如果您对vue-draggable的基本用法还不熟悉可以看看我之前写的一篇文章，讲的是vue-dragagble的基本配置和用法
https://segmentfault.com/a/11...
定义json数据
sceneWidgets: [
{
type: 'text',
classify: 'text', // 文字、数字、email、phone等
icon: '',
label: '单行节点',
placeholder: '请输入文本',
text: '',
required: false
},
{
type: 'textarea',
icon: '',
label: '多行节点',
placeholder: '请输入文本',
text: ''
},
{
type: 'radio',
icon: '',
label: '单选',
placeholder: '',
text: '',
style: false,
radioList: [
{
value: 1,
label: 'Mac'
},
{
value: 2,
label: 'Ipad'
}
]
},
{
type: 'checkbox',
icon: '',
label: '多选',
placeholder: '',
text: [],
checkboxList: [
{
value: 1,
label: 'Mac'
},
{
value: 2,
label: 'Ipad'
}
]
},
{
type: 'select',
icon: '',
label: '下拉选项',
placeholder: '',
text: '',
selectList: [
{
value: 1,
label: '测试'
}
]
},
{
type: 'date',
icon: '',
label: '日期时间',
placeholder: '',
text: ''
},
{
type: 'link',
icon: 'ios-link',
label: '链接地址',
placeholder: '',
text: 'http://www.baidu.com',
title: '百度一下'
},
{
type: 'place',
icon: '',
label: '省市区县',
placeholder: '',
text: ''
}
]html代码
基础节点
![]()
{{item.label}}
三、中间编辑区域拖拽配置
html代码
{{index}} {{item.label}}:
{{val.label}}
{{val.label}}
四、右边设置中间编辑器选中的数据，对中间组价进行修改。
不同的组件修改的项目不同，这根据业务需求进行设置，我在这里只做了单选框的设置
html代码
节点名称
4/10
格式
校验
设为必填项