下面介紹為了方便就把項目的文件叫作父組件，然后簽名的那個組件叫作子組件

！ 如有不太明白的地方，多看看代碼注釋。為細節地方

1. 首先根據element ui 在父組件中設置好diglog彈框，并且在全局樣式下，自定義樣式

<div class="canva" @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"      width="85%"      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 class="sign">  <canvas id="canvas" :width="width" :height="height"></canvas>  <div>   <button type="button" @click="clear" id="clear">清空</button>   <button type="button" @click="save" id="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>