vue-esign签字板,鼠标写名,支持PC\移动端

最新推荐文章于 2024-04-02 15:02:16 发布

lannieZ

最新推荐文章于 2024-04-02 15:02:16 发布

阅读量1.1k

点赞数 1

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

本文链接：https://blog.csdn.net/lannieZ/article/details/128014429

版权

vue 专栏收录该内容

69 篇文章 4 订阅

订阅专栏

在这里插入图片描述

vue里实现鼠标签名,支持PC\移动端,返回base64或者file格式的文件流

1 、安装插件 vue-esign


npm install vue-esign --save

2、在main.js引用


import vueEsign from 'vue-esign'
Vue.use(vueEsign)

3、页面中使用


<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>这是电子签名组件</span>
      </div>
      <div class="text item">
        1.定义数据和清空、生成事件回调
      </div>
      <div class="text item">
        2.模板中使用组件,并属性传值
      </div>
      <div class="text item">
        3.上传到oss并返回访问路径在模板中显示
      </div>
      <div class="text item">
        <img :src="resultImg" class="show-img" v-if="resultImg != ''">
        <div class="show-info" v-else>请在下方书写电子签名</div>
      </div>
    </el-card>
    <el-card class="qianming-container" body-style="padding:0px">
      <vue-esign ref="esign" :isCrop="isCrop" :width="600" :height="300" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor"></vue-esign>
      <div class="contro-container">
        <el-button type="danger" @click="handleReset">清空画板</el-button>
        <el-button type="primary" @click="handleGenerate">生成图片</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      lineWidth: 6,
      lineColor: '#000000',
      bgColor: '',
      resultImg: '',
      isCrop: false
    }
  },
  methods: {
    //清空画板..
    handleReset() {
      this.$refs.esign.reset();
      this.resultImg = ''
    },
    //生成签名图片..
    handleGenerate() {
      this.$refs.esign.generate().then(res => {
        let randnum = Math.random() * 10000000000000
        randnum = Math.floor(randnum)
        let fileName = "dianziqianming/" + randnum + '.png'
        let file = this.dataURLtoFile(res, fileName)
        console.log(file, "file")
        // 调接口
      }).catch(err => {
        console.log(err)
        this.$message.error('请签名之后提交！')
      })
    },
    //将base64转换为文件..
    dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    }
  }
}
</script>

<style scoped>
button {
  height: 40px;
}

.show-img {
  width: 400px;
  height: 200px;
  border: 1px solid #123456;
}

.show-info {
  width: 400px;
  height: 200px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contro-container {
  width: 600px;
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background-color: #D3D3D3;
  position: absolute;
  bottom: 0px;
}

.qianming-container {
  width: 600px;
  height: 350px;
  margin: 20px auto;
  position: relative;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 95%;
  margin-left: 2.5%;
  margin-top: 20px;
}
</style>