Q-Signature 电子签名

基础用法

创建手写签名

<template>
  <el-button @click="modalOpen=true">打开手写签名</el-button>
  <img :src="img" style="  border: 1px solid #dedede;"/>
  <el-dialog :visible.sync="modalOpen" title="创建手写签名" width="800px">
    <QSignature ref="signature" @success="getImg"/>
    <span slot="footer" class="dialog-footer">
<!--       <el-button @click="addWaterMark">水印</el-button>-->
      <el-button @click="clearSignature" type="warning">重写</el-button>
      <el-button @click="undoSignature" type="info">撤销</el-button>
      <el-button @click="modalOpen = false">取消</el-button>
      <el-button type="primary" @click="handleOk">使用</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        modalOpen: false,
        img: undefined,
      }
    },
    methods: {
      getImg(img) {
        // console.log("img==>", img)
        this.img = img;
      },
      handleOk() {
        this.$refs.signature.handleOk()
        this.modalOpen = false
      },
      undoSignature() {
        this.$refs.signature.undo()
      },
      clearSignature() {
        this.$refs.signature.clear()
        this.startSignature = false
      }
    }
  }
</script>

Expand Copy Copy