今天给大家分享一款小巧的 Vue 签名组件zmSign。

zm-sign 使用vue+canvas开发的简易签名涂鸦组件。

安装

npm i zm-sign -S
# or 
yarn add zm-sign

引入组件

在main.js中引入

import Vue from 'vue';
import ZmSign from 'zm-sign';
import "zm-sign/lib/zm-sign.css";

Vue.use(ZmSign);

使用

<template>
  <div style="height: 420px; text-align:center;">
    <zm-sign
     ref="sign"
     line-color="#409EFF"
     :line-width="4"
     :canvas-width="692"
     :canvas-height="350"
     :footer="false"
     @on-clear="handleClear"
     @on-done="handleDone"
    ></zm-sign>
    <Button @click="clear">清空</Button>
    <Button @click="done">完成</Button>
  </div>
</template>
<script>
    export default {
      methods:{
        async done(){
          let res = await this.$refs.sign.done();
          console.log(res)
        },
        clear(){
          console.log("clear", this.$refs.sign)
          this.$refs.sign.clear();
        },
        handleClear(){
          this.$Message.success("画布已清空")
        },
        handleDone(data){
          console.log(data)
        }
      }  
    }
</script>

zm-sign 超级简易的一款画布签名组件，如果大家感兴趣可以去看看。

最后附上项目文档地址

// 文档地址
https://sangtian152.gitee.io/zm-sign/#/demo
// 仓库地址
https://gitee.com/sangtian152/zm-sign

Ok，今天的分享就到这里了。