Vue3 实现 clipboard 复制功能

一个很小的交互功能,网上搜了一下有一个 vue3-clipboard 直接支持vue3,到github仓库看了下,原作者已经不维护这个项目了:

Vue3 实现 clipboard 复制功能_第1张图片

推荐使用 vueuse 自带的 useclipboard 功能,由 vue 团队维护,稳定性基本没问题

官网链接:useClipboard | VueUse

官网的例子如下:

import { useClipboard } from '@vueuse/core'

  const source = ref('Hello')
  const { text, copy, copied, isSupported } = useClipboard({ source })
 
    
    
    

Current copied: {{ text || 'none' }}

Your browser does not support Clipboard API

上面的例子并不具备通用性,我们实际应用肯定需要再次封装,下面给出我封装的效果,在 Table 的每一行中,有一个name提供快捷拷贝展示效果如下:

Vue3 实现 clipboard 复制功能_第2张图片

这样用图标代替复制的按钮样式会更加美观一点

在ts工具类中封装的通用拷贝方法,只需要传入要复制的参数即可:

import {Component, h} from "vue";
import Icon from '@ant-design/icons-vue';
import { useClipboard } from '@vueuse/core'
import { message } from 'ant-design-vue';
const { copy, isSupported } = useClipboard();

export function renderDesignIcon (icon: Component, conf:any=null) {
    return  h(Icon,conf, { component: () => h(icon,) })
}

export function handleCopy (text:string) {
    if (!isSupported) {
        message.error("您的浏览器不支持Clipboard API");
        return;
    }
    copy(text);
    message.success(`复制成功:${text}`);
}

然后在使用的时候,只需要在 CopyOutlined 图标的点击事件上,调用这个方法即可:

在 vue 模版中调用
CopyOutlined @click="handleCopy(text)" style="color: gray;"> 

在render函数中调用:

  {
    title: "应用名",
    dataIndex: "applicationName",
    width: '180px',
    customRender: ({text, record, index, column}) => {
      return h('div',{}, [
          `${record.applicationName} `,
        renderDesignIcon(CopyOutlined, {
          style: { color: 'gray' },
          onClick: () => {
            handleCopy(record.applicationName)
          }
        })
      ] )
    },
  }

你可能感兴趣的:(前端,vue.js,javascript,前端)