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

最新推荐文章于 2024-03-04 22:51:45 发布

大湿骑码

最新推荐文章于 2024-03-04 22:51:45 发布

阅读量1.4k

点赞数

分类专栏： vue html js 文章标签： vue html 微信二维码

本文链接：https://blog.youkuaiyun.com/yqlnihao/article/details/121395307

版权

js 同时被 3 个专栏收录

31 篇文章

订阅专栏

vue

30 篇文章

订阅专栏

html

19 篇文章

订阅专栏

本文介绍如何使用Vue结合qrcodejs2插件生成二维码，并将其展示在ElementUI的模态框中。通过点击按钮触发二维码生成，设置其内容、尺寸及颜色等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//安装生成二维码插件
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
        })
      })
    },