Vue中使用qrcode生成二维码结合Popover气泡框，实现网址（链接）生成二维码悬浮展示，及二维码下载功能

前段时间做项目遇到把链接生成二维码，并实现二维码下载的功能，实现过程记录一下，并分享给大家！

实现功能如下，鼠标悬浮展示二维码，点击可以下载二维码。

实现思路如下：通过qrcode插件生成二维码，再用Popover气泡框调整展示位置

步骤1.引入qrcode

步骤2：html及css代码如下

步骤3：鼠标移入悬浮展示及点击下载代码如下

悬浮展示二维码

点击下载

注意点：二维码<canvas>标签的ref属性对应的值必须是唯一的，不能直接写 :ref='canvas',这样会有鼠标第一次移入二维码展示为空白内容的bug，因为此时生成的所有二维码的ref都是同一个值，因此我这里是将项目里后端返回的shortKey字段拼接上去给ref赋值，解决了这个问题。

传值的时候也要注意，将ref拼接后的字段传过去。

希望这篇文章的分享，对大家有所帮助。