记使用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/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容