vue实现一键复制

在个人项目中为了更好的完善体验，需要有一个一键复制的功能复制，主要的实现方法有以下几个：

不使用插件

使用input配合document.execComman方法可以实现；

这个特性已经过时了，它在一些浏览器中仍然可以工作，但不鼓励使用它，因为它可能随时被删除。尽量避免使用它

// 复制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、在项目目录下安装插件

npm install clipboard --save

2、引入插件

// 全局中引入 main.js
import clipboard from 'clipboard'
Vue.prototype.clipboard = clipboard

// 局部引入
import clipboard from 'clipborad'

3、项目中使用

<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')
      //复制成功
      clipborad.on('success', function() {
        _this.$message.success('复制成功！')
	// 释放内存，如果缺少，复制成功的提示会一直累加
        clipborad.destroy()
      })
      //复制失败
      clipborad.on('error', function() {
        _this.$message.error('复制失败！')
	// 释放内存
        clipborad.destroy()
      })
    },
  },
}
</script>

更多文章__> >> 码砖猿的技术博客