vue实现二维码生成(vue + vue-qr)

作者:神秘网友 发布时间:2020-09-05 22:53:59

vue实现二维码生成(vue + vue-qr)

vue实现二维码生成(vue + vue-qr)

https://www.npmjs.com/package/vue-qr

npm install vue-qr --save

// 二维码组件
import VueQr from 'vue-qr'

完整代码

<template>
  <div class="hello">
    <h1> 二维码</h1>
    <vue-qr ref="Qrcode" 
            :text="dataObj.text" 
            :logoSrc="dataObj.logo" 
            :callback="test" qid="testQrId"></vue-qr>
            
  </div>
</template>

<script>
// 二维码组件
import VueQr from 'vue-qr'

export default {
  name: 'HelloWorld',
  components: { VueQr },
  data () {
    return {
      dataObj: {
        text: 'https://blog.csdn.net/weixin_43760328/rss/list',
        logo: require('../assets/logo.png')
      }
    }
  },
  methods: {
    test(dataUrl, id) {
        console.log(dataUrl)
        console.log(id)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

结果:
vue实现二维码生成(vue + vue-qr)

代码:

<template>
  <div class="hello">
    <h1> 二维码</h1>
    <vue-qr ref="Qrcode" 
            :text="dataObj.text" 
            :logoSrc="dataObj.logo" 
            :callback="test" qid="testQrId"></vue-qr>
    <a :href="exportLink" 
       @click="downloadImg" 
       :download="downloadFilename">下载二维码</a>
  </div>
</template>

<script>
// 二维码组件
import VueQr from 'vue-qr'

export default {
  name: 'HelloWorld',
  components: { VueQr },
  data () {
    return {
      dataObj: {
        text: 'https://blog.csdn.net/weixin_43760328/rss/list',
        logo: require('../assets/logo.png')
      },
      exportLink: '',
      downloadFilename: ''
    }
  },
  methods: {
    test(dataUrl, id) {
        console.log(dataUrl)
        console.log(id)
    },
    // 下载二维码图片
    downloadImg () {
      let Qrcode = this.$refs.Qrcode
      this.exportLink = Qrcode.$el.currentSrc
      this.downloadFilename = '二维码'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

结果:
vue实现二维码生成(vue + vue-qr)

http://www.clipboardjs.cn/

  • 安装依赖

npm install clipboard --save

代码:

<template>
  <div class="hello">
    <h1> 二维码</h1>
    <vue-qr ref="Qrcode" 
            :text="dataObj.text" 
            :logoSrc="dataObj.logo" 
            :callback="test" qid="testQrId"></vue-qr>
    <button 
      class="tag-copy"
      :data-clipboard-text="dataObj.text"
      @click="copyShareLink">复制二维码</button>
    <a 
      :href="exportLink" 
      @click="downloadImg" 
      :download="downloadFilename">下载二维码</a>
  </div>
</template>

<script>
// 二维码组件
import VueQr from 'vue-qr'
// 复制粘贴组件
import Clipboard from 'clipboard'

export default {
  name: 'HelloWorld',
  components: { VueQr },
  data () {
    return {
      dataObj: {
        text: 'https://blog.csdn.net/weixin_43760328/rss/list',
        logo: require('../assets/logo.png')
      },
      exportLink: '',
      downloadFilename: ''
    }
  },
  methods: {
    test(dataUrl, id) {
        console.log(dataUrl)
        console.log(id)
    },
    // 复制链接
    async copyShareLink() {
      let clipboard = new Clipboard('.tag-copy')
      await clipboard.on('success', e => {
        alert('链接复制成功,请到微信打开!')
        clipboard.destroy() // 释放内存
      })
      clipboard.on('error', e => { 
        alert('该浏览器不支持自动复制!')  // 不支持复制  
        clipboard.destroy()  // 释放内存  
      })
    },
    // 下载二维码图片
    downloadImg () {
      let Qrcode = this.$refs.Qrcode
      this.exportLink = Qrcode.$el.currentSrc
      this.downloadFilename = '二维码'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

结果:
vue实现二维码生成(vue + vue-qr)

vue实现二维码生成(vue + vue-qr)相关教程

  1. Vue导出JSON文件,读取本地上传JSON文件
  2. Python实现设置终端显示颜色、粗体、下划线等效果
  3. springboot基于rabbitMQ削峰原理实现抢豆子小游戏
  4. 基于Mybatis分页插件PageHelper实现分页功能
  5. 解决vue项目不能局域网中用ip访问
  6. synchronized的实现原理——对象头解密
  7. 通过Verilog来实现全加器
  8. 在vue项目中引入阿里图标库