使用方法

在 script 中引入组件

  1. import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
  2. import '@/utils/ican-H5Api.js';
  3. export default {
  4.     components: {tkiQrcode}，
  5.     data() {
  6.       return {
  7.         ifShow: true,
  8.         val: 'dsfafaf', // 要生成的二维码值
  9.         size: 260, // 二维码大小
  10.         unit: 'upx', // 单位
  11.         loadMake: true, // 组件加载完成后自动生成二维码
  12.         src: '', // 二维码生成后的图片地址或base64
  13.         invite: {}
  14.       };
  15.     },
  16.     onLoad() {
  17.       this.isLogin(true);
  18.       this.getQrcode();
  19.     },
  20.     methods: {
  21.       qrR(res) {
  22.         this.src = res;
  23.         console.log(this.src);
  24.       },
  25.       paste(value) {
  26.         uni.setClipboardData({
  27.           data: value,
  28.           success() {
  29.             uni.showToast({
  30.               title: '复制成功'
  31.             });
  32.           }
  33.         });
  34.       },
  35.       saveImg() {
  36.         uni.showToast({
  37.           title: '请截图保存',
  38.           icon: 'none'
  39.         })
  40.       },
  41.       getQrcode() {
  42.         var me = this;
  43.         // y请求接口 把要生成二维码的内容 赋值给 val
  44.         this.get('/api/user/url').then(res => {
  45.           if (res.code == 0) {
  46.             me.invite = res.data;
  47.             me.val = res.data.url;
  48.             // this.$refs.qrcode._makeCode(me.val);
  49.           }
  50.         });
  51.       }
  52.      }
  53. }

在 template 中使用

  1. <tki-qrcode v-if="ifShow" ref="qrcode" :val="val" :size="size" :onval="true" :loadMake="loadMake" :usingComponents="true" @result="qrR" />

https://ext.dcloud.net.cn/plugin?id=39