Fork me on GitHub

vue中生成二维码

<template>
  <div id="qrcode" ></div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
  name: "n-qr",
   props: {
    value: {
      type: String
    },
    options:{
      type:Object,
      default:function() {
        return {
        width: 100,
        height: 100,
        };
      }
    }
  },
   watch: {
    value(v){
      this.qrcode.makeCode(v);
    },
   },
  mounted(){
      this.qrcode = new QRCode("qrcode", this.options);
      this.qrcode.makeCode(this.value);
  }
}
</script>

使用:

 <nqr v-model="qrUrl" :options="options" class="qrcode"></nqr>
import nqr from "./nQr.vue";
export default {
  components: {
    nqr
  },
  data() {
    return {
      qrUrl: "",
      options: {
        width: 200,
        height: 200
      },
      createTime: ""
    };
  },

 

posted @ 2019-03-06 15:11  欢欢11  阅读(367)  评论(0编辑  收藏  举报