vue集成jSignature签名组件

1 vue集成jquery

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 部分

      <div id="signature" style="width:100% ;height:100% ;text-align:center ;padding-top:8px"></div>

  script部分

  mounted(){

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

      },