Vue使用自定义指令实现点击复制功能,超简单!

该博客围绕Vue项目中实现一键复制文本功能展开。介绍了项目场景,即实现一键复制文本用于鼠标右键粘贴;阐述了实现思路,包括动态创建标签、赋值、选中复制及移除等操作;还提及了实现效果,并给出了copy.js文件代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述

Vue使用自定义指令实现点击复制功能,超简单!

项目场景

需求:实现一键复制文本内容,用于鼠标右键粘贴。

实现思路

  • 动态创建 textarea 标签,并设置 readOnly 属性及移出可视区域
  • 将要复制的值赋给 textarea 标签的 value 属性,并插入到 body
  • 选中值 textarea 并复制
  • body 中插入的 textarea 移除
  • 在第一次调用时绑定事件,在解绑时移除事件

实现效果

在这里插入图片描述

实现代码

<template>
  <div>
    <div class="btn-copy"><el-button v-copy="copyText">复制</el-button></div>
  </div>
</template>

<script>
import copy from '../../directive/test/copy'
export default {
  directives: {
    copy
  },
  data(){
    return{
       copyText: '我是要复制的内容啊啊啊啊!!!'
    }
  },
  methods:{
  }
}
</script>

<style lang="scss">
.btn-copy{
  width: 100px;
  margin: 10px;
}
</style>

copy.js文件如下

const copy = {
  bind(el, { value }) {
    el.$value = value
    el.handler = () => {
      if (!el.$value) {
        // 值为空的时候,给出提示。可根据项目UI仔细设计
        console.log('无复制内容')
        return
      }
      // 动态创建 textarea 标签
      const textarea = document.createElement('textarea')
      // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘,同时将 textarea 移出可视区域
      textarea.readOnly = 'readonly'
      textarea.style.position = 'absolute'
      textarea.style.left = '-9999px'
      // 将要 copy 的值赋给 textarea 标签的 value 属性
      textarea.value = el.$value
      // 将 textarea 插入到 body 中
      document.body.appendChild(textarea)
      // 选中值并复制
      textarea.select()
      const result = document.execCommand('Copy')
      if (result) {
        console.log('复制成功') // 可根据项目UI仔细设计
      }
      document.body.removeChild(textarea)
    }
    // 绑定点击事件,就是所谓的一键 copy 啦
    el.addEventListener('click', el.handler)
  },
  // 当传进来的值更新的时候触发
  componentUpdated(el, { value }) {
    el.$value = value
  },
  // 指令与元素解绑的时候,移除事件绑定
  unbind(el) {
    el.removeEventListener('click', el.handler)
  },
}

export default copy

如有疑问,欢迎评论区留言。

在这里插入图片描述

Vue3中实现复制功能自定义指令可以使用vue-clipboard3插件。这个插件是Vue3版本的vue-clipboard2插件的升级版,可以方便地实现将内容复制到剪贴板的功能。 要在Vue3中使用vue-clipboard3插件,首先需要安装它作为项目的依赖项。然后,在需要使用复制功能的组件中,使用v-copy指令来绑定相应的事件。 例如,可以在组件的模板中使用v-copy指令,并将要复制的内容作为指令的参数传入。然后,在指令被触发时,调用vue-clipboard3插件提供的API来实现复制功能。具体的代码可以类似下面这样: ```html <template> <button v-copy="copyText">复制内容</button> </template> <script> import { useClipboard } from 'vue-clipboard3'; export default { data() { return { copyText: '要复制的内容', } }, directives: { copy: useClipboard, }, } </script> ``` 在这个示例中,当点击按钮时,v-copy指令会将copyText的值复制到剪贴板上。 使用vue-clipboard3插件可以方便地实现Vue3中复制内容到剪贴板的功能。通过使用v-copy指令,我们可以将复制功能应用到单根组件上,实现Vue2相似的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue3.0 如何自定义指令](https://blog.csdn.net/ww_5211314/article/details/126935476)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Vue3自定义指令-10个常见的实用指令,带详细讲解,快拿去收藏!!!](https://blog.csdn.net/weixin_36813246/article/details/126864742)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值