js版本

解釋navigator.clipboard

剪貼板 Clipboard API 為 Navigator 接口添加了只讀屬性 clipboard，該屬性返回一個(gè)可以讀寫剪切板內(nèi)容的 Clipboard 對(duì)象。在 Web 應(yīng)用中，剪切板 API 可用于實(shí)現(xiàn)剪切、復(fù)制、粘貼的功能。

只有在用戶事先授予網(wǎng)站或應(yīng)用對(duì)剪切板的訪問(wèn)許可之后，才能使用異步剪切板讀寫方法。許可操作必須通過(guò)取得權(quán)限 Permissions API 的 "clipboard-read" 和/或 "clipboard-write" 項(xiàng)獲得。

解釋document.execCommand

已棄用: 不再推薦使用該特性。雖然一些瀏覽器仍然支持它，但也許已從相關(guān)的 web 標(biāo)準(zhǔn)中移除，也許正準(zhǔn)備移除或出于兼容性而保留。請(qǐng)盡量不要使用該特性，并更新現(xiàn)有的代碼；參見本頁(yè)面底部的兼容性表格以指導(dǎo)你作出決定。請(qǐng)注意，該特性隨時(shí)可能無(wú)法正常工作。

當(dāng)一個(gè) HTML 文檔切換到設(shè)計(jì)模式時(shí)，document暴露 execCommand 方法，該方法允許運(yùn)行命令來(lái)操縱可編輯內(nèi)容區(qū)域的元素。

大多數(shù)命令影響document的 selection（粗體，斜體等），當(dāng)其他命令插入新元素（添加鏈接）或影響整行（縮進(jìn)）。當(dāng)使用contentEditable時(shí)，調(diào)用execCommand()將影響當(dāng)前活動(dòng)的可編輯元素。

/**
 * 復(fù)制文本
 * @param {String} value 需要復(fù)制的文本
 */
export const copy = value => {
  if (!value) return console.log('無(wú)復(fù)制內(nèi)容')
  // 判斷當(dāng)前環(huán)境是否支持navigator.clipboard 對(duì)象
  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard.writeText(value).then(() => {
      console.log('復(fù)制成功')
    }).catch(() => {
      console.log('復(fù)制失敗')
    })
  } else {
    // 動(dòng)態(tài)創(chuàng)建 textarea 標(biāo)簽
    const textarea = document.createElement('textarea')
    // 將該 textarea 設(shè)為 readonly 防止 iOS 下自動(dòng)喚起鍵盤
    textarea.setAttribute('readonly', true)
    // 將要 copy 的值賦給 textarea 標(biāo)簽的 value 屬性
    textarea.setAttribute('value', value)
    // 將 textarea 插入到 body 中
    document.body.appendChild(textarea)
    // 選中值并復(fù)制
    textarea.select()
    textarea.setSelectionRange(0, textarea.value.length)
    const result = document.execCommand('copy')
    if (result) {
      console.log('復(fù)制成功')
    } else {
      console.log('復(fù)制失敗')
    }
    // 操作完成后刪除標(biāo)簽
    document.body.removeChild(textarea)
  }
}

ts版本

跟js版本差不多，這里就不做過(guò)多的解釋了。

/**
 * 復(fù)制文本
 * @param {String} value 需要復(fù)制的文本
 */
export const copy = (value: string) => {
  if (!value) return console.log('無(wú)復(fù)制內(nèi)容')
  // 判斷當(dāng)前環(huán)境是否支持navigator.clipboard 對(duì)象
  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard.writeText(value).then(() => {
      console.log('復(fù)制成功')
    }).catch(() => {
      console.log('復(fù)制失敗')
    })
  } else {
    // 動(dòng)態(tài)創(chuàng)建 textarea 標(biāo)簽
    const textarea = document.createElement('textarea')
    // 將該 textarea 設(shè)為 readonly 防止 iOS 下自動(dòng)喚起鍵盤
    textarea.setAttribute('readonly', 'true')
    // 將要 copy 的值賦給 textarea 標(biāo)簽的 value 屬性
    textarea.setAttribute('value', value)
    // 將 textarea 插入到 body 中
    document.body.appendChild(textarea)
    // 選中值并復(fù)制
    textarea.select()
    textarea.setSelectionRange(0, textarea.value.length)
    const result = document.execCommand('copy')
    if (result) {
      console.log('復(fù)制成功')
    } else {
      console.log('復(fù)制失敗')
    }
    // 操作完成后刪除標(biāo)簽
    document.body.removeChild(textarea)
  }
}

vue2指令版本

解釋其中使用的鉤子函數(shù)

bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。

還有一些沒使用的鉤子請(qǐng)參考官網(wǎng)鉤子函數(shù)

解釋鉤子函數(shù)參數(shù)

el：指令所綁定的元素，可以用來(lái)直接操作 DOM。
binding：一個(gè)對(duì)象，包含以下 property：

• value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。

還有一些沒解釋的參數(shù)請(qǐng)參考官網(wǎng)鉤子函數(shù)參數(shù)

/**
 * 點(diǎn)擊復(fù)制
 */
export default {
  bind(el, { value }) {
    el.$value = value
    el.handler = () => {
      if (!el.$value) return console.log('無(wú)復(fù)制內(nèi)容')
      // 判斷當(dāng)前環(huán)境是否支持navigator.clipboard 對(duì)象
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(value).then(() => {
          console.log('復(fù)制成功')
        }).catch(() => {
          console.log('復(fù)制失敗')
        })
      } else {
        // 動(dòng)態(tài)創(chuàng)建 textarea 標(biāo)簽
        const textarea = document.createElement('textarea')
        // 將該 textarea 設(shè)為 readonly 防止 iOS 下自動(dòng)喚起鍵盤
        textarea.setAttribute('readonly', true)
        // 將要 copy 的值賦給 textarea 標(biāo)簽的 value 屬性
        textarea.setAttribute('value', el.$value)
        // 將 textarea 插入到 body 中
        document.body.appendChild(textarea)
        // 選中值并復(fù)制
        textarea.select()
        textarea.setSelectionRange(0, textarea.value.length)
        const result = document.execCommand('copy')
        if (result) {
          console.log('復(fù)制成功')
        } else {
          console.log('復(fù)制失敗')
        }
        // 操作完成后刪除標(biāo)簽
        document.body.removeChild(textarea)
      }
    }
    // 綁定點(diǎn)擊事件，就是所謂的一鍵 copy 啦
    el.addEventListener('click', el.handler)
  },
  // 當(dāng)傳進(jìn)來(lái)的值更新的時(shí)候觸發(fā)
  componentUpdated(el, { value }) {
    el.$value = value
  },
  // 指令與元素解綁的時(shí)候，移除事件綁定
  unbind(el) {
    el.removeEventListener('click', el.handler)
  }
}

vue2+ts指令版本

跟vue2指令版本差不多，這里就不做過(guò)多的解釋了。

import { Directive, DirectiveBinding } from 'vue'

interface MyHTMLElement extends HTMLElement {
  $value?: string;
  handler(): void;
}

/**
 * 點(diǎn)擊復(fù)制
 */
const copy: Directive = {
  bind(el: MyHTMLElement, binding: DirectiveBinding<string>) {
    el.$value = binding.value
    el.handler = () => {
      if (!el.$value) return console.log('無(wú)復(fù)制內(nèi)容')
      // 判斷當(dāng)前環(huán)境是否支持navigator.clipboard 對(duì)象
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(el.$value).then(() => {
          console.log('復(fù)制成功')
        }).catch(() => {
          console.log('復(fù)制失敗')
        })
      } else {
        // 動(dòng)態(tài)創(chuàng)建 textarea 標(biāo)簽
        const textarea = document.createElement('textarea')
        // 將該 textarea 設(shè)為 readonly 防止 iOS 下自動(dòng)喚起鍵盤
        textarea.setAttribute('readonly', 'true')
        // 將要 copy 的值賦給 textarea 標(biāo)簽的 value 屬性
        textarea.setAttribute('value', el.$value)
        // 將 textarea 插入到 body 中
        document.body.appendChild(textarea)
        // 選中值并復(fù)制
        textarea.select()
        textarea.setSelectionRange(0, textarea.value.length)
        const result = document.execCommand('copy')
        if (result) {
          console.log('復(fù)制成功')
        } else {
          console.log('復(fù)制失敗')
        }
        // 操作完成后刪除標(biāo)簽
        document.body.removeChild(textarea)
      }
    }
    // 綁定點(diǎn)擊事件，就是所謂的一鍵 copy 啦
    el.addEventListener('click', el.handler)
  },
  // 當(dāng)傳進(jìn)來(lái)的值更新的時(shí)候觸發(fā)
  componentUpdated(el: MyHTMLElement, binding: DirectiveBinding<string>) {
    el.$value = binding.value
  },
  // 指令與元素解綁的時(shí)候，移除事件綁定
  unbind(el: MyHTMLElement) {
    el.removeEventListener('click', el.handler)
  }
}

export default copy

vue3指令版本

解釋其中使用的鉤子函數(shù)

mounted：在綁定元素的父組件及他自己的所有子節(jié)點(diǎn)都掛載完成后調(diào)用
updated：在綁定元素的父組件及他自己的所有子節(jié)點(diǎn)都更新后調(diào)用
unmounted：綁定元素的父組件卸載后調(diào)用

還有一些沒解釋的鉤子函數(shù)請(qǐng)參考官網(wǎng)指令鉤子

解釋鉤子函數(shù)參數(shù)

el：指令綁定到的元素。這可以用于直接操作 DOM。
binding：一個(gè)對(duì)象，包含以下屬性。

• value：傳遞給指令的值。例如在 v-my-directive="1 + 1" 中，值是 2。

還有一些沒解釋的參數(shù)請(qǐng)參考官網(wǎng)鉤子參數(shù)

/**
 * 點(diǎn)擊復(fù)制
 */
export default {
  mounted(el, { value }) {
    el.$value = value
    el.handler = () => {
      if (!el.$value) return console.log('無(wú)復(fù)制內(nèi)容')
      // 判斷當(dāng)前環(huán)境是否支持navigator.clipboard 對(duì)象
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(value).then(() => {
          console.log('復(fù)制成功')
        }).catch(() => {
          console.log('復(fù)制失敗')
        })
      } else {
        // 動(dòng)態(tài)創(chuàng)建 textarea 標(biāo)簽
        const textarea = document.createElement('textarea')
        // 將該 textarea 設(shè)為 readonly 防止 iOS 下自動(dòng)喚起鍵盤
        textarea.setAttribute('readonly', true)
        // 將要 copy 的值賦給 textarea 標(biāo)簽的 value 屬性
        textarea.setAttribute('value', el.$value)
        // 將 textarea 插入到 body 中
        document.body.appendChild(textarea)
        // 選中值并復(fù)制
        textarea.select()
        textarea.setSelectionRange(0, textarea.value.length)
        const result = document.execCommand('copy')
        if (result) {
          console.log('復(fù)制成功')
        } else {
          console.log('復(fù)制失敗')
        }
        // 操作完成后刪除標(biāo)簽
        document.body.removeChild(textarea)
      }
    }
    // 綁定點(diǎn)擊事件，就是所謂的一鍵 copy 啦
    el.addEventListener('click', el.handler)
  },
  // 當(dāng)傳進(jìn)來(lái)的值更新的時(shí)候觸發(fā)
  updated(el, { value }) {
    el.$value = value
  },
  // 指令與元素解綁的時(shí)候，移除事件綁定
  unmounted(el) {
    el.removeEventListener('click', el.handler)
  }
}

vue3+ts指令版本

跟vue3指令版本差不多，這里就不做過(guò)多的解釋了。

import { Directive, DirectiveBinding } from 'vue'

interface MyHTMLElement extends HTMLElement {
  $value?: string;
  handler(): void;
}

/**
 * 點(diǎn)擊復(fù)制
 */
const copy: Directive = {
  mounted(el: MyHTMLElement, binding: DirectiveBinding<string>) {
    el.$value = binding.value
    el.handler = () => {
      if (!el.$value) return console.log('無(wú)復(fù)制內(nèi)容')
      // 判斷當(dāng)前環(huán)境是否支持navigator.clipboard 對(duì)象
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(el.$value).then(() => {
          console.log('復(fù)制成功')
        }).catch(() => {
          console.log('復(fù)制失敗')
        })
      } else {
        // 動(dòng)態(tài)創(chuàng)建 textarea 標(biāo)簽
        const textarea = document.createElement('textarea')
        // 將該 textarea 設(shè)為 readonly 防止 iOS 下自動(dòng)喚起鍵盤
        textarea.setAttribute('readonly', 'true')
        // 將要 copy 的值賦給 textarea 標(biāo)簽的 value 屬性
        textarea.setAttribute('value', el.$value)
        // 將 textarea 插入到 body 中
        document.body.appendChild(textarea)
        // 選中值并復(fù)制
        textarea.select()
        textarea.setSelectionRange(0, textarea.value.length)
        const result = document.execCommand('copy')
        if (result) {
          console.log('復(fù)制成功')
        } else {
          console.log('復(fù)制失敗')
        }
        // 操作完成后刪除標(biāo)簽
        document.body.removeChild(textarea)
      }
    }
    // 綁定點(diǎn)擊事件，就是所謂的一鍵 copy 啦
    el.addEventListener('click', el.handler)
  },
  // 當(dāng)傳進(jìn)來(lái)的值更新的時(shí)候觸發(fā)
  updated(el: MyHTMLElement, binding: DirectiveBinding<string>) {
    el.$value = binding.value
  },
  // 指令與元素解綁的時(shí)候，移除事件綁定
  unmounted(el: MyHTMLElement) {
    el.removeEventListener('click', el.handler)
  }
}

export default copy