<template>
<div class="context">
<div style="height: 0px;">
<span style="font-family:SourceHanSansK-Bold ;font-size: 0px;">分</span>
<img class="drawImg" id="qrCode" />
<img class="drawImg" id="barCode" />
<label v-for="(v,i) in pathList" :key="i">
<img class="drawImg" :id="gernerteId(v.id)" />
</label>
</div>
<div style="height: 50px;border-bottom: 1px solid #FFFFFF;">
<el-col :span="24" style="height: 50px;">
<div class="grid-content bg-purple-dark" style="height: 50px;background: #d0dce6;">
<el-row style="text-align: right;padding-top: 10px;;">
<el-button size="mini" @click="folder()">取消</el-button>
<el-button size="mini" @click="clearCanvas()" type="danger">重置</el-button>
<el-button size="mini" type="primary" style="margin-right: 10px;" @click="preview()">预览
</el-button>
<div class="demo-image__preview" style="display:none">
<el-image ref="previewUrl" :src="url" :preview-src-list="srcList">
</el-image>
</div>
<el-button size="mini" @click="saveCanvas()" type="success">保存</el-button>
</el-row>
</div>
</el-col>
</div>
<el-row style="height:calc(100% - 50px); ; ">
<div style="height: 100%;overflow:auto;background-color: #FFF;width: 240px;float: left;">
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="基础控件" name="1">
<div>
<div class="base_contro" @click="addRect()">
<span class="base_contro_icon">
<canvas id="iconRect" width="32" height="32"></canvas>
</span>
<span>矩形</span>
</div>
<div class="base_contro" @click="addRoundRect()">
<span class="base_contro_icon">
<canvas id="iconRoundRect" width="32" height="32"></canvas>
</span>
<span>圆角矩形</span>
</div>
<div class="base_contro" @click="addArc()">
<span class="base_contro_icon">
<canvas id="iconArc" width="32" height="32"></canvas>
</span>
<span>圆形</span>
</div>
<div class="base_contro" @click="addLine()">
<span class="base_contro_icon">
<canvas id="iconLine" width="32" height="32"></canvas>
</span>
<span>直线</span>
</div>
<div class="base_contro" @click="addQrCode()">
<span class="base_contro_icon">
<canvas id="iconQrCode" width="32" height="32"></canvas>
</span>
<span>二维码</span>
</div>
<div class="base_contro" @click="addBarCode()">
<span class="base_contro_icon">
<canvas id="iconBarCode" width="32" height="32"></canvas>
</span>
<span>条形码</span>
</div>
<div class="base_contro">
<el-upload multiple action="fileUrl" :limit="limitNum" :file-list="fileList"
:before-upload="beforeUpload" accept=".jpg,.png,.jpeg" :on-success="onSuccess"
:show-file-list="showFileList" :http-request="uploadFile">
<span class="base_contro_icon">
<i style="font-size: 32px;line-height: 38px;" class="el-icon-upload"></i>
</span>
<span id="uploadPic">上传图片</span>
</el-upload>
</div>
</div>
</el-collapse-item>
<el-collapse-item title="动态数据" name="2">
<div class="dynamic_data" @click="addEmptyText()">
<el-button size="mini">空文本</el-button>
</div>
<label v-for="(v,i) in dynamicList" :key="i">
<div class="dynamic_data" @click="addText(v)">
<el-button size="mini">{
{v.name}}</el-button>
</div>
</label>
</el-collapse-item>
<el-collapse-item title="装载图片" name="3">
<div>简化流程：设计简洁直观的操作流程；</div>
<div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
<div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
</el-collapse-item>
</el-collapse>
<!-- <div style="height: 100%;" class="grid-content bg-purple">
<el-button @click="maxScale()">放大</el-button>
<el-button @click="minScale()">缩小</el-button>
</div> -->
</div>
<div style="height: 100%;overflow:auto;width:calc(100% - 480px);float: left;">
<div class="grid-content bg-purple-light" style="height: 100%;">
<div :style="{'width':canvasWidth+'px'}" style="background: #FFF;margin:auto">
<canvas id="canvas" :width="canvasWidth" :height="canvasHeight" @mouseout="mouseup($event)"
@mousewheel="mousewheel($event)" @mouseup="mouseup($event)" @mousemove="mouseMove($event)"
@mousedown="mousedown($event)"></canvas>
</div>
</div>
</div>
<div style="height: 100%;overflow:auto;width: 240px;float: left;">
<div class="grid-content bg-purple " style="height: 100%;background: #FFFFFF;">
<el-tabs v-model="activeName" class="my_content" style="height: 100%;overflow: hidden;">
<el-tab-pane :label="getProperty()" name="first" style="height: 100%;">
<label v-if="canvasIndex>-1" style="height: 100%;">
<div style="min-height: 50px;"
v-if="pathList[canvasIndex].module=='A'&&pathList[canvasIndex].type==7">
<div class="property">
内容</div>
<div class="property_div">
<el-input readonly="readonly" type="textarea" autosize @input="updateCanvas()"
placeholder="请输入内容" v-model="pathList[canvasIndex].content">
</el-input>
<el-button @click="uploadAgain()" style="float: right;margin-top: 5px;"
type="primary" size="mini">重新上传</el-button>
</div>
</div>
<div style="min-height: 40px;" v-if="pathList[canvasIndex].module=='B'">
<div class="property">
内容</div>
<div class="property_div" style="margin-bottom: 10px;">
<el-input type="textarea" autosize @input="updateCanvas()" placeholder="请输入内容"
v-model="pathList[canvasIndex].content">
</el-input>
</div>
</div>
<div style="min-height: 50px;"
v-if="pathList[canvasIndex].module=='A'&&(pathList[canvasIndex].type==5||pathList[canvasIndex].type==6)">
<div class="property">
内容</div>
<div class="property_div">
<el-input type="textarea" autosize @input="updateCanvas($event)"
placeholder="请输入内容" v-model="pathList[canvasIndex].content">
</el-input>
</div>
</div>
<div v-if="pathList[canvasIndex].module=='A'&&pathList[canvasIndex].type<4"
style="height:50px;">
<div class="property">
填充</div>
<div class="property_div">
<el-radio-group @change="updateCanvas()" size="mini"
v-model="pathList[canvasIndex].full">
<el-radio-button label="1">是</el-radio-button>
<el-radio-button label="2">否</el-radio-button>
</el-radio-group>
</div>
</div>
<div v-if="(pathList[canvasIndex].module=='A'&&pathList[canvasIndex].type<5)||(pathList[canvasIndex].module=='B'&&pathList[canvasIndex].type<3)"
style="height:50px;">
<div class="property">
颜色</div>
<div class="property_div">
<el-radio-group @change="updateCanvas()" size="mini"
v-model="pathList[canvasIndex].color">
<el-radio-button label="#000000">黑</el-radio-button>
<el-radio-button label="#FFFFFF">白</el-radio-button>
<el-radio-button label="#FF0000">红</el-radio-button>
</el-radio-group>
</div>
</div>
<div style="height: 50px;"
v-if="pathList[canvasIndex].module=='B'&&(pathList[canvasIndex].type==1||pathList[canvasIndex].type==2)">
<div class="property">
字体大小</div>
<div class="property_div">
<el-input-number @change="updateCanvas()" size="mini" style="width: 140px;"
v-model="pathList[canvasIndex].fontSize" :min="10" label="描述文字">
</el-input-number>
</div>
</div>
<div style="min-height: 120px;"
v-if="pathList[canvasIndex].module=='B'&&(pathList[canvasIndex].type==1||pathList[canvasIndex].type==2)">
<div class="property">
字体样式</div>
<div class="property_div">
<div style="height: 40px;">
<el-button type="primary" @click="editFontStyle(1)" class="font_style"
v-if="pathList[canvasIndex].bold=='1'" size="mini">粗体</el-button>
<el-button class="font_style" @click="editFontStyle(1)"
v-if="pathList[canvasIndex].bold=='2'" size="mini">粗体</el-button>
<el-button type="primary" v-if="pathList[canvasIndex].italic=='1'"
@click="editFontStyle(2)" class="font_style" size="mini">斜体</el-button>
<el-button v-if="pathList[canvasIndex].italic=='2'"
@click="editFontStyle(2)" class="font_style" size="mini">斜体</el-button>
<el-button type="primary" v-if="pathList[canvasIndex].removeLine=='1'"
class="font_style" @click="editFontStyle(3)" size="mini">删除线</el-button>
<el-button class="font_style" @click="editFontStyle(3)"
v-if="pathList[canvasIndex].removeLine=='2'" size="mini">删除线</el-button>
</div>
<div style="height: 40px;">
<el-button @click="editFontStyle(4,1)" class="font_style" type="success"
v-if="pathList[canvasIndex].textAlign=='1'" size="mini">居左</el-button>
<el-button @click="editFontStyle(4,1)" class="font_style"
v-if="pathList[canvasIndex].textAlign!&
最低0.47元/天 解锁文章
4376
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
