vue qrcode.js 边框

根据提供的引用内容，可以通过在`<div>`标签中设置`border`属性来为Vue中的qrcode.js添加边框。具体实现方法如下所示：

<template>
  <div class="qrcode-container">
    <div class="qrcode-border">
      <qrcode-vue :value="qrCodeValue" :options="qrCodeOptions"></qrcode-vue>
    </div>
  </div>
</template>

<script>
import QrcodeVue from 'qrcode.vue'

export default {
  components: {
    QrcodeVue
  },
  data() {
    return {
      qrCodeValue: 'https://www.example.com',
      qrCodeOptions: {
        size: 200,
        margin: 2
      }
    }
  }
}
</script>

<style>
.qrcode-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.qrcode-border {
  border: 25px solid #fff;
  background-color: #fff;
}
</style>

在上述代码中，我们首先引入了`qrcode.vue`组件，并在`<template>`标签中使用了该组件。然后，我们在外层`<div>`标签中添加了一个名为`qrcode-container`的类，用于居中显示qrcode。接着，在内层`<div>`标签中添加了一个名为`qrcode-border`的类，并设置了`border`属性和`background-color`属性，用于实现边框效果。最后，我们在`<script>`标签中定义了`qrCodeValue`和`qrCodeOptions`两个变量，用于设置qrcode的值和选项。