vue-esign移动端签名插件

最新推荐文章于 2025-04-09 18:02:36 发布

帆酱

最新推荐文章于 2025-04-09 18:02:36 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_41187842/article/details/130345223

vue 专栏收录该内容

50 篇文章

订阅专栏

该文介绍了如何在Vue项目中集成vue-esign组件，用于实现手写签名功能。用户可以复用签名模板，调整画布尺寸，完成签名后，通过方法生成base64编码的图片，进一步处理并上传至服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、先使用npm安装vue-esign

2、复用模板signature.vue

<template>
  <div id="sign_box">
    <van-nav-bar :title="title" left-text="取消签名" left-arrow @click-left="closeDialog" :fixed="true" :placeholder="true" class="nav-bar" />
    <div class="canvaspanel">
      <div class="canvasborder">
        <vue-esign ref="esign" :width="d_w" :height="d_h" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
      </div>
      <div class="buttongroup">
        <van-button type="primary" size="small" @click="handleReset" class="empty">清空</van-button>
        <van-button type="info" size="small" @click="handleGenerate" class="autograph">确定</van-button>
      </div>
    </div>
    <img :src="resultImg" alt="" v-show="false">
  </div>
</template>
<script>
import { Toast, Dialog } from 'vant'

export default {
  name: 'esign',
  components: {

  },
  props: {
    d_h: {
      type: [String, Number]
    },
    d_w: {
      type: [String, Number]
    }
  },
  data () {
    return {
      title: '手写签名',
      lineWidth: 10,
      lineColor: '#000000',
      bgColor: '',
      resultImg: '',
      isCrop: false
    }
  },
  methods: {
    // 清空画板
    handleReset () {
      this.$refs.esign.reset()
    },
    // 写完提交
    handleGenerate () {
      this.$refs.esign.generate().then(res => {
        this.resultImg = res
        if (this.resultImg) {
          this.to_fater()
        } else {
          Toast.fail('请签名')
        }
      }).catch(() => {
        Toast.fail('请签名')
      })
    },
    to_fater () {
      Dialog.confirm({
        title: '提示',
        message: '您是否确定上传签名'
      })
        .then(() => {
          // on confirm
          this.$emit('close', this.resultImg)
        })
        .catch(() => {
          // on cancel
        })
    },
    // 关闭悬浮框
    closeDialog () {
      this.resultImg = ''
      this.$emit('close', this.resultImg)
    }
  }
}
</script>
<style  lang="less" scope>
#sign_box{
  //横向操作，由于微信不自动横屏，所以手动横屏
  .nav-bar.van-nav-bar__placeholder{
    width: 100%;
    height: 46px !important;
    transform: rotate(90deg);
    position: fixed;
    top: 0;
    right: -100%;
    transform-origin: 0% 0%;
    z-index: 10;
  }
}
.canvasborder {
  border: solid 1px #ccc;
}
.canvaspanel {
  position: relative;
}

.buttongroup {
    font-size: 0.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(90deg);
    height: 40px;
    z-index: 10;
    left: -30px;
    position: fixed;
    bottom: 100px;
    .autograph{
      margin-left: 15px;
    }
}
.autograph {
  margin-left: 20px;
}
</style>

在页面引用

// 1.引入组件

import signCanvas from '@/components/signature.vue'

<!-- 签名弹窗 -->
    <van-popup :style="{ height: '100%' }" v-model="showqm" get-container="body" position="bottom">
        <signCanvas @close="closeDialog" :d_h="h" :d_w="w"></signCanvas>
    </van-popup>

h和w是获取的设备可视页面宽度

// 关闭手写板，获取签名的base64
    closeDialog (e) {
      // 签名赋值 这里的e就是base64了，直接使用
      console.log(e)
      // 关闭签名框
      this.showqm = false
      // 签名完毕，提交数据,将流文件转为png文件
      let obj_file = this.dataURLtoFile(e, 'a.png')
      const formdata = new FormData()
      formdata.append('signfile', obj_file)
      formdata.append('no_str', this.info.no_str)
      // let config = {
      //   headers: { 'Content-Type': 'multipart/form-data' }
      // }
      addAccessToken()
        .post(createAPI('check/upload_sign'), formdata, {
          validateStatus: status => status === 200
        })
        .then(reponse => {
          // 跳转页面
          this.$storeLocal.remove('select_agreement_para')
          setTimeout(() => {
            replaceUrl('/line_agreement/sub_success')
          })
        })
        .catch((res) => {
          console.log(res)
        })
    },
    dataURLtoFile (dataurl, filename) { // 将base64转换为文件
      let arr = dataurl.split(',')
      let mime = arr[0].match(/:(.*?);/)[1]
      let bstr = atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, {type: mime})
    },

效果：