vue 电子签名vue-ele-sign

最新推荐文章于 2024-01-29 09:36:57 发布

一只散修道友

最新推荐文章于 2024-01-29 09:36:57 发布

阅读量598

点赞数

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

本文链接：https://blog.csdn.net/weixin_43903629/article/details/128933967

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

安装vue-ele-sign

npm i vue-ele-sign

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>