zoukankan      html  css  js  c++  java
  • vue项目使用二维码

    需求:有些时候我们需要存储一些信息用二维码来展示,但我们如何在二维码内使用呢,废话不多说,开搞。

    方方一:vue-qr

    vue-qr :不仅可以生成二维码,还可以添加二维码中间的logo图片

    1.npm安装包

    npm install vue-qr --save

    2.引入

    import vueQr from "vue-qr";

    3.组件使用

    <vue-qr :logoSrc="imageUrl" :text="getcode" :size="200"></vue-qr>

    4.完整代码(仅供参考)

    <template>
      <div>
        <vue-qr :logoSrc="imageUrl" :text="getcode" :size="200"></vue-qr>
      </div>
    </template>
    <script>
    import vueQr from "vue-qr";
    export default {
      name: "qecode",
      data() {
        return {
            // 此处设置的为logo图片
          imageUrl: require("../../assets/logo.png"),
          text: {
            name: "小白",
            age: "22",
            sex: "男",
          },
          code: "",
        };
      },
      components: {
        vueQr,
      },
      computed: {
        //   通过计算属性的方法 计算出需要的信息-- 计算属性个data声明的变量一样可以在文档中直接饮用
        getcode() {
            // 通过拼接展示 需要的信息
          let code ="姓名:" + this.text.name +",年龄:" + this.text.age + ",性别:" + this.text.sex;
          this.code = code;
          return code;
        },
      },
      mounted() {},
      methods: {},
    };
    </script>
    

    5.效果展示

    方法二:QRcode

    1.安装

    npm install qrcodejs2

    2.引入

    import QRCode from 'qrcodejs2'

    3.组件使用

    import QRCode from 'qrcodejs2'

    4.完整代码

    <template>
      <div>
        <div class="qrcode" ref="qrCodeUrl"></div>
      </div>
    </template>
    <script>
    import QRCode from "qrcodejs2";
    export default {
      data() {
        return {
          obj: {
            name: "你好",
            age: 18,
            info: "二维码",
          },
        };
      },
      methods: {
        creatQrCode() {
          var qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: this.obj.name + this.obj.age + this.obj.info,
             100,
            height: 100,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H,
          });
        },
      },
      mounted() {
        this.creatQrCode();
      },
    };
    </script>
    

    5.效果展示

  • 相关阅读:
    字体下载大宝库:30款好看的免费英文字体
    jQuery Mapael – 呈现动态的矢量地图
    Qt:用 __thread 关键字让每个线程有自己的全局变量
    从C++到Qt(舍弃IDE或qmake、cmake等工具的束缚,尝试通过几个例子)
    C++11(及现代C++风格)和快速迭代式开发
    EventBus + Redis发布订阅模式
    并发、并行和高并发
    Span<T>和Memory<T>
    Lucene.Net做一个简单的搜索引擎-全文索引
    技术架构演变
  • 原文地址:https://www.cnblogs.com/loveliang/p/13569625.html
Copyright © 2011-2022 走看看