vue-cli脚手架之二维码的生成（vue-qriously）

最新推荐文章于 2024-08-20 09:16:27 发布

獨歸

最新推荐文章于 2024-08-20 09:16:27 发布

阅读量315

点赞数

文章标签： vue

原文链接：https://blog.csdn.net/luoyali/article/details/79262778

版权

本文档介绍了如何在Vue项目中利用vue-cli集成vue-qriously插件来生成二维码。首先从GitHub找到并安装该插件，然后在main.js中引入并全局注册，最后在vue组件中使用，设置二维码的值和大小，从而实现二维码的显示。此外，还提供了vue-qriously的源码地址和一个简单的代码案例供参考。

摘要由CSDN通过智能技术生成

楼主项目需求中需要加入一个二维码扫描功能，在这之前还没有用过集成vue-cli脚手架里面的二维码插件，
这块楼主就去github上面找开源的插件，基于vue的插件貌似很多，一般都会满足大部分需求，然后就是几经波
折，最后实现了一下功能在这里插入代码片

在这里插入图片描述

二维码是通过 “vue-qriously” 插件来生成的一个二维码；
当前讲解的是这个插件应用于vue-cli中；
如有不妥，请多多包涵和指教。

vue-qriously 介绍

插件源码地址：https://github.com/theomessin/vue-qriously
个人理解的插件介绍：可以使用qrious在HTML Canvas上绘制QR码的vue组件。
题外话：一个与Vue.js相关的精美事物清单，即：awesome-vue

代码案例

安装

npm install vue-qriously --save-dev

main.js 入口文件

import Vue from 'vue'
import VueQriously from 'vue-qriously'
Vue.use(VueQriously)

vue文件中

<template>
    <qriously :value="initQCode" :size="138"/>     <!-- initQCode: 是你在你的vue实例中定义好的变量   size:是这个Canvas的大小，这里要根据你的视觉稿来决定-->
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                initQCode: '你自定定义的值'
            }
        }
    }
</script>
<style lang="less">
    /*样式*/
</style>