vue中实现签名画板

在这里插入图片描述
特意封装成了一个组件,签名之后会生成一张图片
signBoard.vue

<template><el-drawer title="签名" :visible.sync="isShowBoard" append-to-body :show-close="false" :before-close="closeBoard" size="50%" @close="closeBoard"><div class="drawer-body"><el-row v-loading="loading"><vue-sign ref="esign" :width="800" :height="300" :is-crop="isCrop" :line-width="lineWidth" :line-color="lineColor" /><button class="mt20" @click="handleReset">清空画板</button></el-row></div><div class="drawer-footer"><el-button @click="closeBoard">关 闭</el-button><el-button type="primary" :loading="loading" @click="handleSign">签 名</el-button></div></el-drawer></template><script>
import vueSign from 'vue-esign'
import oss from '@/utils/oss'
const baseUrl = process.env.VUE_APP_OSS_URL
export default {components: { vueSign },props: {folder: {type: String,default: ''},isShowBoard: {type: Boolean,default: false},loading: {type: Boolean,default: false}},data() {return {lineWidth: 6,lineColor: '#000000',bgColor: '#eee',fileList: [],signSrc: '',isCrop: false}},methods: {handleReset() {this.$refs.esign.reset()this.$refs.esign.$el.style.background = '#eee'},async handleGenerate() {try {const res = await this.$refs.esign.generate()//服务器上传const result = await oss.dataURLtoFile(res, this.folder)this.signSrc = baseUrl + '' + result.fileUrlthis.$emit('sign', this.signSrc)} catch (e) {this.$message.error('请先进行手签')}},handleSign() {this.handleConfirm(() => this.handleGenerate())},closeBoard() {this.handleReset()this.$emit('update:isShowBoard', false)}}
}
</script>

使用

  <sign-board:folder="CONSTANT.EMPLOYEE_CHECK":is-show-board.sync="isShowBoard":loading="loading"@sign="getSignSrc"/>getSignSrc(src) {},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/69795.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数学建模--非整数规划问题蒙特卡洛方法的Python求解

目录 1.算法流程简介 2.算法核心代码 1.算法流程简介 #非线性整数规划 #我们一般采用蒙特卡洛算法来进行估算求解 #在实验次数足够多的情况下我们认为此解是非线性整数规划的最优解 """ #Qustion1:求解: max zx1^2x2^23x^24x4^22x5^2-8x1-2x2-3x3-x4-2x5s.t…

使用redis实现队列功能

使用redis实现队列功能 操作方法描述LPUSHLong lPush(String key, String… values)将一个或多个值 value 插入到列表 key 的表头&#xff0c;返回插入后列表中value的数量&#xff0c;若key不存在&#xff0c;会创建一个新的列表并执行 LPUSH 操作RPOPLPUSHString rPopLPush(S…

Modbus协议详解2:通信方式、地址规则、主从机通信状态

首先我们要清楚&#xff1a;Modbus是一种串行链路上的主从协议&#xff0c;在通信线路上只能有一个主机存在&#xff0c;不会有多主机存在的情况。虽然主机只有一个&#xff0c;但是从机是可以有多个的。 Modbus的通信过程都是由主机发起的&#xff0c;从机在接收到主机的请求后…

渗透测试漏洞原理之---【任意文件读取漏洞】

文章目录 1、概述1.1、漏洞成因1.2、漏洞危害1.3、漏洞分类1.4、任意文件读取1.4.1、文件读取函数1.4.2、任意文件读取 1.5、任意文件下载1.5.1、一般情况1.5.2、PHP实现1.5.3、任意文件下载 2、任意文件读取攻防2.1、路径过滤2.1.1、过滤../ 2.2、简单绕过2.2.1、双写绕过2.2.…

音视频 ffmpeg命令直播拉流推流

直播拉流 ffplay rtmp://server/live/streamName ffmpeg -i rtmp://server/live/streamName -c copy dump.flv对于不是rtmp的协议 -c copy要谨慎使用 直播推流 ffmpeg -re -i out.mp4 -c copy flvrtmp://server/live/streamName参数&#xff1a;-re,表示按时间戳读取文件 参…

docker笔记8:Docker网络

1.是什么 1.1 docker不启动&#xff0c;默认网络情况 ens33 lo virbr0 在CentOS7的安装过程中如果有选择相关虚拟化的的服务安装系统后&#xff0c;启动网卡时会发现有一个以网桥连接的私网地址的virbr0网卡(virbr0网卡&#xff1a;它还有一个固定的默认IP地址192.168.122…

vr智慧党建主题展厅赋予企业数字化内涵

现如今&#xff0c;VR全景技术的发展让我们动动手指就能在线上参观博物馆、纪念馆&#xff0c;不仅不用受时间和空间的限制&#xff0c;还能拥有身临其境般的体验&#xff0c;使得我们足不出户就能随时随地学习、传承红色文化。 很多党建展厅都是比较传统的&#xff0c;没有运用…

Protocol Buffers教程

Protocol Buffers教程 Protocol Buffers简介下载安装Protocol Buffers编译器编写第一个protobuf文件&#xff0c;并编译成go文件Protocol Buffers定义消息类型Protocol Buffers基本数据类型Protocol Buffers枚举类型Protobuf生成的go源码分析Protobuf序列化和反序列化protobuf…

【实用 Python 库】使用 XPath 与 lxml 模块在 Python 中高效解析 XML 与 HTML

在今天的信息时代&#xff0c;数据无处不在&#xff0c;从网络爬虫到数据挖掘&#xff0c;从文本处理到数据分析&#xff0c;我们时常需要从结构化文档中提取有用的信息。XPath 是一门强大的查询语言&#xff0c;它可以在 XML 与 HTML 等文档中定位特定的元素与数据。而在 Pyth…

C++中的##、#符号含义

在C中&#xff0c;## 和 # 是两个不同的预处理符号。这些符号都是在C的预处理阶段使用的&#xff0c;用于在代码编译之前对文本进行操作。 #&#xff08;字符串化操作符&#xff09;&#xff1a; 用于将宏参数转换为字符串常量。 #define STRINGIZE(x) #x const char* str S…

C++(QT)画图行车

通过鼠标在窗口上点击形成多个点的连线&#xff0c;绘制一辆汽车沿着绘制的连线轨迹前进。要求连线点数大于20.可以通过清除按钮清除已经绘制的连线&#xff0c;并可以重新绘制一条轨迹连线。当车辆行驶到轨迹终点时&#xff0c;自动停止。&#xff08;汽车实在可用方块代替&am…

go锁--读写锁

每个锁分为读锁和写锁&#xff0c;写锁互斥 没有加写锁时&#xff0c;多个协程都可以加读锁 加了写锁时&#xff0c;无法加读锁&#xff0c;读协程排队等待 加了读锁&#xff0c;写锁排队等待 Mutex用来写协程之间互斥等待 读协程使用readerSem等待写锁的释放 写协程使用writer…

文末送书!谈谈原型模式在JAVA实战开发中的应用(附源码+面试题)

作者主页&#xff1a;Designer 小郑 作者简介&#xff1a;3年JAVA全栈开发经验&#xff0c;专注JAVA技术、系统定制、远程指导&#xff0c;致力于企业数字化转型&#xff0c;CSDN博客专家&#xff0c;蓝桥云课认证讲师。 本文讲解了 Java 设计模式中的原型模式&#xff0c;并给…

2024年美团校招后端面试题汇总及其详解

1. 问进程和线程 解答: 进程和线程都是操作系统为了使多任务处理成为可能而定义的两种实体。 进程:进程是操作系统进行资源分配和调度的基本单位,是系统中的并发执行的单位。每个进程都有自己的独立的地址空间,一个进程无法直接访问另一个进程的变量和数据结构。如果一个…

Vue + Element UI 前端篇(六):更换皮肤主题

自定义主题 命令行主题工具 1.安装主题工具 首先安装「主题生成工具」&#xff0c;可以全局安装或者安装在当前项目下&#xff0c;推荐安装在项目里&#xff0c;方便别人 clone 项目时能直接安装依赖并启动。 yarn add element-theme --dev 2.安装chalk主题 安装白垩主题…

用对工具,你的全渠道电子商务业务就成功了一半

希望将全渠道电子商务纳入您的业务战略&#xff0c;但不确定从哪里开始&#xff1f;我们为您提供保障。这篇文章将指导您了解全渠道商务的基础知识&#xff0c;以及它与多渠道方法的区别&#xff0c;还将探讨利用全渠道方法的众多好处&#xff0c;并讨论企业如何通过全渠道客户…

C#,《小白学程序》第十三课:阶乘(Factorial)的计算方法与代码

1 文本格式 /// <summary> /// 阶乘的非递归算法 /// </summary> /// <param name"a"></param> /// <returns></returns> private int Factorial_Original(int a) { int r 1; for (int i a; i > 1; i--) { …

Anaconda虚拟环境下导入opencv

文章目录 解决方法测试 解决方法 1、根据自己虚拟环境对于的python版本与电脑对应的位长选择具体的版本&#xff0c;例如python3.9选择cp39&#xff0c;64位电脑选择64 下载地址&#xff1a;资源地址 若是不确定自己虚拟环境对应的python版本&#xff0c;可以输入下列命令&…

【100天精通Python】Day56:Python 数据分析_Pandas数据清洗和处理

目录 数据清洗和处理 1.处理缺失值 1.1 删除缺失值&#xff1a; 1.2 填充缺失值&#xff1a; 1.3 插值&#xff1a; 2 数据类型转换 2.1 数据类型转换 2.2 日期和时间的转换&#xff1a; 2.3 分类数据的转换&#xff1a; 2.4 自定义数据类型的转换&#xff1a; 3 数…

Activiti基础入门

文章目录 Activiti项目搭建引用依赖项Activiti服务初始化数据库配置配置文件测试demo Activiti功能服务RepositoryService&#xff1a;RuntimeService&#xff1a;TaskService&#xff1a;HistoryService&#xff1a;ManagementService&#xff1a;DynamicBpmnService&#xff…