一,下载安装vue-qr第三方库
1,安装
liuhongdi@lhdpc:/data/vue/imgtouch$ npm install vue-qr --save added 11 packages in 5s
2,查看已安装库的版本:
liuhongdi@lhdpc:/data/vue/imgtouch$ npm list vue-qr imgtouch@0.1.0 /data/vue/imgtouch └── vue-qr@4.0.9
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: 371125307@qq.com
二,js代码:
Qrcode.vue
<template> <div style="background:#efefef;"> <vue-qr qid="qrid1" :callback="qrBack" :text="qrText" :size="sizeValue" :colorDark="colorValue" :logoSrc="logoSrc" ></vue-qr> <div> <button @click="downQr">下载生成的二维码图片</button> </div> <div> <el-input v-model="qrText" :rows="2" type="textarea" placeholder="请输入二维码的文本或链接等" style="500px;" /> </div> <div> <span style="margin-left: 20px;">尺寸</span> <el-select style="100px;margin-left: 10px;" v-model="sizeValue" class="m-2" placeholder="Select" size="default"> <el-option v-for="item in sizeOptions" :key="item.value" :label="item.label" :value="item.value" /> </el-select> <span style="margin-left: 20px;margin-right: 10px;">颜色</span> <el-color-picker v-model="colorValue" style="margin-left: 10px;" /> <span style="margin-left: 20px;">Logo</span> <input v-if="logoSrc.length == 0" style="margin-left: 10px; 180px;" type="file" ref="hiddenfile" accept="image/*" @change="handleLogoFile" class="hiddenInput"/> <button v-else style="margin-left: 10px;" @click="clearLogoFile" >清空Logo</button> </div> </div> </template> <script> import vueQr from 'vue-qr/src/packages/vue-qr.vue' import {ref} from "vue"; export default { name: "QrcodeImg", components: { vueQr, }, setup() { //二维码的内容,如用户输入的链接等 const qrText = ref("请输入二维码中的文本"); //生成的二维码大小 const sizeOptions = [ { value: 100, label: '100', }, { value: 200, label: '200', }, { value: 400, label: '400', }, { value: 600, label: '600', }, { value: 800, label: '800', }, ] //二维码的默认大小 const sizeValue = ref(400); //二维码的默认颜色值,此处用黑色 const colorValue = ref('#000000'); //logo的src const logoSrc = ref(""); //处理选中logo图片 const handleLogoFile = (e) => { let file = e.target.files[0]; let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () =>{ logoSrc.value = reader.result; //console.log(reader) } } //清除选中的logo图片 const clearLogoFile = () => { logoSrc.value = ""; } //下载二维码图片 const downQr = () => { let name = new Date().getTime(); let a = document.createElement("a"); a.style.display = "none"; a.download = name; a.href = qrData.value; document.body.appendChild(a); a.click(); } //二维码图片的编码数据 const qrData = ref(""); //qr的回调,每次变动后把二维码的数据保存下来,供下载用 const qrBack = (dataUrl,id) => { //console.log('qrback:'); console.log(id); qrData.value = dataUrl; } return { qrText, sizeOptions, sizeValue, colorValue, downQr, qrBack, //---logo begin logoSrc, handleLogoFile, clearLogoFile, } } }; </script> <style scoped> </style>
三,测试效果
四,查看vue的版本:
liuhongdi@lhdpc:/data/vue/imgtouch$ npm list vue imgtouch@0.1.0 /data/vue/imgtouch ├─┬ @vue/cli-plugin-babel@5.0.4 │ └─┬ @vue/babel-preset-app@5.0.4 │ └── vue@3.2.36 deduped ├─┬ element-plus@2.2.2 │ ├─┬ @element-plus/icons-vue@1.1.4 │ │ └── vue@3.2.36 deduped │ ├─┬ @vueuse/core@8.6.0 │ │ ├─┬ @vueuse/shared@8.6.0 │ │ │ └── vue@3.2.36 deduped │ │ ├─┬ vue-demi@0.13.1 │ │ │ └── vue@3.2.36 deduped │ │ └── vue@3.2.36 deduped │ └── vue@3.2.36 deduped └─┬ vue@3.2.36 └─┬ @vue/server-renderer@3.2.36 └── vue@3.2.36 deduped