vue中dialog组件中我这样写为什么这样渲染不出

难道是dialog在未显示状态,抓不到dom的问题吗?

//我拿到数据生成一个二维码
success: (res) => {
    let cxt = res
    let payCode
    if (cxt.status == 1) {
        payCode = cxt.data.code_url
        $('.qr_container').qrcode({
            render: "canvas",
            height: 264,
            width: 264,
            correctLevel: 0,
            text: payCode
        });
        setTimeout(() => {
            this.qrcode = true //dialog显示
        }, 300)
    } else {
        this.toast(cxt.detail)
    }
},



//这里不行
<el-dialog class="qrcode add-add" title="微信支付" :visible.sync="qrcode" width="370px" center>
    <div class="qr_container" style="margin:auto; position:relative;"></div>
</el-dialog>

//单独写在外面测试是可以的
<div class="qr_container" style="margin:auto; position:relative;height: 264PX;width: 264PX;border: 1px solid #000;"></div>
阅读 2.9k
3 个回答

是的,没显示dialog就是没有dom

先设置

 this.qrcode = true

再等窗口dom渲染后进行qrcode方法 生成二维码。

先显示弹框让其dom渲染,然后等待其渲染完成再生成qrcode插入

this.qrcode=true
this.$nextTick(()=>{
    // qrcode生成
})
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题