Vue 电子签名

一、安装使用

npm install vue-ele-sign --save-dev 

二、页面引入使用

<template>
  <div>
    <div class="elesigncode-content">
      <vue-ele-sign
        ref="elesigncode"
        direction="direction"
        :pen="pen"
        :imgType="imgType"
        :readOnly="readOnly"
        :vsConsole="true"
        class="sign"
      />
      <div class="btn-box">
        <button @click="setPen">切换画笔</button>
        <button @click="onClear">撤销</button>
        <button @click="onClearSign">清空签名</button>
        <button @click="getImg">获取图片</button>
        <button @click="getFile">获取文件</button>
      </div>
    </div>
  </div>
</template>

<script>
import VueEleSign from "vue-ele-sign";
export default {
  components: {
    VueEleSign,
  },
  data() {
    return {
      pen: "default",
      imgType: "png",
      readOnly: false,
      direction: "left", //left :向左横屏
    };
  },
  methods: {
    setPen() {
      this.pen = this.pen == "default" ? "writing" : "default";
    },
    onClear() {
      //   this.$refs.elesigncode.clear();
      this.$refs.elesigncode.undo();
    },
    onClearSign() {
      this.$refs.elesigncode.clearSign();
    },
    getImg() {
      let isEmpty = this.$refs.elesigncode.isEmpty();
      if (isEmpty) {
        this.$message.error("请签名之后提交！");
      } else {
        this.$refs.elesigncode.getImg().then(res => {
          console.log("图片地址1", res);
        })
      }
    },
    getFile() {
        let isEmpty = this.$refs.elesigncode.isEmpty();
      if (isEmpty) {
        this.$message.error("请签名之后提交！");
      } else {
       this.$refs.elesigncode.getFile().then((res) => {
        console.log("文件1", res);
      });
      }
    },
  },
};
</script>

<style scoped>
.elesigncode-content {
  margin: 30px;
}
.sign {
  border: 1px solid red;
}
</style>