首页 > 其他分享 >vue使用电子签名插件vue-esign

vue使用电子签名插件vue-esign

时间:2023-06-30 10:56:28浏览次数:31  
标签:画布 插件 vue 电子签名 宽度 组件 esign

功能描述:
1,兼容 PC 和 Mobile;
2,画布自适应屏幕大小变化(窗口缩放、屏幕旋转时画布无需重置,自动校正坐标偏移);
3,自定义画布尺寸(导出图尺寸),画笔粗细、颜色,画布背景色;
4,支持裁剪 (针对需求:有的签字需要裁剪掉四周空白)。
5,导出图片格式为 base64 ;

第一步:安装: npm install vue-esign --save
第二步:

全局使用: 在main.js 中 引入插件

import vueEsign from ‘vue-esign’
Vue.use(vueEsign)

局部使用:

import signName from '@/components/signName/index.vue'  
components:{     signName   },
 

第三步:页面使用说明:
必须设置 ref ,用来调用组件的两个内置方法 reset() 和 generate() 无需给组件设置 style 的宽高,如果画布的 width 属性值没超出父元素的样式宽度,则该组件的样式宽度就是画布宽度,超出的话,组件样式宽度则是父元素的100%; 所以只需设置好父元素的宽度即可;

<vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
<button @click="handleReset">清空画板</button>
<button @click="handleGenerate">生成图片</button>

<script>

export default {
data () {
return {
lineWidth: 6,
lineColor: '#000000',
bgColor: '',
resultImg: '',
isCrop: false
}
},
methods: {
handleReset () {
this.$refs.esign.reset()
},
handleGenerate () {
this.$refs.esign.generate().then(res => {
this.resultImg = res
}).catch(err => {
alert(err) // 画布没有签字时会执行这里 'Not Signned'
})
}
}

</script>

参考链接:https://blog.csdn.net/gelinwangzi_juge/article/details/127566666

标签:画布,插件,vue,电子签名,宽度,组件,esign
From: https://www.cnblogs.com/luzanzan/p/17516046.html

相关文章

  • 号外!MyEclipse 2023.1.1已发布,更好支持Vue框架
    MyEclipse 2023.1.1是之前发布的2023.1.0的一个小错误修复版本,如果您已经安装了MyEclipse2023,只需检查产品中的更新(Help>CheckforUpdates…)就可以选择这个新版本。或者,下载我们更新的离线安装程序来安装2023.1.1。MyEclipsev2023.1.1离线版下载MyEclipse技术交流群:74......
  • Vue3从入门到精通(三)
    vue3插槽Slots在Vue3中,插槽(Slots)的使用方式与Vue2中基本相同,但有一些细微的差异。以下是在Vue3中使用插槽的示例://ChildComponent.vue<template><div><h2>ChildComponent</h2><slot></slot></div></template>​//ParentComponent......
  • [GPT] vue 的 quasar 框架 在 layout 模版中 如何获取 子页面当前使用的 useMeta
     在Quasar框架中,用VueRouter的meta字段来获取子页面当前使用的useMeta。首先,您需要在路由配置中设置子页面的meta字段。例如:  constroutes=[{path:'/page',component:PageComponent,meta:{useMeta:{//在这里定义您......
  • Vue实现组件间通信的11种方式
    原文合集地址如下,有需要的朋友可以关注本文地址合集地址组件之间的通信是指不同组件之间在共享数据、传递消息或触发事件等方面进行交流和协作的过程。在应用程序中,不同的组件可能需要相互传递数据、共享状态、触发动作或响应事件等,以实现组件之间的协调和交互。vue组件之间的......
  • vue编程-增加路由模块
    1.将vue-router依赖加入到package.json{"name":"practice_novel_site","version":"0.1.0","private":true,"scripts":{"serve":"vue-cli-serviceserve","build......
  • 导入第三方项目maven插件报错
    导入一个微服务项目发现:Plugin'org.springframework.boot:spring-boot-maven-plugin:'notfound解决方式,添加版本号重新导入:查找下父工程的版本:发现是:2.3.9.RELEASE子工程微服务也要用这个版本的:原文:https://www.cnblogs.com/vevy/p/12246679.html......
  • [vue3-print-nb]vue3中实现打印功能
    vue3安装npminstallvue3-print-nb--save项目中引入//全局引用import{createApp}from'vue'importAppfrom'./App.vue'importPrintfrom'vue3-print-nb'constapp=createApp(App)app.use(Print)app.mount('#app')//......
  • python使用 flask+vue 制作前后端分离图书信息管理系统
    哈喽兄弟们,今天咱们来用Python实现一个前后端分离的图书信息管理系统。制作前后端分离图书信息管理系统的思路:1、前端部分首先,我们可以使用VueJS作为前端框架,并通过VueCLI工具进行创建和管理项目。2、后端部分后端部分我们可以采用PythonFlask框架,这个框......
  • Vue3+Element-Plus安装及模拟增删改查
    软件安装:nodejs16https://nodejs.org/download/release/v16.20.0/将npm设置为淘宝镜像:npmconfigsetregistryhttps://registry.npm.taobao.org 创建vue3项目:npminitvue@latestEleement-Plushttps://element-plus.gitee.io/zh-CN/安装:npminstallelement-......
  • tinymce富文本编辑器在vue2使用
    参考https://blog.csdn.net/LJJONESEED/article/details/1278630201.下载[email protected]@tinymce/[email protected].在node_modules中找到tinymce模块下的skins文件夹、jquery.tinymce.js和jquery.tinymce.mini.js这三个文件夹。3.在public中新建tinymce文件......