Vue はリンクを QR コードに変換します

1.qrcodeをインストール

cnpm install --save qrcodejs2

2. プロジェクトにインポート

「qrcodejs2」からQRコードをインポート

3. ページ内での使用

<el-dialog :title="查看二维码" :visible.sync="addDialogVisible" @close="closeDialog">
<div id="qrcode" ref="qrcode"></div>
</el-dialog>
<script>
import QRCode from 'qrcodejs2'
export default{
    data(){
      return {
        addDialogVisible: false,
        url: 'https://first-1300696665.cos.ap- 
              nanjing.myqcloud.com/commons/a3cdd0a4680f4e54856ad0eb247df3cf.jpg'
      }
    }
    methods:{
       openDialog() {
          this.addDialogVisible = true
          this.$nextTick(() => {
             this.qrcodeGenerate()
          })
       },
       qrcode() {
          let qrcode = new QRCode('qrcode', {
             width: 200, // 设置宽度，单位像素
             height: 200, // 设置高度，单位像素
             text: this.url // 设置二维码内容或跳转地址
          })
       },
       // 关闭对话框时一定要清空二维码，否则下次打开对话框就会多一个
       closeDialog() {
　　　　   document.getElementById('qrcode').innerHTML = "";　　
　　   }
    }
}
</script>

予防：

   エラーが報告された場合: null のプロパティ 'appendChild' を読み取れません

   理由分析: div はまだ生成されていません。div を取得しました

   回避策: this.$nextTick() メソッドを使用して、次の DOM 更新サイクルが終了した後に遅延コールバックを実行します。