vue-二维码

Robert_c

于 2021-08-04 00:03:25 发布

阅读量277

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_45736502/article/details/119360090

版权

vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在Vue项目中利用vue-qr组件生成二维码。首先通过npm安装vue-qr，然后在相应页面导入并注册组件，最后在需要的位置使用该组件。可以进一步封装为可复用组件，方便进行二维码的批量下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue-qr实现二维码的生成

今儿遇到个需求：要在某个表格中展示出二维码。通过一番学习，最后选择使用vue-qr来实现该效果，具体流程如下。

安装vue-qr
这里我使用的是npm安装

npm install vue-qr --save

引入vue-qr
在需要的页面导入，并在components里面注册

<script>
  import vueQr from "vue-qr"
  export default{
    name:"demo",
    data(){
      return{
        tableData:[
          {
            …
            url:"https://www.baidu.com"
          },
          …
        ]
      }
    },
    components:{
      vueQr
    }
  }

</script>

使用组件
在对应的地方加入该组件

…
<vue-qr :option={size:200} :value="传的url"></vue-qr>

这个也可以封装成可复用的组件，只需传值即可。之后再补充二维码的批量下载