vue生成二维码QR Code的简单实现方法示例
更新时间：2022年04月28日 15:42:40 作者：~疆
这篇文章主要为大家介绍了vue生成二维码QR Code的实现示例详情，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
qrcodejs2
下载qrcodejs2
cnpm i -S qrcodejs2
使用
<template>
<span ref="qrCodeUrl"></span>
</template>
<script>
import QRCode from "qrcodejs2";
export default {
data() {
return {};
},
mounted() {
this.creatQrCode();
},
methods: {
creatQrCode() {
let a = new QRCode(this.$refs.qrCodeUrl, {
text: "hello 大家好", // 需要转换为二维码的内容
width: 100,
height: 100,
colorDark: "black", //#000000为黑色
colorLight: "white",
});
console.log("二维码:", a);
},
},
};
</script>vue-qr
可在二维码中心添加图片
下载:
cnpm i -S vue-qr
使用：
实现效果
代码示例
<template>
<vue-qr
:logoSrc="imageUrl"
text="https://blog.csdn.net/qq_40323256/"
:size="150"
:margin="0"
colorDark="black"
colorLight="white"
></vue-qr>
</template>
<script>
import vueQr from "vue-qr";
export default {
components: {
vueQr,
},
data() {
return {
imageUrl: require("@/assets/logo.png"), //欲嵌入至二维码中心的 LOGO 地址
};
},
};
</script>以上就是vue生成二维码QR Code的实现示例详情的详细内容，更多关于vue生成二维码QR Code的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了vue2升级vue3遇到的问题bug解决分析整理,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
这篇文章主要介绍了vue项目打包优化方式(让打包的js文件变小)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
使用Vue的脚手架搭建的前端项目，通常都使用Axios封装的接口请求，项目中引入的方式不做多介绍，本文主要介绍接口调用与不同形式的传参方法。对Vue + Axios 请求接口方法与传参问题感兴趣的朋友一起看看吧2021-12-12
本文主要介绍了Vue中接收二进制文件流实现pdf预览的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
这篇文章主要介绍了Vue中使用Scss实现配置、切换主题方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue中router-view组件的使用,这个时候我们就需要用到路由中的 router-view组件（也叫路由占位符）了，本文通过示例代码给大家介绍的非常详细，需要的朋友可以参考下2021-10-10
这篇文章主要介绍了vue实现菜单权限控制的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了Vue实现dom元素拖拽并限制移动范围的操作代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了Vue 监视属性之天气案例实现，文章以天气为例展开介绍Vue 监视属性 的相关内容，需要的小伙伴可以参考一下2022-05-05
这篇文章主要介绍了Vue中keep-alive 实现后退不刷新并保持滚动位置的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03
最新评论