vue网页分享生成二维码微信扫一扫进行分享

//安装生成二维码插件
npm intsall qrcodejs2
//引入
import QRCode from 'qrcodejs2'

<img src="../../assets/img/weix.png" @click="shares" alt=""/>

 <el-dialog
      title="二维码"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <p class="erweima" ref="qrCodeUrls"></p>
      <p class="share">请打开微信扫一扫进入页面，点击右上角进行分享</p>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span> -->
</el-dialog>


vue点击按钮将网页生成二维码并放入elementui的模态框中
shares(){
      this.centerDialogVisible = true
      // this.message = 'http://test.glassy.top/'
      //console.log.log(this.message)
      $('.erweima').html('')
      this.$nextTick(()=>{
        var qrcodes = new QRCode(this.$refs.qrCodeUrls, {
            text: this.message, // 需要转换为二维码的内容
            width: 100,
            height: 100,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        })
      })
    },