使用vue-qr生成漂亮的二维码

简介: 使用vue-qr生成漂亮的二维码

安装

npm install vue-qr --save

导入

// vue2.0
import VueQr from 'vue-qr'

...
{
  components: {VueQr}
}

用法

<vue-qr 
    :correctLevel="3" 
    :autoColor="false" 
    colorDark="#313a90" 
    :logoSrc="logoSrc" 
    :text="codeUrl" 
    :size="240" 
    :margin="0" 
    :logoMargin="3">
</vue-qr>
import VueQr from 'vue-qr'
export default {
  data () {
    return {
      logoSrc: require('../assets/weixin-head.jpg'),
      codeUrl: 'https://www.toutiao.com/article/7100763829256307215/'
    }
  },
  components: {
    VueQr
  }
}
参数 说明 是否必需
text 二维码内容 必需
autoColor 若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true 可选
colorDark 实点的颜色 可选
colorLight 空白区的颜色 可选
logoSrc 嵌入至二维码中心的 LOGO 地址 可选
size 尺寸, 长宽一致, 包含外边距 必需
margin 二维码图像的外边距, 默认 20px 可选
logoMargin 标识周围的空白边框, 默认为0 可选
correctLevel 容错级别 0-3 可选

更多配置项请参考官方文档

目录
相关文章
|
5月前
Vue3二维码(QRCode)
这是一个可高度定制的二维码生成组件,支持在线预览。提供了丰富的属性设置,包括扫描文本、二维码大小、颜色、背景色、边框、边框颜色、像素比例及纠错等级等。安装简单,通过 `pnpm` 引入插件,创建 `QRCode.vue` 组件即可使用。适用于多种应用场景,如生成不同样式的二维码、动态调整大小和内容等。
382 6
Vue3二维码(QRCode)
|
8月前
|
JavaScript 前端开发
Vue生成Canvas二维码
Vue生成Canvas二维码
50 0
|
6月前
|
JavaScript
vue 下载页面中的图片,如二维码
vue 下载页面中的图片,如二维码
82 1
|
JavaScript 前端开发
vue3 保存二维码
vue3 保存二维码
238 0
|
8月前
|
前端开发
jquery.qrcode如何切换新的二维码
jquery.qrcode如何切换新的二维码
38 0
|
8月前
|
JavaScript
vue 生成二维码:vue-qr插件
vue 生成二维码:vue-qr插件
663 0
|
8月前
|
JavaScript
js生成二维码和解析二维码
js生成二维码和解析二维码
120 0
|
JavaScript 前端开发 编译器
Vue生成二维码
实现输入内容后点击回车或生成按钮,生成二维码,扫描后是我们在输入框的值.
75 0
Vue生成二维码
|
资源调度 JavaScript
vue:生成二维码 qrcode、vue-qr(二维码中间可带logo)
vue:生成二维码 qrcode、vue-qr(二维码中间可带logo)
2304 0