vue集成jSignature签名组件

1.1 package.json文件中添加依赖组件

"dependencies": {

"jquery": "^3.3.1",

}

1.2 在webpack中设置自动注入js

plugins: [

new webpack.ProvidePlugin({ //引入jquery

$: "jquery",

jQuery: "jquery",

//'window.jQuery':'jquery', //带window的似乎注不上

//'window.$':'jquery'

})

1.3 在vue中注入jquery （有一部分基于jquery的组件，使用的是window.$ 和window.jQuery）

【1】创建jquery注入脚本，创建jquery-vendor.js

import $ from 'jquery'

window.$ = $

window.jQuery = $

export default $

【2】在vue中注入脚本

import $ from './commen/stylus/jquery-vendor.js'

2 vue集成jSignature

2.1 jSignature是github中签名的js(https://github.com/brinley/jSignature)，开发基于jquery，

在jSignature包中包

flashcanvas.js

flashcanvas.min.js

flashcanvas.swf

以上3个文件是为了解决低版本的IE签名问题，目前不考虑

目前只选择jSignature.min.noconflict.js

2.2 vue 中加载jSignature文件

import './commen/stylus/jSignature.min.noconflict'

3 创建带jSignature的vue组件

html 部分

script部分

mounted(){

$("#signature").jSignature({color:"#f00",width:300,height:200,"background-color":"#0f0"});