vue中实现dialog显示二维码

安装qrcode

cnpm install qrcodejs2

在main.js全局引用

import QRCode from 'qrcodejs2'
Vue.prototype.$QRCode = function()
{
  let qrcode = new QRCode('qrcode', {
    width: 232,  // 设置宽度
    height: 232, // 设置高度
    text: ‘12345’,
  });
};

页面调用

<div id="qrcode"></div>
this.qrcode = this.$QRCode()

案例分析
本人案例是在用户的信息表格末尾添加一个生成二维码的按钮，可以把本行内容全部显示成二维码，按钮会调用一个dialog，用于显示二维码。由于dialog加载过程会耗费一定时间，因此在dialog中直接调用会导致第一次打开的dialog无法加载二维码，之后加载才正常，经过研究dialog属性之后对dialog属性增加一个修改就实现完美加载。调用示例如下：

表格按钮

<el-table-column prop="action" label="操作" header-align="center" width="100">
	<template slot-scope="scope">
    	<el-button @click="ShowQRCodeDialog(scope.$index,scope.row)" type="text" size="small">生成二维码</el-button>
 	 </template>
</el-table-column>

dialog属性此处一定要添加 @opened=“ShowQRCode()”，opended是dialog动画打开完毕时候的回调，当页面加载完毕时才会加载ShowQRCode(),可以解决因dialog加载延时导致的二维码不显示问题。不过二维码显示会有一点点延时，半秒以内，不影响应用。

<el-dialog title="二维码展示" center :visible.sync="DialogShowQRCode" width="300px" height="300px" @opened="ShowQRCode()">
  <div class="qrcode">
    <div id="qrcode"></div>
  </div>
</el-dialog>

获取本行信息并且打开dialog，index是表格行数，row存表格字段信息

ShowQRCodeDialog(index,row)
{
   this.qrCode = row
   this.DialogShowQRCode = true
   document.getElementById("qrcode").innerHTML = "";
},

调用二维码生成函数

ShowQRCode()
{
 document.getElementById("qrcode").innerHTML = "";
 this.qrcode = this.$QRCode()
}

拓展
vue还有一个directives属性可以实现页面打开时的自动点击事件，最开始我的想法是dialog加载完毕自动点击按钮执行二维码生成，不过也存在缺点，仅供参考。

directives:
{
  trigger:
  {
    update(el,binding)
    {
      el.click()
    }
  }
},

页面调用
<el-button type="text" @click='ShowQRCode()' v-trigger style="margin-left:80px">二维码展示</el-button>
每次页面打开时会自动执行ShowQRCode()函数，关于钩子函数update的说明如下：
bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。 update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次， 指令与元素解绑时调用。
我使用的inserted和update，但是无法解决第一次加载dialog时无法显示二维码的问题。不过在一些需要用到自动点击命令时还有有帮助的。