vue+element如何添加簽名效果

小編給大家分享一下vue+element如何添加簽名效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

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

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

<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;
}

2. 然后在父組件data中定義centerDialogVisibe=false，imgsrc=''

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

3. 然后dialog彈框的樣式寫好之后，就該引入組件了，組件是在網(wǎng)上找的，原文地址如下

原文地址是組件下載地址，并沒有過多介紹 download.csdn.net/download/we…

組件為單獨組件，通過components引入即可使用，根據(jù)項目需求自行配置編寫樣式。當作子組件引入父組件中。

組件內(nèi)容如下：

<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>

4. 然后在父組件methods中寫方法接收子組件傳來的data

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

子組件有中帶有兩個按鈕，一個是清除，一個是確定，點擊確定時，圖片保存到原來需要的位置后，dialog應(yīng)該關(guān)閉，所以加上了element ui 提供的

this.centerDialogVisible = false


就可以點擊確定，關(guān)閉dialog彈框了

總結(jié)：

elemnet ui dailog彈框不要寫入 標簽內(nèi)，要寫在根元素中，不要被包裹，如下結(jié)構(gòu)可參考

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

想要點擊某個元素出現(xiàn)dialog彈框時，就給某個元素加上element提供的點擊事件（），然后dialog中的定義（:visible.sync）也必須一致

在沒有引入組件之前，是在父組件中寫js代碼，因為dialog彈框出現(xiàn)時，彈框里面的dom才會加載，js會立即執(zhí)行，用了其提供的open方法也不是很理想，js代碼總會比dom先執(zhí)行一步，我也放在定時器中讓js緩慢執(zhí)行，然后清除定時器又成了問題，所以就放棄了這種寫法，改為組件引入。

如果某個元素綁定了element提供的點擊事件之后，想又得綁定一個點擊事件，那么把提供的方法寫在自己的方法中

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

想要改變canvas寬高，畫線粗細，畫線顏色，畫線背景，一定在子組件內(nèi)props中更改，自定義改會出問題，canvas描線會模糊，有鋸齒

父組件想要子組件中的data，就利用子傳父，$emit ,父組件得用子組件的data，保存為圖片，子組件就得傳出去

然后以上就總結(jié)完畢，搜了好多文章，并沒有詳細的介紹簽名效果，有的是需要引入插件，有的是需要寫js，有的更是要充某幣購買，很是麻煩，然后再這里寫上這篇文章，是為了幫助更多的人，也許公司項目剛好也做這個效果呢，這些都有可能。不過還好下載的組件沒花錢，花錢買了，怪怪的，免費最好。

以上是“vue+element如何添加簽名效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！