htmlradio的text出不来vue拖动改变模板_vue-draggable实现模板⾃定义编辑器若是真感情，天天520
⼀、效果
⼆、基本配置(左边公共组件)
如果您对vue-draggable的基本⽤法还不熟悉可以看看我之前写的⼀篇⽂章，讲的是vue-dragagble的基本配置和⽤法
定义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: 'www.baidu',
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
格式
⽂本
数字
电话号码
邮箱
校验
设为必填项

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。