vue拖动改变模板_vue-draggable实现模板自定义编辑器

若是真感情，天天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代码

基础节点

:group="{name: 'scene', pull: 'clone'}"

:sort="false"

v-model="sceneWidgets"

dragClass="pullDragClass"

chosenClass="pullChosenClass"

ghostClass="pullGhostClass"

>

{ {item.label}}

三、中间编辑区域拖拽配置

html代码

:group="{name: 'scene', put: true}"

:put='true'

handle='.moveHandle'

v-model="sceneEditor"

@change="changeItem"

@choose="chooseItem"

class="putList"

@add="addItem"

>

{ {index}} { {item.label}}:

{ {val.label}}

{ {val.label}}

{ {item.label}}

{ {item.title}}

四、右边设置中间编辑器选中的数据，对中间组价进行修改。

不同的组件修改的项目不同，这根据业务需求进行设置，我在这里只做了单选框的设置

html代码

节点名称

4/10

格式

文本

数字

电话号码

邮箱

校验

设为必填项