![](https://i-blog.csdnimg.cn/blog_migrate/0dae1643258f1f355f502193c677a25e.png)
2. 安装qrcode:npm install --save qrcode
3. 在组件中使用
//组件中使用MessageBox、生成二维码
<template>
<div>
<el-button @click="open">微信支付</el-button>
</div>
</template>
<script>
import QRCode from 'qrcode'
export default {
methods:{
async open() { //弹出框MessageBox
// 生成二维码(地址)
let url = await QRCode.toDataURL(this.payInfo.codeUrl)
// console.log(url)
this.$alert(<img src={url} />, '请你微信支付', {
//中间布局
center: true,
//显示取消按钮
showCancelButton:true,
//取消按钮文本内容
cancelButtonText:"支付遇见问题",
// 确定按钮的文本内容
confirmButtonText:"已支付成功",
//是否显示右上角关闭按钮
showClose:false,
callback: action => {
this.$message({
type: 'info',
message: `action: ${ action }`,
});
}
}
}
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/b3c5909b66e22eea61ad1e85bac7f151.png)