vue小工具之二维码生成(QRcode.js)
Talk is cheap,Give you the code.
<template>
<div class="qrCode">
<div class="leftinput">
<el-input
type="textarea"
v-model="text"
maxlength="600"
show-word-limit
placeholder="请输入内容"
@input="textChange"
/>
</div>
<div class="rightshow">
<div class="qrcodeimg" v-if="img">
<img :src="img" alt="" :style="imageStyle" />
<p>用手机扫一扫,了解更多信息</p>
</div>
</div>
</div>
</template>
<script>
import QRCode from 'qrcode';
export default {
data() {
return {
text: '',
img: '',
};
},
computed: {
imageStyle() {
let h = 240;
let w = 240;
let l = this.text.length;
h += l;
w += l;
if (h > 877) {
h = w = 877;
}
return {
height: `${h}px`,
width: `${w}px`,
};
},
},
methods: {
textChange() {
QRCode.toDataURL(this.text)
.then((url) => {
this.img = url;
})
.catch((err) => {
this.img = '';
// this.$message.error(err);
});
},
},
};
</script>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
}
/deep/ .el-textarea {
height: 100%;
textarea {
height: 100%;
min-height: unset !important;
}
}
.qrCode {
display: flex;
height: 100%;
padding: 20px;
.leftinput {
width: 400px;
background: #ffffff;
border: 1px solid #d9d9d9;
opacity: 1;
border-radius: 3px;
height: 100%;
}
.rightshow {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
.qrcodeimg {
img {
width: 240px;
height: 240px;
transition: all 300ms ease-in-out;
}
p {
font-size: 18px;
font-weight: 500;
line-height: 32px;
color: #334266;
text-align: center;
}
}
}
}
</style>