vue实现点击按钮复制内容

最新推荐文章于 2024-09-09 11:08:24 发布

永恒y

最新推荐文章于 2024-09-09 11:08:24 发布

阅读量1.3k

点赞数 2

文章标签： vue.js npm javascript

本文链接：https://blog.csdn.net/weixin_47996469/article/details/125281539

版权

本文介绍了在Vue2和Vue3中实现点击复制文本的功能。在Vue2中，通过手动创建DOM元素和使用`execCommand`命令实现，或者利用`vue-clipboard2`库简化操作。而在Vue3中，使用`vue-clipboard3`库，通过ref和异步方法完成复制。文章详细展示了代码实现过程。

摘要由CSDN通过智能技术生成

原理

<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结构(两种实现的方法)

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

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";

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

 //操作如下
    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 }