Vue项目生成二维码

2023-11-09

场景:

【民主测评、闭卷测试】 Vue项目生成二维码,使用手机浏览器扫码录入答题

一,创建vue项目,样式布局,接口联调,

npm run build
打包成dist 文件,让后台发送到服务器中,页面地址就获取到了。
二,前引入vue-qr 二维码地址使浏览器打开的项目地址拼接获取动态的项目projectId,,通过前端生成的二维码,浏览器扫描后,通过window.href 获取手机浏览器地址栏的信息,通过截取地址栏后的projectId 。然后就可以正常工作了。
1.vue 引入vue-qr 插件
引入使用:npm install vue-qr --save

页面使用:

<VueQr
     :logo-src="require('@/assets/logo.png')"
     :logoScale="0.2"
     :logoMargin="5"
     logoBackgroundColor="white"
     :size="200"
     :margin="0"
     :auto-color="true"
     :dot-scale="1"
     :text="appSrc"
     >
</VueQr>
import VueQr from 'vue-qr'
data(){
	return(
			appSrc:'http://115.28.107.185:8081/hseimage/upload/456/dist/index.html?projectId=100'
	)
}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue项目生成二维码 的相关文章

随机推荐

  • RHEL/centos8.0离线安装n卡驱动,cuda10.1,cudnn7.5,anaconda3,pycharm以及mmdeection和simpledet的搭建

    我最近在两台RHEL8 0的服务器装了这些玩意 特此记录一下 1 离线安装nvidia driver cuda10 1 cudnn7 5 关键因素 显卡型号 Quadro P4000 系统 RHEL 8 0 用 cat etc redhat
  • IPv4与ipv6联系

    IPv4又称互联网通信协议第四版 是网际协议开发过程中的第四个修订版本 也是此协议第一个被广泛部署的版本 但是2019年11月26日 全球所有43亿个IPv4地址已分配完毕 IPV6是互联网工程任务组设计的用于替代IPv4的下一代IP协议
  • Java高级程序设计_JAVA高级程序设计

    恢复内容开始 import java awt import java awt event ActionEvent import java awt event ActionListener import java awt event Mous
  • 12个C语言必背实例

    C语言实例第01期 十进制数转换二进制数 实例代码 include stdio h int main int m n k 定义变量 int a 16 0 printf 请输入一个0 32767之间的数字 n scanf d n printf
  • ImageNet零样本准确率首次超过80%,地表最强开源CLIP模型更新

    关注公众号 发现CV技术之美 本文转自新智元 编辑LRS 开源模型OpenCLIP达成ImageNet里程碑成就 虽然ImageNet早已完成历史使命 但其在计算机视觉领域仍然是一个关键的数据集 2016年 在ImageNet上训练后的分类
  • STM32--STM32CubeMX的Timer3定时1ms功能HAL库操作

    一 STM32CubeMX的设置 时钟源的选择 Crystal Ceramic Resonator 调试方法选择 Serial Wire 时钟输入为40MHz Timer3的参数设置 使能Timer3的中断 点击 Generate Code
  • unigui中的unidbgrid单元格内容太长自动回行

    1 servermodule中customcss中加入
  • Android 使用ffmpeg软编码 将摄像头采集视频编码成视频文件

    Android 使用ffmpeg软编码 将摄像头采集视频编码成视频文件 这次代码实现的是视频采集的功能 Android 通过jni 调用ffmpeg 编码yuv数据变成视频文件 先上代码 编码器上下文保存的实体 struct EnCodeB
  • R语言课程论文

    本文是自己在学习R统计分析课程后的课程小论文 对详细详细的文档及实现的R代码感兴趣者 可见文末获取方式 若转载请注明出处 欢迎大家交流学习 不足之处请多指教 Word版全文以及相应的r代码获取方式 资源下载链接 https download
  • 学一点Wi-Fi:WPA3 BP/OCV/SCV/PK/H2E/TD

    WFA在2020年底发布了WPA3标准的第三版 其中又提出了一些新的feature 这里结合之前的版本简单总结一下 1 BP BP是Beacon Protection的缩写 问 Beacon中的信息都是未加密的 所以可能存在攻击者会对AP发
  • 课设:影院管理系统

    影院管理系统 导言 知识点总结 课设介绍 导言 从3月份开始到现在 大概两周多的时间 写了一个影院管理系统 功能有待改善 有的功能还有点bug需要该 现在总结一下 影院管理系统告一段落 接下来要学习算法和数据结构 知识点总结 一 三层架构
  • 一文看懂npm、yarn、pnpm之间的区别

    本文作者对比了当前主流的包管理工具npm yarn pnpm之间的区别 并提出了合适的使用建议 以下为译文 NPM npm是Node js能够如此成功的主要原因之一 npm团队做了很多的工作 以确保npm保持向后兼容 并在不同的环境中保持一
  • 大数据毕设选题 - 深度学习口罩佩戴检测系统(python OpenCV YOLO)

    文章目录 0 前言 1 课题介绍 2 算法原理 2 1 算法简介 2 2 网络架构 3 关键代码 4 数据集 4 1 安装 4 2 打开 4 3 选择yolo标注格式 4 4 打标签 4 5 保存 5 训练 6 实现效果 6 1 pyqt实
  • Linux(ubuntu)上安装RDP Server(Xrdp)使用的注意事项

    ubuntu上的基本安装方法 1 apt get install xrdp 基本上就已经安装完成了 但是此时连接会出现异常 类似黑屏的情况 原因 1 Xrdp不支持unity 3D的图形 解决方法 1 使用xfce或者gnome 2d等 如
  • C#小知识

    项目编译后复制文件到生成目录 方法1 对于单个文件 可以点击属性 输出目录里选择始终复制 方法2 把项目中的ServerScripts复制到输出目录 在项目设置中 生成事件里添加批处理 xcopy ProjectDir ServerScri
  • anaconda用法

    查看已经安装的包 pip list 或者 conda list 安装和更新 pip install requests pip install requests upgrade 或者 conda install requests conda
  • LINUX权限-bash: ./startup.sh: Permission denied

    LINUX权限 bash startup sh Permission denied 执行 startup sh 或者 shutdown sh的时候 报 Permission denied 需要用命令 chmod 修改一下bin目录下的 sh
  • spring boot配置双Kafka方法

    第一步 application yml的配置 server port 8080 spring application name demo kafka one bootstrap servers xxx xxx xxx xxx consume
  • android动态毛玻璃,Android模糊处理简单实现毛玻璃效果

    自从iOS系统引入了Blur效果 也就是所谓的毛玻璃 模糊化效果 磨砂效果 各大系统就开始竞相模仿 这是怎样的一个效果呢 我们先来看一下 如下面的图片 实现效果大家都知道了 如何在Android中实现呢 说白了就是对图片进行模糊化处理 小编
  • Vue项目生成二维码

    场景 民主测评 闭卷测试 Vue项目生成二维码 使用手机浏览器扫码录入答题 一 创建vue项目 样式布局 接口联调 npm run build 打包成dist 文件 让后台发送到服务器中 页面地址就获取到了 二 前引入vue qr 二维码地