vue3使用vue-qr展示二维码

要在Vue3中使用vue-qr展示二维码，首先需要在组件中引入vue-qr并注册为局部组件。可以通过以下代码实现：

import vueQr from "vue-qr"

export default {
  components: {
    vueQr
  }
}

接下来, 在模板中使用vue-qr组件，设置相应的属性来展示二维码。你可以在`<vue-qr>`标签中添加以下属性：
- `:logoSrc`：设置二维码中间的图标的图片路径（例如，`qrcodeImageUrl`）
- `:text`：设置二维码的内容（例如，`qrcodeConts`）
- `:size`：设置二维码的尺寸大小（例如，`180`）

下面是一个示例代码片段：

<template>
  <div>
    <div style="padding-bottom:10px;">设备二维码</div>
    <div style="border:1px solid #ccc;width:200px;text-align: center;margin-left:20px;margin-top:-10px;">
      <vue-qr :logoSrc="qrcodeImageUrl" :text="qrcodeConts" :size="180"></vue-qr>
    </div>
  </div>
</template>

请注意，你需要在`data`选项中定义`qrcodeImageUrl`和`qrcodeConts`变量，并为它们赋予相应的值。这些变量将根据你的需求提供二维码的图标和内容。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>