Loading... 添加组件`components/QRCodeGenerator/index.vue` ```html <template> <div> <img v-if="qrCodeImageUrl" :src="qrCodeImageUrl" alt="QR Code"style=""> </div> </template> <script> import QRCode from 'qrcode' export default { props: { url: { type: String, required: true } }, data () { return { qrCodeImageUrl: '' } }, watch: { url: { immediate: true, // 立即执行一次watch回调 handler (newUrl) { this.generateQRCode(newUrl) } } }, methods: { generateQRCode (url) { if (url.trim() === '') { // 链接不能为空 return } this.$nextTick(() => { // 在DOM更新完成后执行生成二维码图片 QRCode.toDataURL(url) .then(qrCodeUrl => { this.qrCodeImageUrl = qrCodeUrl }) .catch(err => { console.error(err) }) }) } } } </script> <style> /* 在这里可以添加样式进行美化 */ </style> ``` 使用 ```html <template> <div> <!-- 其他页面内容 --> <QRCodeGenerator :url="yourUrlHere" /> <!-- 其他页面内容 --> </div> </template> <script> import QRCodeGenerator from '@/components/QRCodeGenerator'; // 确保路径正确 export default { components: { QRCodeGenerator, }, // 其他页面代码 data() { return { yourUrlHere: 'https://www.example.com', // 将您要生成二维码的链接赋值给该属性 }; }, }; </script> ``` 最后修改:2023 年 07 月 25 日 © 允许规范转载 打赏 赞赏作者 微信 赞 2 如果觉得我的文章对你有用,请随意赞赏