vue3+ts 使用插件vue-qr生产二维码图片并下载
vue3+ts 使用插件vue-qr生产二维码图片并下载
·
1. 下载:
npm install vue-qr --save 或 yarn add vue-qr --save 或 pnpm add vue-qr --save
2.引用:
vue3中引用:import vueQr from 'vue-qr/src/packages/vue-qr.vue';
vue2中引用:import VueQr from 'vue-qr'
3. vue-qr npm库地址:
查询各属性介绍
4. 使用HTML代码示例
<template>
<!-- 需要展示二维码就不用隐藏 -->
<vue-qr
ref="qrcode"
:text="qrCodeValue"
logo-src=""
:size="500"
style="display: none"
></vue-qr>
<a-button type="link" @click="download">下载</a-button>
</template>
5.ts代码示例:
<script lang="ts" setup>
import vueQr from 'vue-qr/src/packages/vue-qr.vue';
const qrcode = ref<typeof vueQr>(); // 实例
const qrCodeValue = ref(''); //二维码内容
// 下载
const download = () =>{
// TODO 接口返回数据
let res = "112233"
// 数据返回生产二维码
qrCodeValue.value = res ;
// 生成二维码是属于异步行为,所以下载二维码也为异步行为
const timer = setTimeout(() => {
// 可打印获取二维码插件里的数据
console.log('data', qrcode.value);
console.log('下载签到码', qrcode.value.imgUrl);
// 下载
// 注,当在vue3+ts项目中,识别不了document是,前面加上window
const eleLink = window.document.createElement('a');
eleLink.style.display = 'none';
eleLink.download = '二维码';
eleLink.href = qrcode.value.imgUrl;
eleLink.click();
eleLink.remove();
clearTimeout(timer);
});
}
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)