Vue一键复制文本（clipboard）

一键复制文本（clipboard）

1. 使用cilpboard实现一键复制文本

首先安装clipboard

npm install clipboard --save

引入

import clipboard from ‘clipboard’;

注册

Vue.prototype.clipboard = clipboard;

要复制的区域代码

<div class="tkl-content" id="copytkl">
  复制框内文字，打开【手机淘宝】即可领券购买。￥a1cxYcOA08￥
</div>

点击事件所在元素
设置操作类型以及要复制的目标元素

<div class="tkl-fuzhi" @click="copyLink" data-clipboard-action="copy"  data-clipboard-target="#copytkl">
  一键复制
</div>

js代码
new this.clipboard(".tkl-fuzhi");指的是事件所在元素，并非要复制的元素

copyLink() {
  let _this = this;
  let clipboard = new this.clipboard(".tkl-fuzhi");
  clipboard.on('success', function () {
    window.console.log('00')
  });
  clipboard.on('error', function () {
    _this.$toast("复制失败")
  });
}

2. clipboard.js 一键复制 官网

参考博客
在通过如下方式绑定元素来复制的时候，在Android上是没问题的，在IOS下多次复制会出现复制失败的现象

<!--复制淘口令弹框-->
  <div class="taolouling" ref="tkl">
    <div class="taokouling-center">
      <div class="tkl-top-title">
        复制淘口令购买
</div>
<div class="tkl-content" id="copytkl">
  复制框内整段文字，打开【手机淘宝】即可领券购买。{{item.code}}
</div>
<div class="tkl-fuzhi" @click="copyLink" data-clipboard-action="copy" data-clipboard-target="#copytkl">
    一键复制
</div>
</div>
<div class="tkl-cancel" @click="cancelFuzhi">
  <i class="iconfont icon-x"></i>
</div>
</div>

let _this = this;
let clipboard = new this.clipboard(".tkl-fuzhi");
clipboard.on('success', function () {
  if (_this.item.code.length > 0) {
    _this.$toast({
      message: `${_this.item.code}淘口令已复制，请打开【手机淘宝】领券购买`,
      duration: 1800
    });
  } else {
    _this.$toast({
      message: `请在【倍速课堂】APP首页倍速小店购买`,
      duration: 1800
    });
  }

  _this.$refs.tkl.style.display = 'none';
});
clipboard.on('error', function () {
  _this.$toast("复制失败")
});

做一下修改，复制的文本不在另一个组件上，直接从属性中复制

<!--复制淘口令弹框-->
        <div class="taolouling" ref="tkl">
            <div class="taokouling-center">
                <div class="tkl-top-title">
                    复制淘口令购买
                </div>
                <div class="tkl-content" id="copytkl">
                    复制框内整段文字，打开【手机淘宝】即可领券购买。{{item.code}}
                </div>
                <div class="tkl-fuzhi" @click="copyLink"  :data-clipboard-text="item.code">
                    一键复制
                </div>
            </div>
            <div class="tkl-cancel" @click="cancelFuzhi">
                <i class="iconfont icon-x"></i>
            </div>
        </div>