vue中使用qrcodejs2生成二维码
npm地址https://www.npmjs.com/package/qrcodejs2安装npm install qrcodejs2 --save官方给的文档非常简洁,所以用起来很简单看单文件中的写法,基本一致。<template><div><div id="qrcodeImg"></div>...
·
npm地址 https://www.npmjs.com/package/qrcodejs2
安装
npm install qrcodejs2 --save
官方给的文档非常简洁,所以用起来很简单
看单文件中的写法,基本一致。
<template>
<div>
<div id="qrcodeImg"></div>
<!-- 创建一个div,并设置id -->
</div>
</template>
<script>
import QRCode from 'qrcodejs2'; // 引入qrcode
export default {
name: 'qrcode-img',
components: {},
props: {
qrcontent: {
type: String
},
width: {
type: String
},
height: {
type: String
}
},
data() {
return {};
},
mounted() {
this.qrcode();
},
methods: {
qrcode() {
new QRCode('qrcodeImg', {
width: this.width,
height: this.height,
text: this.qrcontent, // 二维码地址
colorDark: '#000',
colorLight: '#fff'
});
// 下边css自定义就行了。。。我这主要因为别的原因才改动的
}
}
};
</script>
<style lang="scss" scoped>
#qrcodeImg {
box-sizing: border-box;
display: inline-block;
padding: 8px;
background: #cccccc;
& > img {
display: inline-block !important;
}
}
</style>
搞定!完结
更多推荐
已为社区贡献25条内容
所有评论(0)