js实现复制到粘贴板方法

js + clipboard 插件实现复制到粘贴板方法-兼容pc及移动端（ios/安卓）

HTML:

  <div id="content">复制改内容到粘贴板</div>
  <button id="btn" data-clipboard-target="#content" data-clipboard-action="copy">点击</button>
  <script src="clipboard.js"></script>

JS:

• 首先判断终端为pc还是手机，手机端判断为安卓手机还是iPhone手机。因为pc端两种方法都有兼容，所以此处只考虑是否为安卓手机即可。

var browser={
  versions:function(){
    var u = navigator.userAgent, app = navigator.appVersion;
    return {
      trident: u.indexOf('Trident') > -1, //IE内核
      presto: u.indexOf('Presto') > -1, //opera内核
      webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
      gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
      mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
      ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
      android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
      iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
      iPad: u.indexOf('iPad') > -1, //是否iPad
      webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
      weixin: u.indexOf('MicroMessenger') > -1, //是否微信 
      qq: u.match(/\sQQ/i) == " qq", //是否QQ
    };
  }()
}

• 若不是安卓手机则首先引入clipboard.js;
  可以通过npm方式安装:npm install clipboard —save
  或者直接参照clipboard官网
• 安卓手机的复制方法（封装的函数）

function copyVal(val) {
    var oInput = document.createElement("input");
    oInput.type = "text";
    oInput.value = val;
    document.body.appendChild(oInput);
    oInput.select(); // 选择对象
    document.execCommand("Copy"); // 执行浏览器复制命令
    oInput.parentNode.removeChild(oInput); //执行完之后删除该对象
    alert("复制成功");
}

• 如果终端为安卓手机则执行下面的方法

if (browser.versions.android) {
    $("#btn").on("click", function() {
        copyVal($("#content").html());
    });
}else{
    //否则不是安卓手机，执行下面的方法
    var clipboard = new Clipboard("#btn");
    clipboard.on("success", function(element) { //复制成功的回调
        alert("复制成功");
    });
    clipboard.on("error", function(element) { //复制失败的回调
        console.info("error");
    })
}

Vue 复制方法

引用了 vue-clipboard2

1.先下载

npm install --save vue-clipboard2

2.引入到项目中

import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

3.运用到单页面中
例1：行内应用

<template>
  <button type="button"
    v-clipboard:copy="text"
    v-clipboard:success="onCopy"
    v-clipboard:error="onError">复制</button>
</template>

<script>
export default{
  data() {
    return {
      text: '复制文案'
    }
  },
  methods: {
    onCopy(e) {
      alert('复制成功')
    },
    onError(e) {
      alert('无法复制')
    }
  }
}
</script>

例2：promise

<template>
  <button type="button"
    @click="doCopy">复制</button>
</template>
<script>
export default{
  data() {
    return {
      text: '复制文案'
    }
  },
  methods: {
    doCopy() {
      this.$copyText(this.text).then(e=>{
        alert('复制成功')
        console.log(e)
      }, e=>{
        alert('无法复制')
        console.log(e)
      })
    }
  }
}
</script>

我的个人博客,有空来坐坐