vue 电子签名vue-ele-sign

安装vue-ele-sign

npm i vue-ele-sign
1

api

代码

<template>
  <div class="elesigncode-content">
    <div class="hello">
      <vue-ele-sign
        ref="elesigncode"
        direction="direction"
        :pen="pen"
        :bgImg="bgImg"
        :imgType="imgType"
        :readOnly="readOnly"
        :vsConsole="true"
        class="sign"
      />
    </div>

    <div class="btn-box">
      <button @click="setPen">切换画笔</button>
      <button @click="onClear">清空</button>
      <button @click="onClearSign">清空签名</button>
      <button @click="setBgImg">设置背景图片</button>
      <button @click="getImg">获取图片</button>
      <button @click="getFile">获取文件</button>
      <button @click="onIsEmpty">是否有签名</button>
      <button @click="getData">获取数据</button>
    </div>
  </div>
</template>

<script>

import VueEleSign from "vue-ele-sign";
export default {
  components: {
    VueEleSign,
  },
  data() {
    return {
      show: true,
      pen: "writing",
      imgType: "png",
      readOnly: false,
      direction: "left", //left :向左横屏
      imgUrl: "",
      bgImg: "",
    };
  },
  methods: {
    setPen() {
      this.pen = this.pen == "default" ? "writing" : "default";
    },
    onClear() {
      this.$refs.elesigncode.clear();
    },
    onClearSign() {
      this.$refs.elesigncode.clearSign();
    },
    setBgImg() {
      this.$refs.elesigncode.setBgImg(this.bgImg);
    },
    getImg() {
      this.$refs.elesigncode.getImg().then((res) => {
        console.log("图片地址1", res);
        this.bgImg = res;
      });
    },
    getFile() {
      this.$refs.elesigncode.getFile().then((res) => {
        console.log("文件1", res);
      });
    },
    getData() {
      console.log(this.$refs.elesigncode.getJson());
      return this.$refs.elesigncode.getJson();
    },
    onIsEmpty() {
      let isEmpty = this.$refs.elesigncode.isEmpty();
      console.log("isEmpty--", isEmpty);
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.elesigncode-content {
  margin: 30px;
}
.hello {
  width: 95%;
  margin-left: 2.5%;
  margin-right: 2.5%;
  margin-top: 10px;
  margin-bottom: 10px;
  height: 300px;
  border: 1px solid #e6eaee;
}
.sign{
    width: 95%;
    height: 100%; 
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100