#插件讨论# 【 手写签字，手写签名，电子签名，签字， - 赵永强 】弹窗使用方法报错

可以的，把页面当组件使用，组件里面的onLoad 改 mounted

1.  
<uni-popup ref="popup" background-color="#fff" @change="change">  
    <q-sign></q-sign>  
</uni-popup>  
2.  
import qSign from '@/uni_modules/q-sign/pages/q-sign'  

3.  
components:{  
    qSign  
},  

4.  
goSign(worker){  
    this.$refs.popup.open()  
}  

5.uni_modules/q-sign/pages/q-sign  
<template>  
    <view class="root-view">  
        <view class="wrapper">  
            <view class="handCenter">  
                <canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart"  
                    @touchmove="uploadScaleMove" canvas-id="handWriting"></canvas>  
            </view>  
            <view class="btn-box">  
                <button @click="retDraw" class="btn delBtn">重写</button>  
                <button @click="saveCanvasAsImg" class="btn saveBtn">保存</button>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                canvasName: 'handWriting',  
                ctx: '',  
                startX: null,  
                startY: null,  
                canvasWidth: 0,  
                canvasHeight: 0,  
                selectColor: 'black',  
                lineColor: '#1A1A1A', // 颜色  
                lineSize: 5, // 笔记倍数  
                name:'', //用来区分多个签字  
            };  
        },  
        mounted() {  
            this.name = 'worker1'  
            this.ctx = uni.createCanvasContext("handWriting");  
            this.$nextTick(() => {  
                uni.createSelectorQuery().select('.handCenter').boundingClientRect(rect => {  
                        this.canvasWidth = rect.width;  
                        this.canvasHeight = rect.height;  
                        /* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */  
                        this.setCanvasBg('#fff');  
                    })  
                    .exec();  
            });  
        },  
        methods: {  
            // 笔迹开始  
            uploadScaleStart(e) {  
                this.startX = e.changedTouches[0].x  
                this.startY = e.changedTouches[0].y  
                //设置画笔参数  
                //画笔颜色  
                this.ctx.setStrokeStyle(this.lineColor)  
                //设置线条粗细  
                this.ctx.setLineWidth(this.lineSize)  
                //设置线条的结束端点样式  
                this.ctx.setLineCap("round") //'butt'、'round'、'square'  
                //开始画笔  
                this.ctx.beginPath()  
            },  
            // 笔迹移动  
            uploadScaleMove(e) {  
                //取点  
                let temX = e.changedTouches[0].x  
                let temY = e.changedTouches[0].y  
                //画线条  
                this.ctx.moveTo(this.startX, this.startY)  
                this.ctx.lineTo(temX, temY)  
                this.ctx.stroke()  
                this.startX = temX  
                this.startY = temY  
                this.ctx.draw(true)  
            },  
            /**  
             * 重写  
             */  
            retDraw() {  
                this.ctx.clearRect(0, 0, 700, 730);  
                this.ctx.draw();  
                //设置canvas背景  
                this.setCanvasBg('#fff');  
            },  

            //生成图片  
            saveCanvasAsImg() {  
                console.log(this.startX,this.startY);  
                if(!this.startX || !this.startY){  
                    uni.showToast({  
                        title:'请签字',  
                        icon:'none'  
                    })  
                    return  
                }  
                uni.canvasToTempFilePath({  
                    canvasId: 'handWriting',  
                    fileType: 'png',  
                    quality: 1, //图片质量  
                    success:(res)=> {  
                        uni.$emit('q-sign',{name:this.name,tempFilePath:res.tempFilePath})  

                    }  
                });  
            },  

            //设置canvas背景色  不设置  导出的canvas的背景为透明  
            //@params：字符串  color  
            setCanvasBg(color) {  

                /* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */  
                //rect() 参数说明  矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度  
                //这里是 canvasHeight - 4 是因为下边盖住边框了，所以手动减了写  
                this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight - 4);  
                // ctx.setFillStyle('red')  
                this.ctx.setFillStyle(color);  
                this.ctx.fill(); //设置填充  
                this.ctx.draw(); //开画  
            }  
        }  
    };  
</script>  

<style>  
    .root-view {  
        background: #f6f6f6;  
        height: calc(100vh - 44px);  
        display: flex;  
        /* align-items: center; */  
        justify-content: center;  
        /* padding-top: 40px; */  
    }  
    .btn-box{  
        display: flex;  
        justify-content: space-around;  
        align-items: center;  
    }  
    .btn{  
        width: 200rpx;  
        height: 70rpx;  
        line-height: 70rpx;  
        color: #fff;  
        font-size: 28rpx;  
    }  
    .delBtn{  
        background: #ff0000;  
    }  
    .saveBtn{  
        background: #00aaff;  
    }  
    .handWriting {  
        background: #fff;  
        width: 750rpx;  
        height: 450rpx;  
    }  
    .handCenter{  
        margin-bottom: 60rpx;  
    }  

</style>