Vue頁面生成二維碼
阿新 • • 發佈:2021-06-26
給定一個網址,在頁面生成二維碼,手機掃碼後直接進入此網站。
1)安裝全域性的外掛
npm install qrcodejs2 -S
2)元件封裝
在component目錄下新建一個vue檔案,內容如下
<template>
<div>
<div id="qrcode"></div> <!-- 建立一個div,並設定id為qrcode -->
</div>
</template>
<script>
// 二維碼
import QRCode from 'qrcodejs2' // 引入qrcode
export default {
name: 'test',
mounted() {
this.qrcode();
},
props:{
width:{
type:Number,
default(){
return 132
}
},
height:{
type:Number,
default(){
return 132
}
},
// 二維碼地址
url:{
type:String,
default(){
return 'https://www.baidu.com'
}
}
},
methods: {
qrcode() {
let qrcode = new QRCode('qrcode', {
width: this.width,
height: this.height,
text: this.url,
colorDark: "#000",
colorLight: "#fff",
})
},
}
}
</script>
<style scoped>
#qrcode {
display: inline-block;
}
#qrcode img {
width: 132px;
height: 132px;
background-color: #fff;
padding: 6px;
}
</style>
3)使用元件
<template>
<div>
<div id="printMe">
<div class="code">
<p></p>
<qrcode :url="url"></qrcode>
<p>掃我去百度</p>
</div>
</div>
<button v-print="'#printMe'">列印</button>
</div>
</template>
<script>
import qrcode from '@/components/QrCode'
export default {
data() {
return {
url: 'http://www.baidu.com',
}
},
components: {
qrcode
},
}
</script>
<style scoped>
.code {
margin: 10px;
text-align: center;
width: 200px;
height: 220px;
border: 1px solid #000;
}
</style>
執行後,使用手機掃一掃就會跳轉到百度頁面。