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.效果展示

  • 相关阅读:
    vue-cli3 中跨域解决方案
    自定义超链接动画---transition
    Vue 单选框与单选框组 组件
    js 控制随机数生成概率
    Vue slot插槽
    vue 组件通信
    vue中computed计算属性与methods对象中的this指针
    C#提取html中的汉字
    MVC几种找不到资源的解决方式
    使用Windows服务定时去执行一个方法的三种方式
  • 原文地址:https://www.cnblogs.com/loveliang/p/13569625.html
Copyright © 2011-2022 走看看