生成二维码插件&用法

标签：插件 vue js QRCode 二维码 qrcode 用法

        1）vue-qrcode：

         git地址： https://github.com/fengyuanchen/vue-qrcode          用法：                 安装依赖：npm install [email protected] --save         

html:
<qrcode-vue class="qrcode-pic" :value="qrvalue" :size="qrSize" level="H" />

js:
import QrcodeVue from "qrcode.vue";
components: {
    QrcodeVue
  },
 data() {
    return {
      qrvalue:'', // 二维码字符串
      qrSize:250,
      }
   }

       2) QRCode.js

          git地址：https://github.com/davidshimjs/qrcodejs

        用法：引入静态js文件 qrcode.js

html:

          <section             ref="qrcode"           ></section>

js:
import QRCode from "../../js/plugins/qrcode.js"; // 引入生成二维码插件

 data() {
    return {

           qrcode: {}, // 二维码对象

      }
   },

  mounted() {     // 生成二维码对象     this.qrcode = new QRCode(this.$refs.qrcode, { // 显示二维码的dom节点       text: "",       width: 200,       height: 200,       colorDark: "#000000",       colorLight: "#ffffff"       // correctLevel: QRCode.CorrectLevel.H // 容错率     });   },   methods:{    ........        this.qrcode.makeCode(qRCodestring); // 生成二维码     .......   }

 

     

标签：插件,vue,js,QRCode,二维码,qrcode,用法
From： https://www.cnblogs.com/xiaoliulang-cc/p/17058071.html