|
@@ -60,16 +60,16 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div :class="element.active?'edit-text active':'edit-text'" v-if="element.type=='text'" @click="editImage(index)">
|
|
<div :class="element.active?'edit-text active':'edit-text'" v-if="element.type=='text'" @click="editImage(index)">
|
|
|
- <div class="text" v-if="element.content">{{ element.content }}</div>
|
|
|
|
|
|
|
+ <div class="text" :style="{ backgroundColor: element.bgColor,color: element.color,fontSize: element.size+'px',lineHeight: element.lineHeight+'px' }" v-if="element.content">{{ element.content }}</div>
|
|
|
<div class="empty-image" v-else>
|
|
<div class="empty-image" v-else>
|
|
|
请填写文本信息
|
|
请填写文本信息
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div :class="element.active?'edit-text active':'edit-text'" v-if="element.type=='line'" @click="editImage(index)">
|
|
<div :class="element.active?'edit-text active':'edit-text'" v-if="element.type=='line'" @click="editImage(index)">
|
|
|
- <div class="text" :style="{height:element.height+'px',background:'#f8f8f8'}">{{ element.content }}</div>
|
|
|
|
|
|
|
+ <div class="text" :style="{height:element.height+'px',backgroundColor:element.bgColor}">{{ element.content }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div :class="element.active?'edit-text active':'edit-text'" v-if="element.type=='form'" @click="editImage(index)">
|
|
<div :class="element.active?'edit-text active':'edit-text'" v-if="element.type=='form'" @click="editImage(index)">
|
|
|
- <div class="empty-form">表单占位</div>
|
|
|
|
|
|
|
+ <div class="empty-form" :style="{ backgroundColor: element.bgColor }">表单占位</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="right" v-if="element.active">
|
|
<div class="right" v-if="element.active">
|
|
|
<div class="right-item" @click="delItem(index)"><el-icon><el-icon-delete /></el-icon></div>
|
|
<div class="right-item" @click="delItem(index)"><el-icon><el-icon-delete /></el-icon></div>
|
|
@@ -90,15 +90,42 @@
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
<template v-if="editControl.type == 'line'">
|
|
<template v-if="editControl.type == 'line'">
|
|
|
- <div class="title">设置高度</div>
|
|
|
|
|
|
|
+ <div class="title">辅助空白</div>
|
|
|
<div class="edit-form" style="padding: 25px;">
|
|
<div class="edit-form" style="padding: 25px;">
|
|
|
- <el-slider v-model="editControl.height" />
|
|
|
|
|
|
|
+ <el-form-item label="高度">
|
|
|
|
|
+ <el-slider v-model="editControl.height" />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="背景">
|
|
|
|
|
+ <el-color-picker v-model="editControl.bgColor" size="large" />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <template v-if="editControl.type == 'form'">
|
|
|
|
|
+ <div class="title">表单设置</div>
|
|
|
|
|
+ <div class="edit-form" style="padding: 25px;">
|
|
|
|
|
+ <el-form-item label="背景">
|
|
|
|
|
+ <el-color-picker v-model="editControl.bgColor" size="large" />
|
|
|
|
|
+ </el-form-item>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
<template v-if="editControl.type == 'text'">
|
|
<template v-if="editControl.type == 'text'">
|
|
|
<div class="title">编辑文本信息</div>
|
|
<div class="title">编辑文本信息</div>
|
|
|
<div class="edit-form">
|
|
<div class="edit-form">
|
|
|
- <el-input v-model="editControl.content" type="textarea" :rows="10" placeholder="请输入文本信息"></el-input>
|
|
|
|
|
|
|
+ <el-form-item label="内容">
|
|
|
|
|
+ <el-input v-model="editControl.content" type="textarea" :rows="10" placeholder="请输入文本信息"></el-input>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="背景">
|
|
|
|
|
+ <el-color-picker v-model="editControl.bgColor" size="large" />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="颜色">
|
|
|
|
|
+ <el-color-picker v-model="editControl.color" size="large" />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="字号">
|
|
|
|
|
+ <el-slider v-model="editControl.size" />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="行高">
|
|
|
|
|
+ <el-slider v-model="editControl.lineHeight" />
|
|
|
|
|
+ </el-form-item>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
</div>
|
|
</div>
|
|
@@ -132,9 +159,9 @@ export default {
|
|
|
pageData:{},
|
|
pageData:{},
|
|
|
controlData:{
|
|
controlData:{
|
|
|
image:{"name":"图片控件","url":"","type":"image","active":false},
|
|
image:{"name":"图片控件","url":"","type":"image","active":false},
|
|
|
- text:{"name":"文本控件","content":"","type":"text","active":false},
|
|
|
|
|
- line:{"name":"辅助空白","height":1,"type":"line","active":false},
|
|
|
|
|
- form:{"name":"表单控件","content":"form","type":"form","active":false}
|
|
|
|
|
|
|
+ text:{"name":"文本控件","content":"","type":"text","active":false,"bgColor":"#ffffff","color":"#ffffff","size":12,"lineHieght":24},
|
|
|
|
|
+ line:{"name":"辅助空白","height":1,"type":"line","active":false,"bgColor":"#ffffff"},
|
|
|
|
|
+ form:{"name":"表单控件","content":"form","type":"form","active":false,"bgColor":"#ffffff"}
|
|
|
},
|
|
},
|
|
|
designControl:[],
|
|
designControl:[],
|
|
|
editControl:null
|
|
editControl:null
|