移动端签名

一. HTML

html 复制代码
<el-dialog :visible.sync="dialogVisible" width="100%">
    <div class="inDialog" id="inDialog">
        <canvas id="can"></canvas>
        <div class="btnBox">
            <el-button class="move90" @click="clearDraw" round>清除</el-button>
            <el-button class="move90" round>取消</el-button>
            <el-button class="move90" ref="saveCanvas" id="saveCanvas" type="primary" round>确定</el-button>
        </div>
    </div>
</el-dialog>

二. JS

data里定义变量

javascript 复制代码
canvas: "",
context: "",
javascript 复制代码
watch: {
    'dialogVisible': function () {
        if (this.dialogVisible) {
            this.$nextTick(() => {
                setTimeout(() => {
                    this.canvas = document.getElementById('can')
                    this.context = this.canvas.getContext('2d')
                    this.canvas.width = document.getElementById('inDialog').clientWidth
                    this.canvas.height = document.getElementById('inDialog').clientHeight
                    this.context.fillStyle = "#fff"
                    this.context.fillRect(0, 0, this.canvas.width, this.canvas.height)
                    this.context.strokeStyle = "#000"
                    this.context.lineWidth = 4
                    this.context.lineCap = 'round'

                    // 开始绘制
                    this.canvas.addEventListener('touchstart', (e) => {
                        this.context.beginPath()
                        this.context.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY)
                    })
                    // 绘制中
                    this.canvas.addEventListener('touchmove', (e) => {
                        e.preventDefault()
                        this.context.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY)
                        this.context.stroke()
                    })
                    // 结束绘制
                    this.canvas.addEventListener('touchend', () => {
                        this.context.closePath()
                        const imgBase64 = this.canvas.toDataURL()
                        this.signSrc = imgBase64
                        this.isSign = true
                    })
                }, 300);
            })
        }
    }
},
javascript 复制代码
// 清空画布
clearDraw() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
相关推荐
友友马16 小时前
『 QT 』QT控件属性全解析 (一)
开发语言·前端·qt
不想上班只想要钱16 小时前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
流***陌16 小时前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
岁月宁静17 小时前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能
金士顿17 小时前
为什么MainWindow.xaml绑定的datacontext,EtherCATSuiteCtrl.xaml直接用了?
前端
533_17 小时前
[css] flex布局中的英文字母不换行问题
前端·css
浮游本尊17 小时前
React 18.x 学习计划 - 第四天:React Hooks深入
前端·学习·react.js
future_studio18 小时前
聊聊 Unity(小白专享、C# 小程序 之 日历、小闹钟)
前端·html
Yeats_Liao18 小时前
Go Web 编程快速入门 · 04 - 请求对象 Request:头、体与查询参数
前端·golang·iphone
祈祷苍天赐我java之术18 小时前
Redis 数据类型与使用场景
java·开发语言·前端·redis·分布式·spring·bootstrap