vue 移动端开发实现点击复制的功能

前言

使用开源项目 clipboard.js， 官网：https://clipboardjs.com/

这个插件复制的对象必须是input 或者 textarea 里面的值。所以说你要是想复制p标签或者其他文本
必须先设置一个input或者textarea作为中间过渡。html中写一个textarea标签，样式设置： opacity:0;
z-index=-1;这样就可使隐藏这个没用的容器。

使用步骤

1.下包

1.下包：可以通过npm安装，npm install clipboard.js --save-dev。

2.导包

代码如下（示例）：

import Clipboard from 'clipboard'

3.代码

html代码：

 <div class="code-box">
      <p class="code-num" id="codeNum">AE86123456</p>
      <textarea id="input"></textarea>
      <p class="code-btn copy" @click="copy" id="codeBtn" data-clipboard-target="#input">复制邀请码</p>
    </div>

js代码：

 copy () {
      var clipboard = new Clipboard('.btn')
      // let e = document.getElementById('codeNum').innerText
      let t = document.getElementById('input')
      t.value = this.code
      clipboard.on('success', e => {
        console.log('复制成功', e)
        this.$toast.success({
          message: '复制成功'
        })
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        this.$toast.fail({
          message: '手机权限不支持复制功能'
        })
        console.log('该浏览器不支持自动复制')
        // 释放内存
        clipboard.destroy()
      })
    }

完整代码：复制即可用

<template>
  <div class="myTicket">
    <div class="content">
      <div class="title">
        <span>任务名称</span>
        <span>任务状态</span>
        <span>奖品</span>
      </div>
      <div class="list">
        <van-row class="list-item">
          <van-col span="8">
            报名课程
          </van-col>
          <van-col span="8">已完成</van-col>
          <van-col span="8"
            >5元券
            <van-button
              class="btn"
              :color="colorObj[0]"
              type="info"
              round
              size="mini"
              >{{ isGetObj[0] }}</van-button
            >
          </van-col>
        </van-row>
        <van-row class="list-item" v-for="(item, index) in 9" :key="index">
          <van-col span="8">
            第一课
          </van-col>
          <van-col span="8">已完成</van-col>
          <van-col span="8"
            >5元券
            <van-button
              class="btn"
              :color="colorObj[1]"
              type="info"
              round
              size="mini"
              @click="getCode"
              >{{ isGetObj[1] }}</van-button
            >
          </van-col>
        </van-row>
      </div>
    </div>
    <!-- 券码弹窗 -->
    <van-popup
      round
      v-model="showCode"
      closeable
      v-if="showCode"
      :visible.sync="showCode"
    >
      <div class="ticket">
        <div class="title" id="codeNum">券码：{{ code }}</div>
        <textarea id="input">123</textarea>
        <div
          @click="copy"
          class="btn"
          id="codeBtn"
          :style="{ 'background-color': color }"
          data-clipboard-target="#input"
        >
          {{ txt }}
        </div>
        <div class="tips">温馨提示： 进入小程序输入券码使用</div>
      </div>
    </van-popup>
  </div>
</template>

<script src="@/js/clipboard.min.js"></script>
<script>
import Clipboard from 'clipboard'
export default {
  watch: {
    //对弹窗进行初始化
    showCode () {
      this.txt = '复制'
      this.color = '#269dfc'
    }
  },
  data () {
    return {
      showCode: false,
      code: '341fsadfhjkhsj',
      txt: '复制',
      color: '#269dfc',
      colorObj: { 0: '#aedcff', 1: '#269dfc' },
      isGetObj: { 0: '已领取', 1: '未领取', 2: '未完成' }
    }
  },
  created() {
    window.console.log(123);
  },
  methods: {
    getCode () {
      this.showCode = true
    },
    copy () {
      var clipboard = new Clipboard('.btn')
      let t = document.getElementById('input')
      t.value = this.code
      clipboard.on('success', e => {
        console.log('复制成功', e)
        this.$toast.success({
          message: '复制成功'
        })
        this.txt = '已复制'
        this.color = '#707171'
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        this.$toast.fail({
          message: '手机权限不支持复制功能'
        })
        console.log('该浏览器不支持自动复制')
        // 释放内存
        clipboard.destroy()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.myTicket {
  textarea {
    opacity: 0;
    z-index: -1;
    width: 0;
    height: 0;
  }
  height: 667px;
  background-image: url('../assets/我的券.png');
  background-size: contain;
  overflow: hidden;
  .content {
    width: 340px;
    height: 416px;
    margin: 222px auto;
    border-radius: 12px;
    background-color: #fff;
    padding: 30px 0;
    overflow-y: auto;
    .title {
      display: flex;
      justify-content: center;
      font-weight: 700;
      font-size: 16px;
      color: #3d3d3d;
      text-align: center;
      margin-bottom: 32px;
      span {
        flex: 1;
      }
    }
    .list {
      text-align: center;
      font-size: 14px;
      color: #6a6a6a;
      .btn {
        margin-top: 4px;
        padding: 0px 13px;
        font-size: 12px;
      }
      .list-item {
        margin-top: 20px;
      }
    }
  }
  .ticket {
    height: 180px;
    width: 340px;
    background-color: #fff;
    text-align: center;
    .title {
      font-size: 20px;
      color: #696969;
      margin-top: 40px;
    }
    .btn {
      width: 100px;
      height: 40px;
      line-height: 40px;
      margin: auto;
      font-size: 20px;
      color: #fff;
      border-radius: 5px;
    }
    .tips {
      font-size: 11px;
      color: #696969;
      margin-top: 31px;
    }
  }
}
</style>

---