vue3:使用:图片生成二维码并复制

实现在 vue3 中根据 url 生成一个二维码码,且可以复制。

注)复制功能 navigator.clipboard.write 只能在安全的localhost 这种安全网络下使用。https中需要添加安全证书,且在域名(例:https://www.baidu.com)这种下即可。

1、安装

注)由于qrcodejs的兼容性问题,需要在vue3中引入qrcodejs2-fix才能正常生成二维码。

npm install qrcodejs2-fix

2、在vue文件中导入模块qrcodejs2-fix

import QRCode from 'qrcodejs2-fix';

3、场景一、生成二维码码、复制(生成的二维码图片)

vue3:使用:图片生成二维码并复制_第1张图片



 4、场景二、点"复制"按钮,生成二维码,点击"复制"直接复制生成的二维码图片

vue3:使用:图片生成二维码并复制_第2张图片

 



你可能感兴趣的:(vue.js,前端,javascript)