vue一键复制到剪切板 兼容主流浏览器

 方法一：vue-clipboard2

vue-clipboard2是前端能够调用剪切板的一个插件。具体的描述官网上也有具体的说明，

官网：vue-clipboard2 | A simple vue2 binding to clipboard.js
npm地址：vue-clipboard2 - npm
github地址：GitHub - Inndy/vue-clipboard2: A simple vue2 binding to clipboard.js

npm下载：

npm install --save vue-clipboard2

引入：

import Vue from 'vue'
import VueClipBoard from 'vue-clipboard2'
Vue.use(VueClipBoard);

使用：

方式1：复制输入框内的文字

<div id="app"></div>

<template id="t">
  <div class="container">
    <input type="text" v-model="message">
    <button type="button"
      v-clipboard:copy="message"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError">Copy!</button>
  </div>
</template>

<script>
new Vue({
  el: '#app',
  template: '#t',
  data: function () {
    return {
      message: 'Copy These Text'
    }
  },
  methods: {
    onCopy: function (e) {
      alert('You just copied: ' + e.text)
    },
    onError: function (e) {
      alert('Failed to copy texts')
    }
  }
})
</script>

方式2：复制设定的文字

<div id="app"></div>

  <template id="t">
    <div class="container">
    <input type="text" v-model="message">
    <button type="button" @click="doCopy">Copy!</button>
    </div>
  </template>

  <script>
  new Vue({
    el: '#app',
    template: '#t',
    data: function () {
      return {
        message: 'Copy These Text'
      }
    },
    methods: {
      doCopy: function () {
        this.$copyText(this.message).then(function (e) {
          alert('Copied')
          console.log(e)
        }, function (e) {
          alert('Can not copy')
          console.log(e)
        })
      }
    }
  })
  </script>

方法二：document.execCommand

<template>
  <div class="share" ref="share">
    <div @click="copyUrl" style="padding:20px">复制链接</div>
  </div>
</template>
<script>
export default {
  name: "share",
  data() {
    return {}
  },
  methods: {
    copyUrl() {
      let oDiv = document.createElement("div")//创建div
      oDiv.innerHTML = window.location.href//获取地址栏url作为div内容 可自定义
      oDiv.style.opacity = "0" //保证div不可见
      oDiv.style.width = "0"//保证div不可见
      oDiv.style.height = "0"//保证div不可见
      if (this.$refs.share) this.$refs.share.appendChild(oDiv) //将元素插入dom树

      const range = document.createRange(); //创建range范围对象
      range.selectNode(oDiv);//将div设置为范围对象内节点
      const selection = window.getSelection()//返回一个Selection选区对象，表示用户选择（点击）的文本范围或光标的当前位置
      if (selection.rangeCount > 0) selection.removeAllRanges();//清空选区中的范围对象
      selection.addRange(range);//将自建范围对象添加进选区
      const isCopy = document.execCommand('Copy');//拷贝当前选中内容（选区内容）到剪贴板 该方法返回Boolean
      oDiv.remove()//删除添加进dom树的div，保证页面无变化
      if (isCopy) {
        alert("复制成功");
      } else {
        alert("复制失败");
      }
    }
  }
}
</script>

注意：

document.execCommand目前兼容性很强，但该特性已经从 Web 标准中删除，也许会在未来的某个时间停止支持，请谨慎使用该特性。

document.execCommand - Web API 接口参考 | MDN