vue3自定义指令来实现 v-copy 功能

v-copy

在 Vue 3 中,可以通过自定义指令来实现 v-copy 功能

  • 定义指令 - 新建copy.ts文件
ts 复制代码
//安装
pnpm i lement-plus -D

import type { Directive, DirectiveBinding, App } from 'vue'
import { ElMessage } from 'element-plus' // 引入element-plus 插件
import { EventType } from '../types' //导入事件的类型

// 添加事件监听器函数
function addEventListener(el: Element, binding: DirectiveBinding) {
  const { value, arg, modifiers } = binding // 解构出绑定值、参数和修饰符
  console.log(value, modifiers, arg, 'ssss'); // 打印调试信息

  // 确定事件类型和提示消息
  const eventType: EventType = modifiers.dblclick ? 'dblclick' : 'click' // 根据修饰符确定事件类型
  const message = arg || '复制成功' as string // 使用指令参数作为提示消息,默认为"复制成功"
  el.setAttribute('copyValue', String(value)) // 将绑定值存储为元素属性

  // 复制操作的处理函数
  const copyHandler = async (): Promise<void> => {
    try {
      if (navigator.clipboard) {
        // 使用现代浏览器的剪贴板 API
        await navigator.clipboard.writeText(el.getAttribute('copyValue') || '')
      } else {
        // 使用兼容旧浏览器的方法
        legacyCopy(el.getAttribute('copyValue') || '')
      }
      // 如果没有启用静默模式,显示成功提示
      if (!modifiers.quiet) {
        ElMessage({
          message: message,
          type: 'success',
        })
      }
    } catch (err) {
      // 复制失败时显示错误提示
      ElMessage.error('复制失败!')
    }
  }

  // 为元素添加事件监听器
  el.addEventListener(eventType, copyHandler)
}

// 兼容旧浏览器的复制方法
function legacyCopy(textToCopy: string) {
  // 创建一个隐藏的 textarea 元素
  const textarea = document.createElement('textarea')
  textarea.value = textToCopy // 设置要复制的文本
  textarea.style.position = 'fixed' // 使其不可见
  document.body.appendChild(textarea) // 添加到文档中
  textarea.select() // 选中其内容
  // 使用 execCommand 执行复制操作
  if (!document.execCommand('copy')) {
    throw new Error('execCommand 执行失败') // 复制失败时抛出错误
  }
  document.body.removeChild(textarea) // 移除临时创建的 textarea
}

// 自定义指令定义
const vCopy: Directive = {
  // 元素挂载时执行
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    addEventListener(el, binding) // 添加事件监听器
  },
  // 元素更新时执行
  updated(el: HTMLElement, binding: DirectiveBinding) {
    const { value } = binding
    el.setAttribute('copyValue', String(value)) // 更新存储的文本值
  },
}

// 注册指令的函数
export const setupCopyDirective = (app: App<Element>) => {
  app.directive('copy', vCopy) // 注册自定义指令
}
export default vCopy // 默认导出指令
  • 事件类型导出types.ts

    export type EventType = 'click' | 'dblclick'

  • 在组件中,使用 v-copy 指令绑定需要复制的文本 directive.vue

vue 复制代码
<script setup lang="ts">
  import {ref} from "vue";
  import { BaseButton } from '@/components/Button'
  import { ElInput } from 'element-plus'
  const value = ref<string>('我是要复制的值')
  const change = ref<string>('我是要改变的值')
</script>

<template>
  <button v-copy.dblclick="value">点击我复制</button>
  <BaseButton type="primary" class="w-[20%]" v-copy:复制成功了.dblclick="value">
    点击我复制
  </BaseButton>
  <el-input v-model="change" placeholder="Please input" />
  <BaseButton type="primary" class="w-[20%]" @click="() => value = change">
    改变将要复制的值
  </BaseButton>

</template>
相关推荐
UI设计和前端开发从业者9 分钟前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
前端小巷子36 分钟前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘1 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹1 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志2 小时前
typescript结构化类型应用两例
javascript
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW2 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字2 小时前
Kotlin lazy 委托的底层实现原理
前端
gnip3 小时前
总结一期正则表达式
javascript·正则表达式
Q_970956393 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js