vue二维码生成可自定义logo

<template xlang="wxml">
  <view class="container">
    <!-- pdground="rgba(123, 191, 234, 1)  qrR(res) { this.src = res }-->
    <tki-qrcode :show="true" :size="200" unit="upx" cid="qrcode1" ref="qrcode"
          val="https://ext.dcloud.net.cn/plugin?id=39" :showLoading="false"
          icon="/static/images/lz/lz_bg.png"
          :iconSize="40" :onval="false" :loadMake="true" :usingComponents="true"
          @result="qrR" />
  </view>
</template>

<script>
  import {dateUtils} from 'mioJs/dateUtils'
    export default {
      onLoad () {
          console.log(dateUtils.today({ymrSign: true}))
      },
        data() {
            return {
                ifShow: true,
                val: 'http://www.baidu.com', // 要生成的二维码值
                size: 200, // 二维码大小
                unit: 'upx', // 单位
                background: '#b4e9e2', // 背景色
                foreground: '#309286', // 前景色
                pdground: '#32dbc6', // 角标色
                icon: '', // 二维码图标
                iconsize: 40, // 二维码图标大小
                lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
                onval: false, // val值变化时自动重新生成二维码
                loadMake: true, // 组件加载完成后自动生成二维码
                src: '' // 二维码生成后的图片地址或base64
            }
        },
        methods: {

            creatQrcode() {
                this.$refs.qrcode._makeCode()
            },
            saveQrcode() {
                this.$refs.qrcode._saveCode()
            },
            qrR(res) {
                this.src = res
            },
            clearQrcode() {
                this.$refs.qrcode._clearCode()
                this.val = ''
            },
            ifQrcode() {
                this.ifShow = !this.ifShow
            },
        },
    }
</script>

<style>
  /* @import "../../../common/icon.css"; */
  .container {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .qrimg {
    display: flex;
    justify-content: center;
  }

  .qrimg-i {
    margin-right: 10px;
  }

  slider {
    width: 100%;
  }

  input {
    width: 100%;
    margin-bottom: 20 upx;
  }

  .btns {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  button {
    width: 100%;
    margin-top: 10 upx;
  }
</style>

<template xlang="wxml" minapp="mpvue">
  <view class="tki-qrcode">
    <!-- #ifndef MP-ALIPAY -->
    <canvas class="tki-qrcode-canvas" :canvas-id="cid" :style="{width:cpSize+'px',height:cpSize+'px'}" />
    <!-- #endif -->
    <!-- #ifdef MP-ALIPAY -->
    <canvas :id="cid" :width="cpSize" :height="cpSize" class="tki-qrcode-canvas" />
    <!-- #endif -->
    <image v-show="show" :src="result" :style="{width:cpSize+'px',height:cpSize+'px'}" />
  </view>
</template>

<script>
import QRCode from "./qrcode.js"
let qrcode
export default {
  name: "tki-qrcode",
  props: {
    cid: {
      type: String,
      default: 'tki-qrcode-canvas'
    },
    size: {
      type: Number,
      default: 200
    },
    unit: {
      type: String,
      default: 'upx'
    },
    show: {
      type: Boolean,
      default: true
    },
    val: {
      type: String,
      default: ''
    },
    background: {
      type: String,
      default: '#ffffff'
    },
    foreground: {
      type: String,
      default: '#000000'
    },
    pdground: {
      type: String,
      default: '#000000'
    },
    icon: {
      type: String,
      default: ''
    },
    iconSize: {
      type: Number,
      default: 40
    },
    lv: {
      type: Number,
      default: 3
    },
    onval: {
      type: Boolean,
      default: false
    },
    loadMake: {
      type: Boolean,
      default: false
    },
    usingComponents: {
      type: Boolean,
      default: true
    },
    showLoading: {
      type: Boolean,
      default: true
    },
    loadingText: {
      type: String,
      default: '二维码生成中'
    },
  },
  data() {
    return {
      result: '',
    }
  },
  methods: {
    _makeCode() {
      let that = this
      if (!this._empty(this.val)) {
        qrcode = new QRCode({
          context: that, // 上下文环境
          canvasId:that.cid, // canvas-id
          usingComponents: that.usingComponents, // 是否是自定义组件
          showLoading: that.showLoading, // 是否显示loading
          loadingText: that.loadingText, // loading文字
          text: that.val, // 生成内容
          size: that.cpSize, // 二维码大小
          background: that.background, // 背景色
          foreground: that.foreground, // 前景色
          pdground: that.pdground, // 定位角点颜色
          correctLevel: that.lv, // 容错级别
          image: that.icon, // 二维码图标
          imageSize: that.iconSize,// 二维码图标大小
          cbResult: function (res) { // 生成二维码的回调
            that._result(res)
          },
        });
      } else {
        uni.showToast({
          title: '二维码内容不能为空',
          icon: 'none',
          duration: 2000
        });
      }
    },
    _clearCode() {
      this._result('')
      qrcode.clear()
    },
    _saveCode() {
      let that = this;
      if (this.result != "") {
        uni.saveImageToPhotosAlbum({
          filePath: that.result,
          success: function () {
            uni.showToast({
              title: '二维码保存成功',
              icon: 'success',
              duration: 2000
            });
          }
        });
      }
    },
    _result(res) {
      this.result = res;
      this.$emit('result', res)
    },
    _empty(v) {
      let tp = typeof v,
        rt = false;
      if (tp == "number" && String(v) == "") {
        rt = true
      } else if (tp == "undefined") {
        rt = true
      } else if (tp == "object") {
        if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true
      } else if (tp == "string") {
        if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true
      } else if (tp == "function") {
        rt = false
      }
      return rt
    }
  },
  watch: {
    size: function (n, o) {
      if (n != o && !this._empty(n)) {
        this.cSize = n
        if (!this._empty(this.val)) {
          setTimeout(() => {
            this._makeCode()
          }, 100);
        }
      }
    },
    val: function (n, o) {
      if (this.onval) {
        if (n != o && !this._empty(n)) {
          setTimeout(() => {
            this._makeCode()
          }, 0);
        }
      }
    }
  },
  computed: {
    cpSize() {
      if(this.unit == "upx"){
        return uni.upx2px(this.size)
      }else{
        return this.size
      }
    }
  },
  mounted: function () {
    if (this.loadMake) {
      if (!this._empty(this.val)) {
        setTimeout(() => {
          this._makeCode()
        }, 0);
      }
    }
  },
}
</script>
<style>
.tki-qrcode {
  position: relative;
}
.tki-qrcode-canvas {
  position: fixed;
  top: -99999upx;
  left: -99999upx;
  z-index: -99999;
}
</style>