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的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了uni-app的开发环境，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-10-10
vue+elementui实现动态添加行/可编辑的table
这篇文章主要为大家详细介绍了vue+elementui实现动态添加行/可编辑的table，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
本文主要介绍了vue请求接口并且携带token的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要介绍了Vue-cli3项目引入Typescript的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
vue+element ui el-tooltip动态显示隐藏问题
这篇文章主要介绍了vue+element ui el-tooltip动态显示隐藏问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了VUE v-bind 数据绑定,简单点来说就是对 HTML 中的元素，我们可以使用 v-bind 来进行绑定和动态的数据输出，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下2023-05-05
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
这篇文章主要介绍了如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
vue3+vite使用History路由模式打包部署项目的步骤及注意事项
这篇文章主要介绍了vue3+vite使用History路由模式打包部署项目的步骤及注意事项,配置过程包括在Vue项目中设置路由模式、调整打包配置以及Nginx服务器的配置,正确的部署配置能够确保应用顺利运行,提升用户体验,需要的朋友可以参考下2024-10-10
在vue开发中，会涉及到很多接口的处理，当项目足够大时，就需要定义规范统一的接口，本文就来介绍一下vue 项目接口管理，具有一定的参考价值，感兴趣的小伙伴可以一起来了解一下2019-01-01
这篇文章主要介绍了详解vue 自定义组件使用v-model 及探究其中原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
最新评论