快捷導航

vue自定義指令實現(xiàn)一鍵復制功能

更新時間：2024年11月30日 15:41:10 作者：你我皆牛馬MC

本文旨在記錄解決在工作中一鍵復制功能得需求,本文主要使用了Vue3+TypeScript+Ant-Design-Vue,感興趣的小伙伴可以跟隨小編一起學習一下

什么是vue自定義指令？請移步Vue自定義指令

實現(xiàn)的指令兼容了不支持navigator.clipboard API的瀏覽器，且實現(xiàn)了節(jié)流的效果，默認間隔時間1000ms

1、創(chuàng)建一個文件，比如：copy.ts

import { notification } from 'ant-design-vue'

// 自定義一些屬性
interface IListenter {
  (event: MouseEvent): void
}

interface ICopyElement extends HTMLElement {
  $value: string
  $isSupported: boolean
  $isClick: boolean
  $timer: number
  $handleCopy: IListenter
}

const useCopy = (app: ReturnType<typeof createApp>) => {
  app.directive('copy', {
    mounted(el: ICopyElement, binding: ReturnType<typeof Object>) {
      console.log(binding)
      let timer = binding.arg?.split(':')[0] || ''
      // 判斷timer是否存在，且是否為數(shù)字，如果不是數(shù)字則賦值默認值 1000ms
      if (timer && parseInt(timer) != timer) {
        el.$timer = parseInt(timer)
      } else {
        el.$timer = 1000
      }
      el.$value = binding.value

      el.$handleCopy = async (event: MouseEvent) => {
        // 簡單做個節(jié)流
        if (el.$isClick) return
        el.$isClick = true
        let t = setTimeout(() => {
          clearTimeout(t)
          el.$isClick = false
        }, el.$timer)

        if (!el.$value) {
          // 值為空的時候，給出提示
          notification.warning({ message: '系統(tǒng)提示', description: '無復制內(nèi)容' })
          return
        }
        // 獲取是否支持復制api
        if (el.$isSupported === undefined) {
          el.$isSupported = navigator && 'clipboard' in navigator
        }
        // 判斷瀏覽器是否支持 navigator.clipboard
        if (!el.$isSupported) {
          // 不支持，使用舊的復制方式
          // 動態(tài)創(chuàng)建 textarea 標簽
          const textarea = document.createElement('textarea')
          // 將該 textarea 設(shè)為 readonly 防止 iOS 下自動喚起鍵盤，同時將 textarea 移出可視區(qū)域
          textarea.readOnly = true
          textarea.style.position = 'fixed'
          textarea.style.left = '-9999px'
          // 將要 copy 的值賦給 textarea 標簽的 value 屬性
          textarea.value = el.$value
          // 將 textarea 插入到 body 中
          document.body.appendChild(textarea)
          // 選中值并復制
          textarea.select()
          // textarea.setSelectionRange(0, textarea.value.length);
          const result = document.execCommand('Copy')
          if (result) {
            notification.success({ message: '系統(tǒng)提示', description: '復制成功' })
          }
          document.body.removeChild(textarea)
        } else {
          // 使用 clipboard API
          await navigator!.clipboard.writeText(el.$value)
          notification.success({ message: '系統(tǒng)提示', description: '復制成功' })
        }
      }
      el.addEventListener('click', el.$handleCopy, false)
    },
    unmounted(el: ICopyElement) {
      el.removeEventListener('click', el.$handleCopy)
    }
  })
}

export default (app: ReturnType<typeof createApp>) => {
  useCopy(app)
}

2、在main.ts文件中使用

import App from './App.vue'
import * as copyFn from './copy' // 上面創(chuàng)建的文件
const app = createApp(App)

if (typeof copyFn.default === 'function') {
    copyFn.default(app)
}
app.mount('#app')

上面的寫法可以根據(jù)自己項目中的情況改變

3、使用

// test.vue
<template>
    <!-- 使用默認的間隔時間 -->
    <a-button v-copy="value">一鍵復制</a-button>
    
    <!-- 自定義間隔時間 -->
    <!-- <a-button v-copy:2000="value">一鍵復制</a-button> -->
</template>

<script lang="ts" setup>
import {ref} from 'vue'

const value = ref('這是一個自定義一鍵復制的指令')

</script>

總結(jié)

總的來說這個自定義指令比較簡單，實現(xiàn)這個指令是為了項目中多處地方方便使用，此文章不過多的解釋其中的代碼，有需要的可以直接復制到自己代碼中測試一下。

以上就是vue自定義指令實現(xiàn)一鍵復制功能的詳細內(nèi)容，更多關(guān)于vue一鍵復制的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: