vue 中使用 clipboard 插件实现复制功能，使用 qrcodejs2 插件生成二维码？

本文链接：https://blog.csdn.net/qq_44722915/article/details/119757246

前言：在日常项目开发中，会碰到把一段文本或是代码进行按钮点击复制的需求。在 vue 中考虑使用 clipboard （剪切板插件）去实现。动态生成二维码则考虑使用 qrcodejs2 （二维码插件）去实现。下面对其用法做一个示例总结。

clipboard 插件实现复制功能

安装依赖

npm i clipboard -S
// 或者
cnpm i clipboard -S

copy 函数

copy() {
  let clipboard = new Clipboard('.link')
  clipboard.on('success', e => {
   console.log('复制成功')
   clipboard.destroy() // 释放内存
  })
  clipboard.on('error', e => {
    console.log('该浏览器不支持自动复制')
    clipboard.destroy() // 释放内存
  })
}

按钮函数绑定

 <button class="link" :data-clipboard-text="url" @click="copy()"></button>

组件内使用示例（结合 element-ui）

<template>
  <div class="container">
    <div class="header">
      <p>
        <el-tooltip class="item" effect="dark" :content="url" placement="top-start">
            <span>{{url}}</span>
        </el-tooltip>
      </p>
      <el-button type="primary" size="small" :data-clipboard-text="url" @click="copy()" class="link" icon="el-icon-copy-document"></el-button>
    </div>
    <el-input type="textarea" resize="none" :rows="6.5" placeholder="Please enter content" v-model="textarea"></el-input>
  </div>
</template>

<script>
// 引入 clipboard 插件
import Clipboard from 'clipboard';
export default {
  name: 'Clipboard',
  data() {
    return {
      url: 'https://blog.csdn.net/qq_44722915/article/details/119611359',
      textarea: ''
    }
  },
  methods: {
    copy() {
      let clipboard = new Clipboard('.link')
      clipboard.on('success', e => {
        e
        this.$message({
          message: "复制成功",
          type: "success"
        })
        clipboard.destroy() // 释放内存
      })
      clipboard.on('error', e => {
        e
        this.$message.error('该浏览器不支持自动复制')
        clipboard.destroy() // 释放内存
      })
    }
  }
}
</script>

<style lang="css" scoped>
.container {
  width: 380px;
  height: 200px;
  border: 1px solid #dcdfe6;
  margin: 0 auto;
  padding: 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
p {
  margin-right: 20px;
  height: 30px;
  line-height: 30px;
  width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #909399;
  cursor: pointer;
}
/deep/ .el-button {
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
}
/deep/ .el-textarea {
  margin-top: 20px;
}
</style>

【完整示例查看：https://gitee.com/wu241617/vue-clipboard】

qrcodejs2 插件动态生成二维码

安装依赖

npm i qrcodejs2 -S
// 或者
cnpm i qrcodejs2 -S

核心代码

<template>
  <div ref="qrcodeContainer"></div>
</template>
   
<script>
import QRCode from 'qrcodejs2'  // 引入qrcode
export default {
  name: 'qrcodejs2',
  mounted() {
    this.$nextTick(() => {
      this.showQRCode()
    })
  },
  methods: {
    showQRCode() {
      new QRCode(this.$refs.qrcodeContainer, {
        width: 200,
        height: 200,
        text: 'https://mp.csdn.net/mp_blog/creation/editor/119757246'
      })
    }
  }
}
</script>

组件内使用示例（结合 element-ui）

<template>
  <div>
    <el-card>
      <el-input placeholder="请输入链接地址" v-model="input"></el-input>
      <el-button @click="showQRCode" type="primary" size="small" :disabled="isDisabled">生成二维码</el-button>
      <el-button @click="delQRCode" type="primary" size="small" :disabled="!isDisabled">删除二维码</el-button>
      <div class="qrcode" ref="qrcodeContainer"></div>
    </el-card>
  </div>
</template>
   
<script>
import QRCode from 'qrcodejs2'  // 引入qrcode
export default {
  name: 'qrcodejs2',
  data() {
    return {
      input: '',
      isDisabled: false
    }
  },
  methods: {
    showQRCode() {
      if (this.input !== '') {
        new QRCode(this.$refs.qrcodeContainer, {
          width: 200,
          height: 200,
          text: this.input, // 二维码地址
          colorDark: "#000",
          colorLight: "#fff",
          correctLevel: QRCode.CorrectLevel.H
        })
        this.$message({
          message: '二维码已生成！',
          type: 'success'
        })
        this.isDisabled = true
      } else {
        this.$message({
          message: '请输入链接地址!',
          type: 'warning'
        })
      }
    },
    delQRCode() {
      this.$refs.qrcodeContainer.innerHTML = ''
      this.$refs.qrcodeContainer.title = ''
      this.$message({
        message: '二维码已删除！',
        type: 'success'
      })
      this.input = ''
      this.isDisabled = false
    }
  }
}
</script>
<style lang='css' scoped>
/deep/ .el-card {
  width: 500px;
  height: 300px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
/deep/ .el-input {
  width: 245px;
  height: 35px;
  margin-right: 20px;
}
/deep/ .el-input__inner {
  height: 35px;
}
.qrcode {
  width: 250px;
  height: 250px;
  margin-top: 20px;
  margin-left: 120px;
}
img {
  width: 250px;
  height: 250px;
  background-color: #fff;
  padding: 6px;
}
</style>

【完整示例代码：https://gitee.com/wu241617/vue-qrcodejs2】