vue中生成二维码（中间带logo）

1.vue中使用qrcode
一开始使用qrcode生成二维码，查看源码中的参数，似乎不能带logo。单单生成二维码还是很方便的

首先输入指令

npm install qrcode --save

<template><div><qrcode-vue size="300" level="H"  :value="codeValue"></qrcode-vue>
</div>
</template>
<script>
import QrcodeVue from 'qrcode.vue'
export default {data () {return {codeValue: ``,}},components: {QrcodeVue}}</script>

2.可使用vueqr生成中间带图片的二维码
首先，同样输入指令

npm install vue-qr --save

<template><div><vue-qr :logoSrc="imageUrl" :text="codeValue" :logoScale="50" :size="300"></vue-qr></div></template>
<script>
import QrcodeVue from 'qrcode.vue'
export default {data () {return {imageUrl:'../../src/assets/logo.png',//默认二维码中间图片}},components: {VueQr}}</script>

传入数据后生成如下二维码

也可参考文档https://www.npmjs.com/package/vue-qr

vue中生成二维码（中间带logo）相关推荐

Vue中生成二维码的一种方式—vue-qr
Vue中生成二维码的一种方式-vue-qr vue实现二维码生成(vue + vue-qr)
vue 中生成二维码，合成海报
1.分别引入 qrcodejs2.html2canvas 执行以下命令行 npm install qrcodejs2 npm install html2canvas 2.下载canvas2image, ...
vue中生成二维码并自动批量下载
项目中经常又这样的需求,要求将字符串生成二维码,并下载下来一般分为生成一个二维码展示并下载,对于这种你只需调用 qrcodejs2生成二维码就可以了下载也是按钮触发今天我们要说的是批量下载, ...
python3生成二维码中间带logo，有底图，可自定义文字
效果: qrcode_result.png 代码: #!/user/bin/Python3 """ @Lanson @2019-11-02 ""&qu ...
在Vue中生成二维码扫描在手机上跳转页面
使用方法: 安装vue-qr npm install vue-qr --save 在components新建一个vue组件,eg:vueQr.vue (以下为组件完整代码) <template& ...
在Vue中生成二维码(前端生成二维码:Qrcode)
1.首先我们需要使用"npm install --save qrcode"下载依赖包 npm install --save qrcode 2.在要使用qrcode的页面导入qrco ...
Vue项目生成二维码
场景: [民主测评.闭卷测试] Vue项目生成二维码,使用手机浏览器扫码录入答题一,创建vue项目,样式布局,接口联调, npm run build 打包成dist 文件,让后台发送到服务器中,页面 ...
【工具】Vue中生成二维码组件——vue-qr
[工具]Vue中生成二维码组件--vue-qr npm地址--https://www.npmjs.com/package/vue-qr 注:不支持IE浏览器效果 1.安包 npm install v ...
Vue批量生成二维码并分页打印，组件形式实现
Vue批量生成二维码并分页打印,组件形式实现一. 最终效果二. 实现方式一. 最终效果二. 实现方式安装qrcodejs2插件: // 终端执行 npm install qrcodejs2 ...
转载：在微信小程序中生成二维码
目录转载: weapp-qrcode-canvas-2d 仓库地址测试环境使用安装方法1:直接引入 js 文件安装方法2:npm安装安装完成后调用例子1:没有使用叠加图片例子2:使用叠 ...

vue中生成二维码（中间带logo）

vue中生成二维码（中间带logo）相关推荐

最新文章

热门文章