Vue生成二维码_视频生成二维码软件

Vue生成二维码_视频生成二维码软件vue有两种生成二维码的方式,qrcode、vue-qr(有icon);

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

利用Vue生成二维码

Author:kak

         vue有两种生成二维码的方式,qrcode、vue-qr(有icon);

1、qrcode

npm ``install` `--save qrcodejs2
//所需页面导入
import QRCode from 'qrcodejs2'
<div class="qrcode" ref="qrCodeUrl"></div>
<script> import QRCode from 'qrcodejs2' export default { 
     data() { 
     return { 
     }, methods: { 
     creatQrCode() { 
     var qrcode = new QRCode(this.$refs.qrCodeUrl, { 
     text: 'https://blog.csdn.net/weixin_42601136', // 需要转换为二维码的内容 width: 100, height: 100, colorDark: '#000000', colorLight: '#ffffff', correctLevel: QRCode.CorrectLevel.H }) }, }, mounted() { 
     this.creatQrCode(); }, }; </script>

在这里插入图片描述

2、vue-qr

可以增加icon

npm install vue-qr --save
import vueQr from 'vue-qr'
<vue-qr :logoSrc="imageUrl" text="https://blog.csdn.net/weixin_42601136" :size="200"></vue-qr>
 
<script> export default { 
     name: "qecode", data() { 
     return { 
     imageUrl: require("../img/logo.png"),//icon路径 } }, components: { 
     vueQr }, }, } </script>

在这里插入图片描述

完整代码

<template>
  <div>
    <div class="qrcode" ref="qrCodeUrl"></div>
    <vue-qr :logoSrc="imageUrl" text="https://blog.csdn.net/weixin_42601136" :size="200"></vue-qr>
  </div>
</template>

<script> import QRCode from "qrcodejs2"; import vueQr from "vue-qr"; export default { 
     data() { 
     return { 
     imageUrl: require("./sw.jpg"), }; }, components: { 
     vueQr, }, methods: { 
     creatQrCode() { 
     var qrcode = new QRCode(this.$refs.qrCodeUrl, { 
     text: "https://blog.csdn.net/weixin_42601136", // 需要转换为二维码的内容 width: 100, height: 100, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H, }); }, }, mounted() { 
     this.creatQrCode(); }, }; </script>


<style scoped> .qrcode { 
     display: inline-block; width: 132px; height: 132px; background-color: #fff; padding: 6px; box-sizing: border-box; } </style>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/186172.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • python基础之小数据池[通俗易懂]

    一,id,is,==在Python中,id是什么?id是内存地址,比如你利用id()内置函数去查询一个数据的内存地址:那么is是什么?==又是什么?==是比较的两边的数值是否相等,而

  • Google Doodle:龙年 新春快乐 龙年进步!

    Google Doodle:龙年 新春快乐 龙年进步!看过春晚,放过×××,Google终于在北京时间1月23日的凌晨放出了龙年的Doodle: 转载于:https://blog.51cto.com/maclean/1278817

  • linux下开启、关闭、重启mysql服务命令

    linux下开启、关闭、重启mysql服务命令一、启动1、使用service启动:servicemysqlstart2、使用mysqld脚本启动:/etc/inint.d/mysqlstart3、使用safe_mysqld启动:safe_mysql&二、停止1、使用service启动:servicemysqlstop2、使用mysqld脚本启动:/etc/inint.d/mysqlstop3、mysqladminshutdown三、重启1、使用service启动:service.

    2022年10月29日
  • 以管理员身份运行IJ

    以管理员身份运行IJ

  • error lnk 2019_lnk2005错误

    error lnk 2019_lnk2005错误导致LNK2019的常见问题:(1)未链接的对象文件或包含符号定义的库(2)符号声明的拼写不与符号的定义相同(3)使用了函数,但类型或参数数目不匹配函数定义(4)声明但未定义的函数或变量(5) 调用约定是函数声明和函数定义之间的差异(6)符号定义在c文件中,但未使用externC在c++文件中声明(7)符号定义为静态,并随后被外部文件引用(8)未定义类的静态成员(9)生成依赖项仅定义为解决方…

  • AngularJS所有版本下载地址

    AngularJS所有版本下载地址AngularJS官网本身采用AngularJS库构建,页面中的AngularJS库通过Google的CDN(内容分发网络)引入,所以国内访问会有问题。大家可以从下面地址获取AngularJS所以版本:https://code.angularjs.org/各种版本应有尽有,上图为证:补充说明:每个目录下有对应版本的压缩包,下载压缩包即可

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号