vue 根据链接生成二维码(功能实现)

川长思鸟来 2022-08-29 10:57 266阅读 0赞

今天同事问我一个问题，在`vue`项目中想要根据一个链接显示对应的二维码该怎么实现。

我前一段时间，有用`apicloud`项目生成二维码的功能，但是`vue`版本的没有处理过。百度后找到一个可行的方案：

[大神实现`vue`项目中显示二维码功能的参考链接：https://www.cnblogs.com/hss-blog/articles/9188101.html][vue_https_www.cnblogs.com_hss-blog_articles_9188101.html]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
文章中提到了两个好用的二维码插件，`vue-qart`与`qrcode`，由于第一种需要进行配置，而我对`webpack`之类的并不熟悉，保险起见，我采用了第二种方法：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
由于我是在现有的后台系统中安装的`qrcode`的插件，安装完成后，在执行`npm run serve`时，一直报错：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
网上也有大神遇到同样的报错信息，然后大神提出的解决办法就是：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]  
但是我测试过，并没有什么用处。

因此我删除`node_modules`和`package.json`文件，从`svn`分支上重新拉取，然后安装`qrcode`时，采用`cnpm install qrcodejs2 --save`的方式来安装，最终成功。

## `npm` 安装插件后报错，可以删除插件卸载插件后，通过`cnpm`来进行安装！！！ ##

下面看下我的使用步骤：自己写一遍，才能够印象深刻！！！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]

### 1.引入`qrcodejs2` ###

`import QRCode from 'qrcodejs2'`

### 2.注册`qrcode插件` ###

`components:{ QRCode}`

### 3.`html`页面布局 ###

### 4.渲染二维码 ###

this.$nextTick(() => { 
      new QRCode("qrcode", { 
        width: 200,
        height: 200,
        text: "https://www.baidu.com",
      });
    });

最终效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]

完成！！！！

[vue_https_www.cnblogs.com_hss-blog_articles_9188101.html]: https://www.cnblogs.com/hss-blog/articles/9188101.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20220829/7ce18a43c7db4297bcb4b5d6f413baa9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20220829/c288d7f01adb4f5bb4315536e12a78bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20220829/d3bd99ab1faf450f91fdd1f6ce7583d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20220829/f9fe5547e8af4d9b98dc0df00f4fb85d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: /images/20220829/c1cb7f340f354b4e935fbac933b1af76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]: /images/20220829/c8e744e841054961b38d3aa2322df041.png