记使用qrcode生成二维码

1.首先要安装qrcode插件


Snipaste_2018-11-17_22-09-01.jpg

2.然后在全局js文件引入qrcode


2.jpg

记得引入之后,一定要注入
3.jpg

接下来就可以在view中使用啦
3.在vue文件中创建一个容器,canvas


4.jpg

4.然后引入qrcode


5.jpg

5.然后定义一个函数,在函数内部利用js原生方式获取canvas这个dom元素,因为getContext是js原生的方法,所以必须要使用原生获取dom元素
6.jpg

6.然后调用qrcode的方法,第一个参数是dom元素,第二个是val参数,第三个是错误的回调函数
7.jpg

这样就绘制好了一个二维码了

注意点:在获取dom元素的时候,如果使用的是elementUI中的对话框,在点击触发弹框显示的时候,第一次触发是获取不到dom元素的,当第一次点击的时候,你传入的参数获取不到,会提示getcontext为null , 所以要使用vue.$nextTick()来配合。
8.jpg

菜鸟前端一枚,理解有误请各位大佬指点。

关于qrcode的具体参数和api 可以查看这个网址
http://code.ciaoca.com/javascript/qrcode/

你可能感兴趣的:(记使用qrcode生成二维码)