手写签名vue-esign

<div v-transfer-dom>
      <popup v-model="showSign">
        <popup-header
          left-text="重签"
          right-text="确认"
          title="手写签名"
          :show-bottom-border="false"
          @on-click-left="handleReset"
          @on-click-right="handleGenerate"></popup-header>
        <vue-esign ref="esign" :height="300" :width="375" :isCrop="isCrop" :lineWidth="lineWidth"
                   :lineColor="lineColor"/>
      </popup>
    </div>
    <div class="fixed_header">
      <x-header :left-options="{showBack: false,preventGoBack:true}" @on-click-back="back">
        {{header}}
        <a slot="right" @click="save">确认</a>
        <a slot="left" @click="sign">签名</a>
      </x-header>
</div>

<script>
import {Popup} from 'vux'
import vueEsign from '@/plugin/vue-esign'
export default {
    directives: {
      TransferDom
    },
    components: {
      PopupHeader,
      vueEsign
    },
    data () {
      return {
        phid: '',
        maindata: {},
        showSign: false,
        lineWidth: 6,
        lineColor: '#000000',
        isCrop: false
      }
    },
    mounted () {
      this.phid = this.$route.params.phid
    },
    methods: {
    	save: function () {
        this.showLoding(true, '正在确认')
        Util.post('对应的接口', this.maindata).then(resp => {
          this.showLoding(false)
          if (resp.data.success) {
            this.showMsg('确认成功', 'success')
          } else {
            this.showMsg(resp.data.msg, 'warn')
          }
        })
      },
      back: function () {
        this.$router.push({
          path: '/xxx'
        })
      },
      sign: function () {
        this.showSign = true
      },
      handleReset: function () {
        this.$refs.esign.reset()
      },
      dataURItoBlob (dataURI) {
        let byteString = window.atob(dataURI.split(',')[1])
        let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
        let ab = new window.ArrayBuffer(byteString.length)
        let ia = new window.Uint8Array(ab)
        for (var i = 0; i < byteString.length; i++) {
          ia[i] = byteString.charCodeAt(i)
        }
        return new window.Blob([ab], {type: mimeString})
      },
      handleGenerate: function () {
        this.$refs.esign.generate().then(res => {
          let resultImg = this.dataURItoBlob(res)
          this.showLoding(true, '正在确认')
          Util.upload('对应的上传接口', resultImg).then(res => {
            this.showLoding(false)
            this.maindata.sign = res.data.data.name
            this.showSign = false
          })
        }).catch(err => {
          this.showLoding(false)
          console.log(err)
        })
      }
    }
   }
</script>

.fixed_header {
    text-align: center;
    position: fixed;
    top: 0;
    width: 100%;
    height: 46px;
 }

参考文档：https://www.npmjs.com/package/vue-esign