点击按钮实现复制

原理

<template>
  <div class="about">
    <input type="text" v-model="text">
    <button @click="Copy">复制</button>
  </div>
</template>
 
<script>
export default {
    
    
 data() {
    
    
   return {
    
    
     text:'' //定义复制变量
   }
 },
 methods:{
    
    
 //定义方法
   Copy(){
    
    
 
     let inputs=document.createElement("input")     //创建节点
     inputs.value=this.text //给节点赋值
     document.body.appendChild(inputs) //渲染节点(要不然不起作用,可以添加隐藏属性)
     inputs.select() //选中节点
    let  actions =  document.execCommand("Copy") //指定复制命令(返回的是一个boolean类型)
     alert(actions)
   }
 }
}
</script>

vue2的复制粘贴功能

1.安装库并引入

安装: npm i vue-clipboard2
 
main.js中全局导入
 
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

2.定义methods和template结构(两种实现的方法)

demo

<template>
  <div class="hello">
    <input type="text" v-model="text" />
    <button @click="copy">点击复制</button>
  </div>
</template>

script

data() {
    
    
    return {
    
    
      text: "",//定义的双向绑定的参数
    };
  },
  methods: {
    
    
  //定义的方法
    copy() {
    
    
    //参数是复制的内容
    //.then()中的函数是复制成功和复制失败的两个回调函数
      this.$copyText(this.text).then(
        (e) => {
    
    
          alert("复制text: " + this.text + " 成功!!");
          console.log(e);
        },
        (err) => {
    
    
          alert("复制失败");
          console.log(err);
        }
      );
    },
  },

第二种使用的方法 指令

<template>
  <div class="container">
   {
    
    {
    
    qq}}
   <button type="button" 
           v-clipboard:copy="qq" //复制的内容
           v-clipboard:success="Copy" //复制成功调用的方法
           v-clipboard:error="Error" //复制失败调用的方法
           >复制QQ</button>
   </div>
</template>
<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      qq:'123456 '
    }
  },
  methods: {
    
    
     Copy: function (e) {
    
    
       alert('复制成功： ' + e.text)
     },
     Error: function (e) {
    
    
       alert('复制失败')
     }
   }
 }
</script> 

二. Vue3(点击复制粘贴功能的实现)

1.安装库并导入

安装: npm i vue-clipboard3 --save

在需要文件中导入: import clipboard3 from “vue-clipboard3”;

demo

<template>
  <div class="hello">
    <input type="text" v-model="text">
    <button @click="copy">点击复制</button>
  </div>
</template>

script

 //操作如下
    const msg=ref("")
    //解构出复制方法
    const {
    
     toClipboard } = clipboard3();
    const copy = async () => {
    
    
     try {
    
    
        await toClipboard(msg.value);
        alert("复制的text: "+msg.value+' 复制成功!!')
     } catch (error) {
    
    
       alert("复制失败!!")
     }
    };
 
retrun:{
    
    msg,toClipboard ,copy }