前端签名组件vue-esign的再封装

1、注意由于该组件如果刚加载马上去签名，会有延迟回显或者是拿不到签名(显示为空的情况)，故设置一个延时定时器

<template>
    <el-dialog title="签字" :visible.sync="dialogVisible" width="800px" append-to-body>
            <!-- 使用这个签名组件 -->
        <vue-esign
            style="border:1px solid #999;"
            ref="esign"
            class="mySign"
            :width="800"
            :height="300"
            :isCrop="isCrop"
            :lineWidth="lineWidth"
            :lineColor="lineColor"
            :bgColor.sync="bgColor"
        />
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleGenerate" type="primary">生成签字图片</el-button>
            <el-button @click="handleReset">清空画板</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
        </span>
    </el-dialog>
</template>
<script>
import vueEsign from 'vue-esign'
export default{
    components:{vueEsign},
    data(){
        return{
            dialogVisible: false, // 弹框是否开启
            lineWidth: 6, // 画笔的线条粗细
            lineColor: "#000000", // 画笔的颜色
            bgColor: "", // 画布的背景颜色
            resultImg: "", // 最终画布生成的base64图片
            isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
        }
    },
    methods:{
        init(){
            this.dialogVisible = true;
            setTimeout(() => {
                this.$nextTick(() => {
                    this.handleReset();
                });
            }, 500)
        },
         // 清空画板
        handleReset() {
            this.$refs.esign.reset();
        },
        // 生成签字图
        handleGenerate() {
            setTimeout(() => {
                this.$nextTick(()=>{
                    this.$refs.esign
                    .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
                    .then((res) => {                    
                        this.dialogVisible = false;
                        this.resultImg = res;
                        setTimeout(()=>{
                            this.handleReset();
                        },50)                        
                        this.$emit("submit",res);
                    })
                    .catch((err) => {
                        // 画布没有签字时会执行这里提示一下
                        this.$message({
                            type: "warning",
                            message: "请签名后再生成签字图片",
                        });                
                    });
                })                
            }, 600); 
            // // 在这里向后端发请求把转换后的base64文件传给后端，后端接收以后再转换成图片做静态图片存储
            // // 当然也可以把base64转成流文件blob格式的，类似上传给后端这样，具体哪种方式看后端要求
            // setTimeout(() => {
            //     // 这里要使用定时器稍微延后以后就能取到base64数据了，当然也可以再加一个确认按钮，如：确认使用这张base64签名图片
            //     // 点击确认以后，在其回调函数中，再把base64的签名图片传给后端用于存储
            //     console.log('我是签字后的base64图片',this.resultImg);
            // }, 200);            
        }
    }
}
</script>

2、使用时

<!-- 签字 -->
        <dialogEsign ref="dialogEsign" @submit="getEsign"/>