ant vue 二维码弹窗组件带复制功能

最新推荐文章于 2023-12-08 17:23:34 发布

m0_61199582

最新推荐文章于 2023-12-08 17:23:34 发布

阅读量275

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_61199582/article/details/128921077

版权

该文章展示了一个使用AntVue库创建的带有二维码生成和复制链接功能的弹窗组件。通过点击按钮，用户可以打开一个弹窗，其中包含二维码和一个复制链接的选项。利用qrcodejs2库生成二维码，并通过JavaScript实现链接的复制功能。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <!-- show -->
    <!-- type="primary" -->
    <a-button @click="setQRCode({})"  icon="qrcode"></a-button>
    <a-modal
      :title="title"
      :width="800"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭"
      wrapClassName="ant-modal-cust-warp"
      style="top: 5%; height: 85%; overflow-y: hidden"
    >
      <center class="qrcodeBox">
        <div>标题内容</div>
        <div class="qrcode" ref="qrCodeUrl"></div>
        <div>
          <a @click="copyUrl(qrcodeArrUrl[0])" style="color: rgba(27, 108, 232, 100)"> 复制链接</a>
        </div>
      </center>
    </a-modal>
  </div>
</template>

ant vue 二维码弹窗组件带复制功能


<script>
import QRCode from 'qrcodejs2'
import lodash from 'lodash'

export default {
  name: 'RoleModal',
  data() {
    return {
      title: '操作',
      model: {},
      confirmLoading: false,
      visible: false,
      qrcodeArr: [],
      // 复制url 地址存的位置
      qrcodeArrUrl: [],
      recData: {},
      qrCodeUrlText: 'http://baidu.com/'
    }
  },

  methods: {
    setQRCode(rec) {
      this.visible = true
      this.creatQrCodeAwait(rec)
    },

    creatQrCodeAwait: lodash.debounce(function(rec) {
      this.creatQrCode(rec)
      // console.log('屏幕宽度防抖' + this.key)
    }, 250),
    creatQrCode(rec) {
      this.qrcodeArrUrl = [
        // this.qrCodeUrlText + 'apply?meetid=' + rec.id,
        this.qrCodeUrlText + 'question'
      ]

      this.qrcodeArr[0] = new QRCode(this.$refs.qrCodeUrl, {
        text: this.qrCodeUrlText + 'question', // 一问一答
        width: 132,
        height: 132,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    copy() {
      document.execCommand('Copy') // 执行浏览器复制命令
      this.$message.success('复制成功')
    },
    copyUrl(item) {
      // 模拟 输入框
      let cInput = document.createElement('input')
      cInput.value = item
      document.body.appendChild(cInput)
      cInput.select() // 选取文本框内容
      // 执行浏览器复制命令
      // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签）
      // Input要在正常的编辑状态下原生复制方法才会生效
      document.execCommand('copy') // 执行浏览器复制命令
      this.$message.success('复制成功')
      // 复制成功后再将构造的标签 移除
      document.body.removeChild(cInput)
    },
    close() {
      this.$refs.form.clearValidate()
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      this.$emit('ok')
      this.handleCancel()
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

<style scoped>