vue 实现复制功能

不使用插件

不使用插件，可以使用input标签，然后通过execCommand(‘copy’)函数实现复制功能。

复制input标签中的内容

<template>
  <div id="app">
    请输入你需要复制的内容：<input id="copy" v-model="mes"/>
   <button v-on:click="copy()">复制</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      mes: ''
    }
  },
  methods: {
    copy () {
      //获取input对象
      var input = document.getElementById('copy')
      //选中input标签
      input.select()
      //执行复制
      document.execCommand('copy')
      this.$message.success('success!')
    },
  },
}
</script>

复制不是标签中的内容

<template>
  <div id="app">
   <button id="copy" v-on:click="copy()">复制</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      mes: '这就是需要复制的内容！'
    }
  },
  methods: {
    copy () {
      //创建input标签
      var input = document.createElement('input')
      //将input的值设置为需要复制的内容
      input.value = this.mes;
      //添加input标签
      document.body.appendChild(input)
      //选中input标签
      input.select()
      //执行复制
      document.execCommand('copy')
      //成功提示信息
      this.$message.success('success!')
      //移除input标签
      document.body.removeChild(input)
    },
  },
}
</script>

使用插件（Clipboard）

1、在项目目录下安装Clipboard插件
cd 项目目录
npm install clipboard --save

2、导入插件
//全局导入，在main.js中导入（可选）
import clipboard from ‘clipboard’
Vue.prototype.clipboard = clipboard
//局部导入，在对应文件导入
import clipboard from ‘clipboard’

3、vue文件

<template>
  <div id="app">
   <button id="copy" :data-clipboard-text="mes" v-on:click="copy()">复制</button>
  </div>
</template>

<script>
import Clipboard from 'clipboard'
export default {
  name: 'App',
  data() {
    return {
      mes: '这就是需要复制的内容！'
    }
  },
  methods: {
    copy () {
      let _this = this
      let clipborad = new Clipboard('#copy')
      //复制成功
      clipboard.on('success', function() {
        _this.$message.success('复制成功！')
        clipboard.destory()
      })
      //复制失败
      clipborad.on('error', function() {
        _this.$message.error('复制失败！')
        clipboard.destory()
      })
    },
  },
}
</script>