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>