网络编程
位置：首页>> 网络编程>> JavaScript>> vue中使用vue-qriously插件生成二维码

vue中使用vue-qriously插件生成二维码

作者：weixin_49203377　　发布时间：2024-04-27 16:01:31　

标签：vue,二维码,插件,vue-qriously

需求：项目中需要把链接地址生成二维码，用户扫描二维码就可以打开页面
实现如下：使用了vue-qriously插件
使用步骤：

安装

npm install vue-qriously --save-dev

main.js入口文件中引入

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

在vue文件中使用

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

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

我在项目中如下布局：

<div class="share_pop_two">
               <div>
                 <qriously :value="baseUrl" :size="140" />
               </div>
             </div>

项目中样式如下设置

.share_pop_two {
       width: 150px;
       height: 150px;
       text-align: center;
       margin: 0 auto;
       margin-top: 26px;
       div {
         width: auto;
         display: inline-block;
         background: #fff;
         // padding: 0.3rem;
         // height: 10rem;
         box-sizing: content-box;
         outline: 1px solid #fff;
         outline-offset: 5px;
       }
     }

生成的效果如下：

vue中使用vue-qriously插件生成二维码

来源：https://blog.csdn.net/weixin_49203377/article/details/124129986

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com