示例效果如下
示例代码如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>输入文字转二维码</title>
<style>
#app>div {
text-align: center;
}
</style>
</head>
<body>
<div id="app" style="padding:30px;">
<div style="font-size:30px;color:#999;">输入文字转二维码</div>
<div style="padding:30px 0;">
<textarea @keyup="update" v-model="word" style="width:100%;font-size:30px;"></textarea>
</div>
<div id="qrcode"></div>
</div>
</body>
<script src="//cdn.jsdelivr.net/npm/qrcanvas@3"></script>
<script src="//static.class4ever.com/vuejs/v2.6.10/vue.min.js"></script>
<script>
const app = new Vue({
data: {
word: 'I love you.'
},
methods: {
//更新二维码
update: function () {
let obj = document.getElementById('qrcode')
let canvas = qrcanvas.qrcanvas({ data: this.word })
obj.innerHTML = ''
if (this.word) obj.appendChild(canvas);
}
},
//启动运行
mounted: function () {
this.update()
}
}).$mount('#app')
</script>
</html>