下面介绍为了方便就把项目的文件叫作父组件，然后签名的那个组件叫作子组件
！ 如有不太明白的地方，多看看代码注释。为细节地方
1. 首先根据element ui 在父组件中设置好diglog弹框，并且在全局样式下，自定义样式
<div @click="centerDialogVisible = true"> // click绑定的方法是element提供的 centerDialogVisibe=true 是点击时弹框出现 <img :src="imgsrc" alt=""/> // src = base64 ，下面介绍到 </div> // div是在父组件中，所以有了下面子传给父数据 // 然后设置dialog弹框基本样式 // title为弹框中头部出现的名字 // visible.sync 为click绑定的方法一样 // width为整个dialog的宽度 // <sign></sign>是签名组件,绑定的方法是自定义方法，子传父，后面会详细介绍 <el-dialog title="签名" :visible.sync="centerDialogVisible" center> <sign @draw_save="getSignImg"></sign> </el-dialog> //然后在全局样式下自定义弹框中默认的内容高度 .el-dialog { .el-dialog__header{ height: 20px; } .el-dialog__body{ height: 400px; overflow: auto; // 项目中其他dialog需要滚动条，所以加上就会出现滚动条。签名可忽略 } } .el-dialog__wrapper .el-dialog__title{ font-size: 21px; }
2. 然后在父组件data中定义centerDialogVisibe=false，imgsrc=''
data（）{ return{ imgsrc: '', // base64编码，保存为图片用到 centerDialogVisible: false //dialog弹框显示 fales不显示，true显示 } }
3. 然后dialog弹框的样式写好之后，就该引入组件了，组件是在网上找的，原文地址如下
原文地址是组件下载地址，并没有过多介绍 download.csdn.net/download/we…
组件为单独组件，通过components引入即可使用，根据项目需求自行配置编写样式。当作子组件引入父组件中。
组件内容如下：
<template> <div> <canvas :width="width" :height="height"></canvas> <div> <button type="button" @click="clear">清空</button> <button type="button" @click="save">保存</button> </div> </div> </template> <script> /* * width canvas 宽度 * height canvas 高度 * strokeStyle 线条颜色 * showUrl 是否显示预览图片 * imgWidth img 宽度 * imgHeight img 高度 * draw_clear //监听清空事件 * draw_save //监听保存事件 返回base64 img 路径 * */ var preHandler = function (e) { e.preventDefault() } export default { name: 'drawSign', props: { width: { type: String, default: '565' }, height: { type: String, default: '355' }, strokeStyle: { type: String, default: '#000' }, showUrl: { type: Boolean, default: true }, imgWidth: { type: String, default: '240' }, imgHeight: { type: String, default: '106' } }, data () { return { canvas: null, // canvas ctx: null, // ctx canvas对象 stroke_info: null, // 当前绘图的坐标 url: '' // base64 图像 } }, methods: { init () { let that = this this.canvas = document.getElementById('canvas') this.ctx = this.canvas.getContext('2d') this.stroke_info = this.canvas.getBoundingClientRect() this.canvas.addEventListener('touchstart', function (event) { document.addEventListener('touchStart', preHandler, false) that.darwStart(event) }) this.canvas.addEventListener('touchend', function (event) { document.addEventListener('touchend', preHandler, false) that.drawEnd() }) this.clear() }, darwStart (e) { let that = this let t = e.changedTouches[0] // console.log(t.clientX, t.clientY); this.ctx.strokeStyle = this.strokeStyle this.ctx.beginPath() // 清空所有绘画路径 this.ctx.moveTo(t.clientX - this.stroke_info.left, t.clientY - this.stroke_info.top) this.canvas.addEventListener('touchmove', function (event) { that.darwMove(event) }) }, darwMove (e) { let t = e.changedTouches[0] this.ctx.lineTo(t.clientX - this.stroke_info.left, t.clientY - this.stroke_info.top) this.ctx.stroke() }, drawEnd () { document.removeEventListener('touchstart', preHandler, false) document.removeEventListener('touchmove', preHandler, false) document.removeEventListener('touchend', preHandler, false) }, clear () { this.ctx.clearRect(0, 0, this.width, this.height) this.url = '' this.$emit('draw_clear') }, save () { console.log(this) let data = this.canvas.toDataURL() // let query = {url: data} this.$emit('draw_save', data) // $emit 传data给父组件，当签名签完了之后，会保存图片的，data是base64编码，图片img src直接可识别 // console.log(this.canvas); } }, mounted () { this.$nextTick(_ => { this.init() }) } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> #clear,#save{ width:270px; height:50px; line-height:50px; font-size:20px; position:absolute; } #clear{ bottom:0; } #save{ bottom:0; right:0; } </style>
4. 然后在父组件methods中写方法接收子组件传来的data
// 如上标签中加入的自定义方法 getSignImg (val) { //val 是接收子组件的data的 this.imgsrc = val // 让签的名变成图片 this.centerDialogVisible = false }
子组件有中带有两个按钮，一个是清除，一个是确定，点击确定时，图片保存到原来需要的位置后，dialog应该关闭，所以加上了element ui 提供的
this.centerDialogVisible = false
就可以点击确定，关闭dialog弹框了
总结：
elemnet ui dailog弹框不要写入 标签内，要写在根元素中，不要被包裹，如下结构可参考