59.vue3+element-plus制作二维码生成器
1 <template> 2 <div> 3 <el-card style="height:80px;font-size: 30px;">二维码生成器</el-card> 4 <div style="display: flex;"> 5 <el-card style="width: 250px;background-color: aquamarine;"> 6 <el-input v-model="inputValue" placeholder="输入内容" style="width: 200px;"></el-input> 7 <div> 8 <el-button @click="zoomIn">放大</el-button> 9 <el-button @click="zoomOut">缩小</el-button> 10 </div> 11 <img :src="qrCodeImage" alt="QR Code" :style="imgStyle" /> 12 </el-card> 13 <el-card style="width: 250px;background-color: brown;"> 14 <el-input v-model="inputValue2" placeholder="输入内容" style="width: 200px;"></el-input> 15 <div> 16 <el-button @click="zoomIn">放大</el-button> 17 <el-button @click="zoomOut">缩小</el-button> 18 </div> 19 <img :src="qrCodeImage2" alt="QR Code" :style="imgStyle2" /> 20 </el-card> 21 <el-card style="width: 280px;background-color: darkslategray;"> 22 <el-input v-model="inputValue3" placeholder="输入内容" style="width: 230px;"></el-input> 23 <div> 24 <el-button @click="zoomIn">放大</el-button> 25 <el-button @click="zoomOut">缩小</el-button> 26 </div> 27 <img :src="qrCodeImage3" alt="QR Code" :style="imgStyle3"/> 28 </el-card> 29 <el-card style="width: 280px;background-color: black;"> 30 <el-input v-model="inputValue4" placeholder="输入内容" style="width: 230px;"></el-input> 31 <div> 32 <el-button @click="zoomIn">放大</el-button> 33 <el-button @click="zoomOut">缩小</el-button> 34 </div> 35 <img :src="qrCodeImage4" alt="QR Code" :style="imgStyle4" /> 36 </el-card> 37 </div> 38 </div> 39 </template> 40 41 <script setup lang="ts"> 42 import { ref, watch, computed } from 'vue'; 43 import QRCode from 'qrcode'; 44 45 const inputValue = ref(''); 46 const inputValue2 = ref(''); 47 const inputValue3 = ref(''); 48 const inputValue4 = ref(''); 49 const qrCodeImage = ref(''); 50 const qrCodeImage2 = ref(''); 51 const qrCodeImage3 = ref(''); 52 const qrCodeImage4 = ref(''); 53 const imgSize = ref(150); 54 55 watch(inputValue, async (newValue) => { 56 if (inputValue.value) { 57 const qrCodeDataUrl = await QRCode.toDataURL(newValue); 58 qrCodeImage.value = qrCodeDataUrl; 59 } 60 }); 61 62 watch(inputValue2, async (newValue) => { 63 if (inputValue2.value) { 64 const qrCodeDataUrl = await QRCode.toDataURL(newValue); 65 qrCodeImage2.value = qrCodeDataUrl; 66 } 67 }); 68 69 watch(inputValue3, async (newValue) => { 70 if (inputValue3.value) { 71 const qrCodeDataUrl = await QRCode.toDataURL(newValue); 72 qrCodeImage3.value = qrCodeDataUrl; 73 } 74 }); 75 76 watch(inputValue4, async (newValue) => { 77 if (inputValue4.value) { 78 const qrCodeDataUrl = await QRCode.toDataURL(newValue); 79 qrCodeImage4.value = qrCodeDataUrl; 80 } 81 }); 82 83 const imgStyle = computed(() => { 84 return { 85 display: inputValue.value ? 'block' : 'none', 86 width: `${imgSize.value}px`, 87 height: `${imgSize.value}px`, 88 }; 89 }); 90 const imgStyle2 = computed(() => { 91 return { 92 display: inputValue2.value ? 'block' : 'none', 93 width: `${imgSize.value}px`, 94 height: `${imgSize.value}px`, 95 }; 96 }); 97 const imgStyle3 = computed(() => { 98 return { 99 display: inputValue3.value ? 'block' : 'none', 100 width: `${imgSize.value}px`, 101 height: `${imgSize.value}px`, 102 }; 103 }); 104 const imgStyle4 = computed(() => { 105 return { 106 display: inputValue4.value ? 'block' : 'none', 107 width: `${imgSize.value}px`, 108 height: `${imgSize.value}px`, 109 }; 110 }); 111 112 const zoomIn = () => { 113 imgSize.value += 10; 114 }; 115 116 const zoomOut = () => { 117 if (imgSize.value > 10) { 118 imgSize.value -= 10; 119 } 120 }; 121 122 </script>
效果大致如下：
