1.0.1 • Published 6 years ago

@njshaoshao/vue-logo-qrcode v1.0.1

Weekly downloads
3
License
MIT
Repository
github
Last release
6 years ago

vue-logo-qrcode

  • 一个用于生成带 logo 的 二维码的 vue 组件
  • 基于 qr-code-with-logo 封装
  • 提供了几个主要的方法封装,如果不能满足定制需求,可以直接使用qr-code-with-logo参考本插件代码进行自己封装
  • 后期会加入全参数定制,以及示例页面

安装

npm install @njshaoshao/vue-logo-qrcode

使用示例

<template>
    <div id="app">
        <vueLogoQrcode ref="qrcode"
                       :content="content"
                       :width="width"
                       :autoGen="true"
                       @click.native="downloadImage"></vueLogoQrcode>
    </div>
</template>

<script>
import vueLogoQrcode from '@njshaoshao/vue-logo-qrcode';
export default {
    name: 'app',
    components: { vueLogoQrcode },
    data() {
        return {
            content: "shaojiasong",
            width: 200
        }
    },
    methods: {
        downloadImage() {
            this.$refs.qrcode.genQrCodeImageDownload();
        }
    }
}
</script>

<style lang="scss">
</style>

参数介绍

参数说明默认值
content二维码内容''
width二维码图片大小100
logoSrclogo url (跨域会有问题)一个vue的logo
logoRadiuslogo 的圆角8
autoGen是否监听 参数变化false
showImmediately是否立即显示true
modeimage/canvas 选择image

方法介绍

方法名说明
genQrCode生成二维码
genQrCodeImageDownload下载二维码图片

开发进度

  • 基础功能
  • 高级定制
  • 示例代码
  • 在线demo

本地运行(fork下来自己玩)

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build
1.0.1

6 years ago

1.0.0

6 years ago