vue h5手写签名插件

vue h5手写签名插件

先安装
npm install vue-signature

然后main.js全局引入
import vueSignature from “vue-signature”
Vue.use(vueSignature)

代码

<template>
  <div class="signature">
    <vueSignature ref="signature" :w="'100%'" :h="'400px'" :sigOption="option"></vueSignature>
    <button @click="save">提交</button>
    <button @click="clear">清空重写</button>
  </div>
</template>

<style>
</style>
<script>
//引用组件
import vueSignature from "vue-signature";
export default {
  name: "signature",
  data() {
    return {
      option: {
        penColor: "rgb(0, 0, 0)",//画笔颜色
        backgroundColor: "rgb(245,245,245)"//背景颜色
      }
    };
  },
  //注册一下组件
  components: {
    vueSignature
  },
  computed: {},

  mounted() {},
  methods: {
  //保存
    save() {
      var _this = this;
      var png = _this.$refs.signature.save();
      var jpeg = _this.$refs.signature.save("image/jpeg");
      var svg = _this.$refs.signature.save("image/svg+xml");
      console.log(png);
      console.log(jpeg);
      console.log(svg);
    },
    //清空
    clear() {
      var _this = this;
      _this.$refs.signature.clear();
    }
  }
};
</script>