最近需要实现web端手写签名的功能，找了半天，没有完全符合现有需求的插件，便基于elesigncode的代码二次处理，正好方便可以随时根据需求修改，点击vue-ele-sign跳转（只保留了适配vue框架功能），有其他需求，建议直接看elesigncode源码，elesigncode兼容了jq引入

安装依赖命令

 npm i vue-ele-sign --save-dev

使用例子（可查看App.vue文件）

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

       <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>
            </div>
        </div>
     </div>
    ...
import VueEleSign from 'vue-ele-sign'
export default {
   components: { VueEleSign }
   data() {
        return {
            show: true,
            pen: 'default',
            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)
            })
        },
        onIsEmpty() {
            let isEmpty = this.$refs.elesigncode.isEmpty()
            console.log('isEmpty--', isEmpty)
        }
    }
}

文档

文档链接