VUE开发报错之生成二维码(vue-qr插件)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xingkongtianma01/article/details/81408455

近来有幸被安排实现一个生成二维码预览的功能,个人感觉挺好玩,就欣然接受了。首先百度了下,发现vue中生成二维码的插件还不少呢,用的比较火的,有这么两个插件 vue-qart 和 vue-qr ,对比了下,感觉vue-qr的功能实现起来更加简单丰富,所以选择了vue-qr。本人是vue小白,记录下实现过程和遇到的深坑。

效果图如下:

 

因为是插件,所以实现起来还是比较简单的,固定的套路。

1.install with NPM

npm install vue-qr --save

2.在对应的模块中 Import 进vueQr组件 

import VueQr from 'vue-qr'

export default {
    components: { VueQr },
}

3.In template

<vue-qr :bgSrc='config.logo' :logoSrc="config.logo" :text="config.value" :size="200"></vue-qr>

4. 在data中配置

data() {
    return {
        config: {
          value: 'www.baidu.com',//显示的值、跳转的地址
          imagePath: require('../assets/logo.png')//中间logo的地址
        }
    }
}
 

5.成了。启动运行,浏览器查看效果即可。

为了方便 有需要的朋友,贴上二维码组件的全部代码如下:

<!--  -->
<template>
    <div>
      <h3>二维码生成组件</h3>
        <!-- <vue-qr  :logoSrc="config.logo" :text="config.value" :size="200" :margin="0"></vue-qr> -->
        <vue-qr style="float:left;margin-left:200px;" :bgSrc='config.imagePath' :text="config.value" :size="200" :margin="0"></vue-qr>
        <vue-qr style="float:left;margin-left:200px;" :logoSrc="config.imagePath" :text="config.value" :size="200" :margin="0"></vue-qr>
        <vue-qr style="float:left;margin-left:200px;" :bgSrc='config.imagePath' :logoSrc="config.imagePath" :text="config.value" :size="200" :margin="0"></vue-qr>
    </div>
        
</template>

<script>
import VueQr from 'vue-qr'

export default {
  components: { VueQr },
  data() {
    return {
        config: {
          value: 'www.baidu.com',//显示的值、跳转的地址
          imagePath: require('../assets/logo.png')//中间logo的地址
        }
    }
  },
  computed: {},

  //事件(钩子)回调函数:
  //组件创建之后,数据已经完成初始化,但是DOM还未生成
  created() {},

  //数据装载DOM上后,各种数据已经就位,将数据渲染到DOM上,DOM已经完成
  mounted() {},

  methods: {}
}
</script>
<style scoped>
</style>

好了,实现过程看起来貌似很简单,其实并没有想得那么简单。记录下爬过的深坑,还是关于二维码生成的问题。

问题1:启动报错,找不见logo.png 这种情况,处理方式,在项目根路径下重新执行一遍npm install 。如果还不行,就先把图片引用的代码注释掉,这样应该就可以正常启动了。

问题2:不报错,但是二维码就是不显示。这种应该是最让人头疼的了,连个报错都没有,简直是无从下手啊。这时,建议你试试把<vue-qr>中图片引用的相关代码先删掉,只保留:text,如下

<vue-qr :text="config.value" :size="200" :margin="0"></vue-qr>

这时应该是可以显示一个二维码的,但是没有logo和背景。

“带上图片就什么不显示也不报错,不带图片就可以显示二维码” ,那好办啊,不要图片了,凑合能用就行。

如果一开始就没有图片,也就凑合用了,但是见过好的,就说明可以实现,肯定还是哪里有问题。百度了好久,偶然发现了点小问题,在第4步,我最初的写法如下:

data() {
    return {
        config: {
          value: 'www.baidu.com',//显示的值、跳转的地址
          imagePath: '../assets/alogo.png'//中间logo的地址
        }
    }
  },

细心的童鞋应该已经发现了,imagePath后面的路径少了require的包裹。加上之后,怀着激动的心情,切出了浏览器,带logo和背景的二维码出来了。

本人非前端工程师,只是近期前端进度偏慢,被领导拉去帮忙的,所以对于引用图片路径为什么要加require还没有深入见解,欢迎前端大牛指教。

现在vue越来越火,但网上关于vue实现二维码的报错的问题总结,帖子少的可怜,所以感觉有必要记录下,帮助到有需要的朋友。

vue玩了两周多了,感觉从最初的很晕很不适应,到现在觉得,越来越灵活,越来越好玩。用vue开发还挺爽的!

阅读更多

没有更多推荐了,返回首页