今天给大家分享一款小巧的 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);

使用

<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，今天的分享就到这里了。