vue3 将文字或链接生成二维码 qrcode.vue

安装

npm install --save qrcode.vue

案例 vue3+ts

利用Popover 气泡卡片 点击后d窗，或是修改为鼠标触动d框都可以
还可以写css样式改变二维码与卡片样式【Popover 气泡卡片】

<el-popover placement="right" trigger="click" :teleported="false">
  <template #reference>
    <el-link type="primary" class="qc_handle" @click="goCode">生成二维码</el-link>
  </template>
  <div v-if="codeShow" class="fcc">
    <qrcode-vue
      :value="
        https://www.baidu.com/
      "
      :size="qcsize"
      level="H"
    />
  </div>
</el-popover>
<script setup lang="ts">
import QrcodeVue from 'qrcode.vue'

const qcsize = 100
const codeShow = ref(false)
const goCode = () => {
  codeShow.value = true
}
</script>

案例vue

<template>
  <div id="app">
   <qrcode-vue :value='value' :size='size'></qrcode-vue>
  </div>
</template>

<script>
//导入组件
import QrcodeVue from 'qrcode.vue'
export default {
  name: 'App',
  data() {
    return {
      value: 'https://www.baidu.com/', //二维码内容
      size: 300, //二维码大小
    }
  },
  //导入组件
  components: {
    QrcodeVue,
  },
}
</script>