<div class="canva" @click="centerDialogVisible = true">
// click綁定的方法是element提供的 centerDialogVisibe=true 是點擊時彈框出現(xiàn)
      <img :src="imgsrc" alt=""/> // src = base64 ，下面介紹到
</div>
// div是在父組件中，所以有了下面子傳給父數(shù)據(jù)
// 然后設(shè)置dialog彈框基本樣式
// title為彈框中頭部出現(xiàn)的名字
// visible.sync 為click綁定的方法一樣
// width為整個dialog的寬度
// <sign></sign>是簽名組件,綁定的方法是自定義方法，子傳父，后面會詳細介紹
<el-dialog
      title="簽名"
      :visible.sync="centerDialogVisible"
      width="85%"
      center>
      <sign @draw_save="getSignImg"></sign>
</el-dialog>
//然后在全局樣式下自定義彈框中默認的內(nèi)容高度
.el-dialog {
  .el-dialog__header{
    height: 20px;
  }
  .el-dialog__body{
    height: 400px;
    overflow: auto; // 項目中其他dialog需要滾動條，所以加上就會出現(xiàn)滾動條。簽名可忽略
  }
}
.el-dialog__wrapper .el-dialog__title{
  font-size: 21px;
}

data（）{
  return{
    imgsrc: '', // base64編碼，保存為圖片用到
    centerDialogVisible: false //dialog彈框顯示 fales不顯示，true顯示
  }
}

<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  是否顯示預(yù)覽圖片
 * imgWidth img 寬度
 * imgHeight img 高度
 * draw_clear  //監(jiān)聽清空事件
 * draw_save  //監(jiān)聽保存事件 返回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>

// 如上標簽中加入的自定義方法
getSignImg (val) {
   //val 是接收子組件的data的
   this.imgsrc = val // 讓簽的名變成圖片
   this.centerDialogVisible = false 
  }

</el-col>
     </el-row>
      <el-dialog
      title="簽名"
      :visible.sync="centerDialogVisible"
      width="85%"
      center>
      <sign @draw_save="getSignImg"></sign>
     </el-dialog>
    </div>

<div class="canva" @click="isShow">
methods：{
  isShow（）{
    this.centerDialogVisible = true
    //...
  }
}