二维码生成 --- qrcode

velpro_!

已于 2023-09-09 17:02:42 修改

阅读量69

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-06-17 00:59:53 首次发布

本文链接：https://blog.csdn.net/weixin_52053631/article/details/131254993

版权

1. 在npm中搜索qrcode：npmjs.com/package/qrcode

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 }`,
                    });
                }
            }
        }
   }
}