Vue3實現(xiàn)clipboard復(fù)制的使用示例

更新時間：2023年11月03日 09:27:56 作者：三劫散仙

在日常開發(fā)中,為用戶提供復(fù)制文本功能的需求比較常見,下面介紹一款vue3可用的插件,可以快速實現(xiàn)這個功能,感興趣的可以了解一下

一個很小的交互功能，網(wǎng)上搜了一下有一個 vue3-clipboard 直接支持vue3，到github倉庫看了下，原作者已經(jīng)不維護這個項目了：

推薦使用 vueuse 自帶的 useclipboard 功能，由 vue 團隊維護，穩(wěn)定性基本沒問題

官網(wǎng)鏈接：useClipboard | VueUse

官網(wǎng)的例子如下：

import { useClipboard } from '@vueuse/core'
 
  const source = ref('Hello')
  const { text, copy, copied, isSupported } = useClipboard({ source })
 
    
    
    <div v-if="isSupported">
    <button @click='copy(source)'>
      <!-- by default, `copied` will be reset in 1.5s -->
      <span v-if='!copied'>Copy</span>
      <span v-else>Copied!</span>
    </button>
    <p>
      Current copied: <code>{{ text || 'none' }}</code>
    </p>
  </div>
  <p v-else>
    Your browser does not support Clipboard API
  </p>

上面的例子并不具備通用性，我們實際應(yīng)用肯定需要再次封裝，下面給出我封裝的效果，在 Table 的每一行中，有一個name提供快捷拷貝展示效果如下：

這樣用圖標代替復(fù)制的按鈕樣式會更加美觀一點

在ts工具類中封裝的通用拷貝方法，只需要傳入要復(fù)制的參數(shù)即可：

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(`復(fù)制成功：${text}`);
}

然后在使用的時候，只需要在 CopyOutlined 圖標的點擊事件上，調(diào)用這個方法即可：

在 vue 模版中調(diào)用

CopyOutlined @click="handleCopy(text)" style="color: gray;"> </CopyOutlined>

在render函數(shù)中調(diào)用：

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

到此這篇關(guān)于Vue3實現(xiàn)clipboard復(fù)制的使用示例的文章就介紹到這了,更多相關(guān)Vue3 clipboard復(fù)制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: