uniapp生成二维码插件(tki-qrcode二维码生成器)

1、uniapp生成二维码插件

由于代码太多不便粘贴了，可以进入这里查看详情https://www.npmjs.com/package/tki-qrcode

2、调用页面的实例代码如下:

<tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="val" :size="size" :unit="unit" :icon="icon"
  :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />

<script>
  import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
  export default {
    components: {
      tkiQrcode
    },
    data() {
      return {
        id: '',
        val: '二维码', // 要生成的二维码值
        size: 200, // 二维码大小
        unit: 'rpx', // 单位
        background: '#b4e9e2', // 背景色
        foreground: '#309286', // 前景色
        pdground: '#32dbc6', // 角标色
        icon: '', // 二维码图标
        iconsize: 40, // 二维码图标大小
        lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
        onval: true, // val值变化时自动重新生成二维码
        loadMake: true, // 组件加载完成后自动生成二维码
        src: '' // 二维码生成后的图片地址或base64
      };
    },
    watch: {
      id(val) {
        if (!val) return
        this.getDetail()
      }
    },
    onLoad(params) {
      this.id = params.id;
    },
    methods: {
      qrR(res) {
        this.src = res
      },
      getDetail() {
        detailRouting(this.id).then(res => {
          this.val = this.form.code
        })
      }
    }
  }
</script>

3、tki-qrcode二维码生成器页面的效果图