vue 动态生成下载二维码

菜花记录

vue项目如何动态生成一个下载二维码
项目中二维码动态配置好下载链接，现场直接修改配置就可以调试
第一步先直接在终端下载vue插件

npm install vue-qriously --save-dev

第二步全局引入在main.js入口文件中

import vueQriously from "vue-qriously";

第三步在 public文件下的config.js文件中配置好下载地址链接（这样现场直接在这块改就可以了）

var vueConfig = {homeDownUrl: "下载地址链接", //登录页二维码内地址
};

第四步在vue页面中

<template><div><div class="wrap"><el-row><el-col :span="24"><div class="box"><!-- size:是这个Canvas的大小要根据自己需求来决定--><qriously :value="baseUrl" :size="200" /></div></el-col></el-row></div></div>
</template><script>
export default {data() {return {baseUrl: '',}},mounted() {this.baseUrl = vueConfig.homeDownUrl},methods: {}
}
</script>

vue 动态生成下载二维码相关推荐

html动态生成下载二维码
一,引包 <script src="js/jquery.qrcode.min.js"></script> <script src="js/j ...
前端Vue H5生成带二维码的分享海报，实现长按保存到手机相册
前端Vue H5生成带二维码的分享海报,实现长按保存到手机相册前言:关于H5分享海报的需求,经常会遇到,通常就是一个分享的二维码+分享文案,生成一张图片,供用户在手机上长按保存到手机,然后就可以将保 ...
【Vue+Java】前后端联动生成下载二维码
目录指引背景运用场景环境丑话说在前前端部分通过axios请求传参二次封装axios.create方法定义download方法,通过axios进行传参前端vue页面方法 HTML部分按 ...
Vue - H5 生成带二维码和文案的宣传海报（可自定义二维码扫描后的内容、海报背景图、文案文字、宽高间距等）用 HTML 写可 DIY 的海报，做完后转为图片供用户保存和转发下载
前言这种需求常见于内容分享时,需要自动生成海报(图片)供用户保存或截图转发,网上的大部分教程都太乱且有 BUG. 本文将带您从 0-1 一路复制,完成一个兼容性好.健壮.注释详细的示例, 开箱即用, ...
vue实现qrcode下载二维码
后台返回: 1,npm命令下载qrcode (1)在项目文件夹中 npm install --save qrcode (2)或在全局中安装 npm install -g qrcode 2,引入 imp ...
javascript动态生成网址二维码图片
这个实现二维码生成功能的是引用谷歌google的JS来实现的,可以兼容几乎所有浏览器,包括动态和静态网页,具有加载速度快的特点! 代码如下: 放到你想添加二维码的位置 ; <script typ ...
vue生成app二维码，并扫码下载app
文章目录项目需求开发 web官网下载页的开发 web官网地址生成下载二维码项目需求公司要做一个web官网的下载页面,功能是微信扫码可以直接下载Ios手机端app.Android手机端app.及 ...
vue/html+qrcode生成付款二维码(前端部分)
vue+qrcode生成付款二维码 1.Vue项目中如何使用qrcode生成付款二维码一.安装qrcode.js 二.新建qrcode.vue组件三.项目中引入组件 2.Html项目中如何使用 1 ...
java+vue的二维码生成，二维码上传服务器，二维码的压缩包下载
一. vue页面生成二维码 <template><div class="app-container">//在页面放着二维码的div<div id=&q ...

vue 动态生成下载二维码

菜花记录

vue 动态生成下载二维码相关推荐

最新文章

热门文章