1. 点击事件
<div>
<van-icon name="cluster-o" @click="share" />
</div>
2. 显示二维码
<van-overlay :show="show" @click="show = false">
<div class="wrapper">
<div class="block">
<p>分享</p>
<div>
<img :src="imrUrl" />
</div>
</div>
</div>
</van-overlay>
3. js
//生成二维码需要下载一个qrcode插件
//官网地址:https://www.npmjs.com/package/qrcode
//下载插件 npm install --save qrcode
<script>
//引入qrcode插件
import QRCode from 'qrcode'
export default {
data() {
return {
show: false,
imrUrl: ""
}
},
methods: {
share() {
this.show = true;
let url = location.href;//获取当前地址栏的地址
console.log(url);
QRCode.toDataURL(url)
.then(tpian => {
console.log(tpian);
this.imrUrl = tpian;
})
.catch(err => {
console.error(err);
});
},
}
</script>
这样点击分享的小图标 就可以弹出一个二维码了