vue前端生成二维码图片插件--qrcodejs2
扫描结果:安装:npm install qrcodejs2 --save页面使用:import QRCode from "qrcodejs2"; // 引入qrcode<el-button size="mini" class="green-btn" style="width:90px" @click="qrCode">生成二维码</el-but...
·
扫描结果:
安装:
npm install qrcodejs2 --save
页面使用:
import QRCode from "qrcodejs2"; // 引入qrcode
<el-button size="mini" class="green-btn" style="width:90px" @click="qrCode">生成二维码</el-button>
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
<div id="qrcode"></div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
qrCode() {
this.dialogVisible = true;
this.$nextTick(function() {
document.getElementById("qrcode").innerHTML = "";
let qrcode = new QRCode("qrcode", {
width: 132,
height: 132,
text: "此处为二维码的内容", // 二维码内容 也可以放url
colorDark: "#000",
colorLight: "#fff"
});
});
添加白边样式:
#qrcode {
display: inline-block;
img {
width: 132px;
height: 132px;
background-color: #fff; //设置白色背景色
padding: 6px; // 利用padding的特性,挤出白边
}
}
缺点:text字段如果内容过多将会无法识别
更多推荐
已为社区贡献12条内容
所有评论(0)