vue-qr生成下载二维码

1

安装vue-qr

npm install vue-qr --save

生成二维码实列


<vue-qr  ref="Qrcode" 
    :text="qrCodeConfig.text" 
    :download="downloadFilename" 
    :margin="10" 
    :size="200" 
    :dotScale="qrCodeConfig.dotScale" 
    :colorDark="qrCodeConfig.colorDark"
>
</vue-qr>
data(){
    return {
        qrCodeConfig: {
            text: 'http://121.40.121.142:8080/register?parent_id='+id,
            dotScale: 0.9,
            colorDark: '#663300'
        },
        downloadFilename:''
    }
}

属性介绍


属性 描述 举列
text 要生成二维码的内容 https://segmentfault.com/write
size 设置二维码大小,宽高相等 200
margin 二维码与边框的距离,可以设置白边 20
colorDark 实点的颜色 #333
colorLight 空白区的颜色 #999
bgSrc 欲嵌入的背景图地址 https://www.vipbic.com/**.jpg
gifBgSrc 欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能 200
backgroundColor 背景色 #666
backgroundDimming 叠加在背景图上的颜色, 在解码有难度的时有一定帮助 #444
logoSrc 中央图片或logo的路径 https://www.vipbic.com/**.jpg
logoMargin LOGO 标识周围的空白边框 1
logoBackgroundColor Logo 背景色,需要设置 logo margin #888
logoCornerRadius LOGO 标识及其边框的圆角半径 3

下载二维码


downloadImg () {
      const iconUrl = this.$refs.Qrcode.$el.src
      let a = document.createElement('a')
      let event = new MouseEvent('click')
      a.download = '二维码'
      a.href = iconUrl
      a.dispatchEvent(event)
}

最终效果


clipboard.png

最终代码


<template>
  <div class="full-screen-btn-con">
    <Button type="warning" @click="showImage">获取二维码</Button>
    <Modal
        v-model="modal"
        title="经济人二维码"
        >
        <div class="code-img">
          <vue-qr  ref="Qrcode" :text="qrCodeConfig.text" :download="downloadFilename" :margin="10" :size="200" :dotScale="qrCodeConfig.dotScale" :colorDark="qrCodeConfig.colorDark"></vue-qr>
        </div>
        <div slot="footer">
          <Button type="primary" @click="downloadImg">下载二维码</Button>
          <Button type="primary" @click="modal = !modal">关闭</Button>
        </div>
    </Modal>
  </div>
</template>

<script>
import VueQr from 'vue-qr'
export default {
  name: 'Fullscreen',
  components: {
    VueQr
  },
  data(){
    let id = this.$store.state.user.userId;
    return {
      modal : false,
      qrCodeConfig: {
        text: 'http://121.40.122.152:8080/register?parent_id='+id,
        dotScale: 0.9,
        colorDark: '#663300'
      },
      downloadFilename:''
    }
  },
  methods: {
    showImage (sid, key, index) {
        this.modal = true
    },
    downloadImg () {
          const iconUrl = this.$refs.Qrcode.$el.src
          let a = document.createElement('a')
          let event = new MouseEvent('click')
          a.download = '二维码'
          a.href = iconUrl
          a.dispatchEvent(event)
    }
  },
  mounted () {
    
  }
}
</script>

<style lang="less" scoped>
  .code-img{
    text-align: center;
  }
</style>

如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

载入中...