VUE3项目生成二维码

1.安装  qrcode.vue

yarn add qrcode.vue

//安装完成以后package.json如下
//"qrcode.vue": "^3.4.1",

2.直接CV如下代码，即可生成

<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-input v-model="codeVal" placeholder="请输入二维码的值"></el-input>
            </el-col>
            <el-col :span="6">
                <el-button @click="changeCode">
                    生成二维码的值
                </el-button>
            </el-col>
        </el-row>
        <el-row>
            <qrcode-vue v-if="shouldGenerateQRCode" :value="value" :size="120" :margin="2" :level="level"
                :render-as="renderAs" />
        </el-row>
    </div>
</template>
  
<script setup lang="ts">
import { ref, computed } from 'vue';
import QrcodeVue, { Level, RenderAs } from 'qrcode.vue';

const value = ref('');
const codeVal = ref('');
const level = ref<Level>('M');
const renderAs = ref<RenderAs>('svg');

const changeCode = () => {
    if (codeVal.value !== '') {
        value.value = codeVal.value;
    }
};

const shouldGenerateQRCode = computed(() => value.value !== '');

</script>
  
<style lang="scss" scoped></style>

3.最终效果