vue中使用电子签名

使用vue-cli4脚手架，js-signature 2.0.0（https://www.npmjs.com/package/jq-signature）jquery 3.4.1。

1.安装jq及js-signature(js-siganture依赖于jquery)

npm i jquery jq-signature -S

2.小插曲->若只使用jquery，只需要在使用的组件中导入或者在入口main.js中配置

2.1 方式一：组件中直接使用

<template><div id="test"></div>
<script>
import $ from 'jquery';
export default{mounted(){let dv = $("#test");console.log(dv)}
}
</script>

2.2方式二：

main.js中配置

import Vue from 'vue'
import App from './App.vue'
import Router from './router'
import Store from './store'
import $ from 'jquery'Vue.prototype.$ = $;new Vue({Router,Store,render:h=>h(App)
}).$mount('#app')

使用：

<template><div id="test"></div>
<script>
export default{mounted(){let dv = this.$("#test");console.log(dv)}
}
</script>

3。言归正传，开始电子签名，需要在vue.config.js中配置jquery插件，否则jq-signature会报错：jQuery is undefined

vue.config.js配置如下

const webpack = require('webpack')
module.exports = {chainWebpack:config=>{config.plugin('provide').use(webpack.ProvidePlugin,[{$:'jquery',jquery:'jquery',jQuery:'jquery','window.jQuery':'jquery'}])}
}

使用：

<template><div id="app"><div id="signature" style="width:100%;height:300px;"></div><!-- 画布容器 --><button id="clearSignature" @click='clearSignature'>清除签名</button><button id="saveSignature" @click='saveSignature'>保存签名</button><div id="result"></div><!-- 预览容器 --></div>
</template>
<script>
import 'jq-signature'//也可以在入口js文件main.js中导入，则此处不用在导入
export default {data(){return{}},mounted(){$('#signature').jqSignature({width:'300',//canvas 宽度,默认值300height:'200',//canvas 高度,默认值100border:'1px solid #ff6700',//canvas 边框,默认值'1px solid red'background:'#ddd',//canvas 背景,默认值'#ffffff'lineColor:"#0A4D82",//签名线条颜色,默认值'#222222'lineWidth:3,//签名线条宽度,默认值1autoFit:true//使canvas的宽度充满父元素,默认值 false})},methods:{clearSignature(){$('#result').html('')//清除预览img$('#signature').jqSignature('clearCanvas')//清除canvas},saveSignature(){let signatureBox = $('#signature');let canvas = signatureBox.children('canvas').eq(0)[0]let data = signatureBox.jqSignature('getDataURL');//base64数据//创建一个空的canvas,判断是否画布为空var blankCanvas = document.createElement('canvas');blankCanvas.width = canvas.width;blankCanvas.height = canvas.height;if(blankCanvas.toDataURL() == canvas.toDataURL()){alert('请签名')return;}//为了解决在ios设备上修改img标签src地址无效的问题,所以每次保存重新创建一个预览img标签,在清除签名时,在移除img标签let img = new Image();img.src = data;img.onload = (e)=>{$('#result').append(img)}img.onerror = (e)=>{console.log('预览失败')}}}
}
</script>

效果图：

vue中使用电子签名相关推荐

vue中实现电子签名
在vue-cli中使用该插件我们先安装组件 npm i elesigncode 首先下载版本大于1.0.9的版本下载好版本过后我们来创建一个组件在组件中使用的详细流程 <template& ...
vue-signature-pad在vue中实现电子签名
首页需要下载依赖包 npm install --save vue-signature-pad 这里使用的是全局引用组件在main.js中 import Vue from "vue" ...
pc端签名 vue 生成图片_使用vue实现一个电子签名组件
使用vue实现一个电子签名组件在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名.今天我们就要用vue实现一个电子签名的面板想要绘制图形,第一步想到的就是使用canvas标签 ...
在基于ABP框架的前端项目VueElement项目中采用电子签名的处理
Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/cou ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
props写法_简单理解vue中Props属性
本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下使用 Props 传递数据组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 pr ...
vue ts 设置tslint提示_Typescript 在 Vue 中的实践(包含2.x、3.x)
1 使用 typescript 的优势聊到 ts 时有一个不能规避的问题:为什么要使用 ts ,相比 js 有什么优势吗?下面我从两个方面试着回答一下这个问题: 1.1 项目开发时的便利避免低级 ...
VUE中使用Echarts绘制地图迁移
踩坑说明很久以前写jsp时使用过echarts的china.js插件,不过echarts是2.0的,目前vue项目中使用echarts3.8.5,直接将china.js插件引入,代码复制,运行一看, ...
vue中动态样式不起作用？ scoped了解一下
vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped 转载于:https://www. ...

vue中使用电子签名

vue中使用电子签名相关推荐

最新文章

热门文章