vue2 3借助插件实现复制功能

在项目中我们要实现复制功能，使用原生复制方法比较麻烦，所以我们可以借助插件

vue3使用 vue-clipboard3

安装

npm install --save vue-clipboard3

使用

import useClipboard from "vue-clipboard3";
const { toClipboard } = useClipboard();
const copybtn = ()=>{
   toClipboard(copy.value);
  console.log('复制成功');
  

}

案例  vue3

点击按钮复制输入框的内容

  <el-input v-model="copy" placeholder="请输入要负责的内容"></el-input>

  <el-button @click="copybtn"> 复制</el-button>

  import useClipboard from "vue-clipboard3";
  const { toClipboard } = useClipboard();

  const copy = ref('')

  const copybtn = ()=>{

  toClipboard(copy.value);  //copy.value 输入框的内容

  console.log('复制成功')

 }

vue2实现复制功能  使用插件 vue-clipboard2

安装

npm install --save vue-clipboard2

使用

在main.js进行注册

import Vue from 'vue'

import VueClipBoard from 'vue-clipboard2'

Vue.use(VueClipBoard)

案例  vue2

<button @click="seccendCopy">第二种方式复制</button>


seccendCopy() {
      this.$copyText(this.value).then(  //this.value 要复制的内容
        function(e) {
          console.log("复制成功!",e);
        },
        function(e) {
          console.log("复制失败", e);
        }
      );
}