1、首先把簽字板的組件放在compunents下指定位置

<template>
    <view v-if="visibleSync" class="cat-signature" :class="{'visible':show}">
        <view class="mask" @tap="close" />
        <view class="content">
            <canvas class='firstCanvas' :canvas-id="canvasId" @touchmove='move' @touchstart='start($event)' @touchend='end'
             @touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error' />
            <view class="btns">
                <button class="btn" size="mini" type="warn" @click="clear">清除</button>
                <button class="btn" size="mini" type="primary" @click="save">保存</button>
            </view>
        </view>
    </view>
</template>

<script>
    var content = null;
    var touchs = [];
    var canvasw = 0;
    var canvash = 0;
    //獲取系統(tǒng)信息
    uni.getSystemInfo({
        success: function(res) {
            canvasw = res.windowWidth;
            canvash = canvasw * 9 / 16;
        },
    })
    export default{
        props:{
            visible: {
                type: Boolean,
                default: false
            },
            canvasId:{
                type: String,
                default: 'firstCanvas'
            }
        },
        data(){
            return{
                show:false,
                visibleSync: false,
                signImage:'',
                hasDh:false,
            }
        },
        watch:{
            visible(val) {
                this.visibleSync = val;
                this.show = val;
                this.getInfo()
            }
        },
        
        created(options) {
            this.visibleSync = this.visible
            this.getInfo()
            setTimeout(() => {
                this.show = this.visible;
            }, 100)
        },
        methods:{
            getInfo(){
                //獲得Canvas的上下文
                content = uni.createCanvasContext(this.canvasId,this)
                //設(shè)置線的顏色
                content.setStrokeStyle("#000")
                //設(shè)置線的寬度
                content.setLineWidth(6)
                //設(shè)置線兩端端點(diǎn)樣式更加圓潤
                content.setLineCap('round')
                //設(shè)置兩條線連接處更加圓潤
                content.setLineJoin('round')
            },
            // 
            close() {
                this.show = false;
                this.hasDh = false;
                this.$emit('close')
            },
            // 畫布的觸摸移動開始手勢響應(yīng)
            start(e){
                let point = {
                    x: e.touches[0].x,
                    y: e.touches[0].y,
                }
                touchs.push(point);
                this.hasDh = true
            },
            // 畫布的觸摸移動手勢響應(yīng)
            move: function(e) {
                let point = {
                    x: e.touches[0].x,
                    y: e.touches[0].y
                }
                touchs.push(point)
                if (touchs.length >= 2) {
                    this.draw(touchs)
                }
            },
            
            // 畫布的觸摸移動結(jié)束手勢響應(yīng)
            end: function(e) {
                //清空軌跡數(shù)組
                for (let i = 0; i < touchs.length; i++) {
                    touchs.pop()
                }
            
            },
            
            // 畫布的觸摸取消響應(yīng)
            cancel: function(e) {
                // console.log("觸摸取消" + e)
            },
            
            // 畫布的長按手勢響應(yīng)
            tap: function(e) {
                // console.log("長按手勢" + e)
            },
            
            error: function(e) {
                // console.log("畫布觸摸錯誤" + e)
            },
            
            //繪制
            draw: function(touchs) {
                let point1 = touchs[0]
                let point2 = touchs[1]
                // console.log(JSON.stringify(touchs))
                content.moveTo(point1.x, point1.y)
                content.lineTo(point2.x, point2.y)
                content.stroke()
                content.draw(true);
                touchs.shift()
                
            },
            //清除操作
            clear: function() {
                //清除畫布
                content.clearRect(0, 0, canvasw, canvash)
                content.draw(true)
                // this.close()
                this.hasDh = false;
                this.$emit('clear')
            },
            save(){
                var that = this;
                if(!this.hasDh){
                    uni.showToast({title:'請先簽字',icon:'none'})
                    return;
                }
                uni.showLoading({title:'生成中...',mask:true})
                setTimeout(()=>{
                    uni.canvasToTempFilePath({
                        canvasId: this.canvasId,
                        success: function(res) {
                            that.signImage = res.tempFilePath;
                            that.$emit('save',res.tempFilePath);
                            uni.hideLoading()
                            that.hasDh = false;
                            that.show = false;
                        },
                        fail:function(err){
                            console.log(err)
                            uni.hideLoading()
                        }
                    },this)
                },100)
            }
        }
    }
</script>

<style lang="scss">
    .cat-signature.visible {
        visibility: visible
    }
    .cat-signature{
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        z-index: 11;
        height: 100vh;
        visibility: hidden;
        .mask{
            display: block;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4);
            transition: opacity .3s;
        }
        .content{
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom:0;
            right: 0;
            margin: auto; 
            width:94%;
            height: 500upx;
            background: #fff;
            border-radius: 8upx;
            box-shadow: 0px 3px 3px #333;
            // canvas
            .firstCanvas {
                background-color: #fff;
                width: 100%;
                height: 400upx;
            }
            // canvas
            .btns{
                padding: 0 15px;
                height: 100upx;
                overflow: hidden;
                position: absolute;
                bottom: 10upx;
                left: 0;
                right: 0;
                margin: auto;
                display: flex;
                justify-content: space-between;
                .btn{
                    width: 40%;
                    text-align: center;
                    font-size: 28upx;
                    height:60upx;
                    line-height: 60upx;
                    color: #fff;
                    margin-top: 20upx;
                }
            }
        }
    }
    
    .visible .mask {
        display: block;
        opacity: 1
    }
</style>

頁面內(nèi)使用方法如下：

<view class="contract-page-section__input" @click="signature" id="bSign1"><image class="signature-img" :src="contractForm.bSign1" mode="heightFix"></image></view>
<view class="contract-page-section__input" @click="signature" id="bSign2"><image class="signature-img" :src="contractForm.bSign2" mode="heightFix"></image></view>
<canvas-signature :canvas-id="activeSignId" @close="canvasShow = false" @save="signatureSave" :visible="canvasShow" ></canvas-signature>

import canvasSignature from '@/components/canvas-signature/canvas-signature.vue'
components:{canvasSignature},
data() {
            return {
                oneForm:{
                    bSign1: '',
                    bSign2: ''
                },
                // 簽字?jǐn)?shù)據(jù)
                activeSignatureId:'',
                canvasShow: false
            };
        },
methods:{
            // 獲取簽字板
            signature(e){
                this.activeSignatureId = e.currentTarget.id
                this.canvasShow = true
            },
            signatureSave(val){
                this.canvasShow = false;
                this.oneForm[this.activeSignatureId] = val
            },
                        async submitHander(){
                            let submitForm = JSON.parse(JSON.stringify(this.oneForm))
                submitForm.bSign1 = await this.base64Transform('bSign1')
                            // 因?yàn)檗D(zhuǎn)base64位是異步操作擦秽，所以使用async、await去實(shí)現(xiàn)會方便虹钮，多少個簽名都可以做坝冕，本人的頁面10多個簽名
                            // 這里考慮盡量深拷貝一個新對象取操作，在返回當(dāng)前頁才不會修改submitForm里的相對路徑
                            // 然后就可以使用submitForm作為接口請求的入?yún)?                        },
                        // 簽名轉(zhuǎn)base64位文件流
            base64Transform(name){
                return new Promise((resolve, reject)=>{
                    const savedFilePath = this.oneForm[name] //相對路徑
                    const path = plus.io.convertLocalFileSystemURL(savedFilePath) //絕對路徑
                    const fileReader = new plus.io.FileReader()
                    fileReader.readAsDataURL(path)
                        fileReader.onloadend = (res) => { //讀取文件成功完成的回調(diào)函數(shù)
                            resolve(res.target.result)
                        }
                })
            }
        }

有問題請留言葬荷，有可優(yōu)化的地方也請多多指教