vue生成二维码_html生成二维码
2023-06-13 09:14:51 时间
目录
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>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/186107.html原文链接:https://javaforall.cn
相关文章
- Vue专题 05_详解vue生命周期的每个节点
- Vue非父子组件传值「建议收藏」
- html 转换为cshtml,使用Html而不是csHtml
- html使用vue axios,使用 Vue和axios
- vue面试之Composition-API响应式包装对象原理
- angular子组件传值到父组件_vue子组件传值给父组件
- vue源码分析-v-model的本质
- vue源码分析-keep-alive原理(上)
- Vue Router 搭配 NaiveUI 的进度条
- 记录第二天-Vue起步
- 「后端小伙伴来学前端了」Vue中全局事件总线(GlobalEventBus)原理及探究过程
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- vue封装组件方法_什么是vue组件
- Vue生成二维码_vue视频软件怎么生成二维码
- 每日一题之Vue的异步更新实现原理是怎样的?5
- 【黑马程序员pinik名师讲html】HTML很容易忘记?有它我不慌的
- vue.js客服系统实时聊天项目开发(十)过滤xss字符内容-防止xss攻击
- Vue整合ECharts
- 简单构建HTML页面,连接MySQL数据库(html连接mysql)
- Vue应用中部署Redis(vue中使用redis)
- 使用Vue和Redis创建完美的后台应用(vue redis后台)