vue组件 前端生成二维码

1，npm下载

npm install vue-qr --save

2，在package.json查看是否安装成功

　　

 

 3，创建自定义组件

<template>
  <div>
    <vue-qr :text="textParam" :size="sizeParam"></vue-qr>
  </div>
</template>

<script>
import VueQr from 'vue-qr'
export default {
  name: "vueQrCode",
  //对外暴露的传入参数 text：生成的文本 size：边框大小
  props:{text:{type:String,default:()=>""},size:{type:Number,default:()=>200}},
  components:{
    VueQr,
  },
  data(){
    return {

    }
  },
  created() {
  },
  methods:{
    refreshQrCode(text){
      console.log("刷新二维码："+text);
      let _this =this;
      _this.$nextTick(()=>{
        _this.text = text;
      })
    },
    getText(){
      let _this =this;
      _this.$nextTick(()=>{
        return _this.text;
      })

    },
  },
  computed:{
    textParam:function (){
      return this.text;
    },
    sizeParam:function (){
      return this.size;
    }
  }
}
</script>

<style scoped>

</style>

4，使用组件<template>  <div class="app-container">    <vueQrCode :size=qrCodeSize :text="qrCodeText"> </vueQrCode>

  </div>
</template>    
<script>
import vueQrCode from "@/views/components/vueqr/vueQr";
export default {
  name: "index",
  components:{
    vueQrCode,
  },data(){
    return{
      queryParams: {
        // 查询参数
        pageNum: 1,
        pageSize: 10,
        inventory: null,
      },
      qrCodeText:"{\"itemId\":1,\"id_number\":\"421083199202044958\",\"employee_name\":\"王五\"}",
      qrCodeSize:150,
    }
  },
  created() {
  },
    methods: {

//根据参数刷新二维码

refreshQrCode(){

let text ={
  "itemId":"7",
  "id_number":"123",
  "employee_name":"456",
  "master_name":"789",
  "master_id_number":"112233",
  "old_enterprise_name":"445566"
};

this.qrCodeText = JSON.stringify(text);

},

}, } </script> <style scoped> </style>