Vue ts vue-manage-system-master 项目中绘制 二维码

1.引入库

npm install qrcodejs2

//微信：qiaominliu

2.实例

<template>
    <div>
        <button @click="saveEdit">23312312</button>
        <img :src="query.img" alt="">
    </div>
</template>
  
<script setup lang="ts" >
import { ref, reactive } from 'vue';
import QRCode from 'qrcode';
let query = reactive({
    img: ''
});
const text = 'Hello, world!'; // 要生成二维码的文本内容
const saveEdit = () => {
    QRCode.toDataURL(text)
        .then(url => {
            console.log(url)
            query.img=url;
        })
        .catch(err => {
            console.error(err);
        });
}
</script>
 
  

2.效果