【工具】Vue中生成二维码组件——vue-qr

【工具】Vue中生成二维码组件——vue-qr

npm地址——https://www.npmjs.com/package/vue-qr

注：不支持IE浏览器

效果

1、安包

npm install vue-qr --save

2、引入

// vue2.0
import VueQr from 'vue-qr'
// vue3.0
import VueQr from 'vue-qr/src/packages/vue-qr.vue'
new Vue({
    components: {VueQr}
})

3、使用

<vue-qr :bgSrc='src' :logoSrc="src2" text="Hello world!" :size="200"></vue-qr>
<vue-qr text="Hello world!" :callback="test" qid="testid"></vue-qr>
<script>
export default {
    methods:{
        test(dataUrl,id){
            console.log(url, id)
        }
    }
}
</script>

4、相关配置属性

5、实例

index.vue

<!--
 * @Author: user
 * @Date: 2022-03-22 14:06:12
 * @LastEditTime: 2022-03-22 14:06:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath:/src/views/downApp.vue
-->
<template>
  <div class="all">
    <div class='top'></div>
    <div class='center_down_app'>
      <div class='bg' :style='{backgroundImage:"url(" + bg.src +")"}'></div>
      <div class='qrcode_sp'>
        <div class='qrcode_bg'>
           <!-- <vue-qr :text="downloadData.url" :logoSrc="downloadData.icon + '?cache'" :margin="0" colorDark="#f67b29" colorLight="#fff"  :logoScale="0.3" :size="200"></vue-qr> -->
          <vue-qr :text="downloadData.url" :logoSrc="downloadData.icon" :size="145" :logoScale="0.2" :logoMargin='3' :margin="10" colorDark="#585E67" colorLight="#fff"></vue-qr>
        </div>
        <p>用手机扫描二维码安装</p>
      </div>
      <div class='download_sp'>
        <a :href= latestAppData.appUrl >
          <div class='download_btn' @mousemove="isMask = true" @mouseout="isMask = false">
            <img src="@/img/android.svg" class="imgMiddle" />
            <div class='btn_w'>下载</div>
            <div class="mask" v-show="isMask"></div>
          </div>
        </a>
        <p class='versions_sp'>最新版本：{{latestAppData.appVersion}}(build {{latestAppData.upgradeLevel}}) ｜ 大小：{{latestAppData.appSize}}MB | 更新时间：{{latestAppData.updateTime}}</p>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import vueQr from 'vue-qr'
import {queryLatestApp} from '@/api/request';
export default {
  components: {
    vueQr
  },
  data () {
    return {
      bg: { src: require('@/img/logo_download.png') },
      downloadData: {
        url: '',
        icon: require('@/img/qr_logo.svg')
      },
      latestAppData: {},
      isMask:false
    }
  },
  created () {
    queryLatestApp({appType: '安卓'}).then(res => {
      this.latestAppData = res;
      this.latestAppData.updateTime = res.updateTime.split(' ')[0];
      this.downloadData.url = res.appUrl;
    })
  }
}
</script>
<style lang="scss" scope>
.all{
  width: 100%;
  height: 100%;
  background: #131623;
  overflow: hidden;
  .top{
    width: 100%;
    height: 46px;
    background: linear-gradient(90deg, #75C6FE, #B256F9);
  }
  .center_down_app{
    width: 1366px;
    height: 646px;
    margin-left: calc(50% - 683px);
    position: relative;
    margin-top: 70px;
    .bg{
      width: 610px;
      height: 670px;
      margin-left: calc(50% - 305px);
      background-size: contain;
    }
    .qrcode_sp{
      width: 188px;
      height: 220px;
      position: absolute;
      top: 136px;
      left: 28%;
      .qrcode_bg{
        width: 188px;
        height: 188px;
        padding: 20px;
        background: #141723;
        border-radius: 30px;
        border:solid 1px rgba(101, 103, 107, 0.22);
        box-shadow: 0px 12px 68px 19px rgba(0, 0, 0, 0.59);
      }
      p{
        width: 188px;
        height: 16px;
        font-size: 16px;
        line-height: 32px;
        font-weight: 400;
        color: #848390;
        text-align: center;
      }
    }
    .download_sp{
      width: 461px;
      height: 110px;
      position: absolute;
      right: 22%;
      bottom: 0px;
      .download_btn{
        width: 434px;
        height: 62px;
        line-height: 58px;
        background: #4E55AF;
        border-radius: 30px;
        position: relative;
        .mask{
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          border-radius: 30px;
          background-color: rgba(0, 0, 0, 0.2);
        }
        .imgMiddle{
          width: 36px;
          height: 36px;
          display: block;
          float: left;
          margin: 13px 0px 0px 166px;
        }
        .btn_w{
          margin-left: 10px;
          margin-top: 2px;
          font-size: 20px;
          letter-spacing: 10px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #FFFFFF;
          float: left;
        }
      }
      .versions_sp{
          height: 14px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #C6CAD5;
          line-height: 24px;
          margin-top: 34px;
        }
    }
  }
  @media only screen and (max-height: 770px){
    .center_down_app{
      margin-top: 40px !important;
    }
    .bg{
      margin-left: calc(50% - 244px) !important;
      width: 427px !important;
      height: 469px !important;
    }
    .qrcode_sp{
      top: 80px !important;
    }
    .download_sp{
      bottom: 170px !important;
    }
  }
}
</style>