js、ts、vue2、vue2+ts、vue3、vue3+ts复制文本

js版本

解释navigator.clipboard

剪贴板 Clipboard API 为 Navigator 接口添加了只读属性 clipboard，该属性返回一个可以读写剪切板内容的 Clipboard 对象。在 Web 应用中，剪切板 API 可用于实现剪切、复制、粘贴的功能。

只有在用户事先授予网站或应用对剪切板的访问许可之后，才能使用异步剪切板读写方法。许可操作必须通过取得权限 Permissions API 的 "clipboard-read" 和/或 "clipboard-write" 项获得。

解释document.execCommand

已弃用: 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

当一个 HTML 文档切换到设计模式时，document暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素。

大多数命令影响document的 selection（粗体，斜体等），当其他命令插入新元素（添加链接）或影响整行（缩进）。当使用contentEditable时，调用execCommand()将影响当前活动的可编辑元素。

/**
 * 复制文本
 * @param {String} value 需要复制的文本
 */
export const copy = value => {
  if (!value) return console.log('无复制内容')
  // 判断当前环境是否支持navigator.clipboard 对象
  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard.writeText(value).then(() => {
      console.log('复制成功')
    }).catch(() => {
      console.log('复制失败')
    })
  } else {
    // 动态创建 textarea 标签
    const textarea = document.createElement('textarea')
    // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘
    textarea.setAttribute('readonly', true)
    // 将要 copy 的值赋给 textarea 标签的 value 属性
    textarea.setAttribute('value', value)
    // 将 textarea 插入到 body 中
    document.body.appendChild(textarea)
    // 选中值并复制
    textarea.select()
    textarea.setSelectionRange(0, textarea.value.length)
    const result = document.execCommand('copy')
    if (result) {
      console.log('复制成功')
    } else {
      console.log('复制失败')
    }
    // 操作完成后删除标签
    document.body.removeChild(textarea)
  }
}

ts版本

跟js版本差不多，这里就不做过多的解释了。

/**
 * 复制文本
 * @param {String} value 需要复制的文本
 */
export const copy = (value: string) => {
  if (!value) return console.log('无复制内容')
  // 判断当前环境是否支持navigator.clipboard 对象
  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard.writeText(value).then(() => {
      console.log('复制成功')
    }).catch(() => {
      console.log('复制失败')
    })
  } else {
    // 动态创建 textarea 标签
    const textarea = document.createElement('textarea')
    // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘
    textarea.setAttribute('readonly', 'true')
    // 将要 copy 的值赋给 textarea 标签的 value 属性
    textarea.setAttribute('value', value)
    // 将 textarea 插入到 body 中
    document.body.appendChild(textarea)
    // 选中值并复制
    textarea.select()
    textarea.setSelectionRange(0, textarea.value.length)
    const result = document.execCommand('copy')
    if (result) {
      console.log('复制成功')
    } else {
      console.log('复制失败')
    }
    // 操作完成后删除标签
    document.body.removeChild(textarea)
  }
}

vue2指令版本

解释其中使用的钩子函数

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

还有一些没使用的钩子请参考官网钩子函数

解释钩子函数参数

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：

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

还有一些没解释的参数请参考官网钩子函数参数

/**
 * 点击复制
 */
export default {
  bind(el, { value }) {
    el.$value = value
    el.handler = () => {
      if (!el.$value) return console.log('无复制内容')
      // 判断当前环境是否支持navigator.clipboard 对象
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(value).then(() => {
          console.log('复制成功')
        }).catch(() => {
          console.log('复制失败')
        })
      } else {
        // 动态创建 textarea 标签
        const textarea = document.createElement('textarea')
        // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘
        textarea.setAttribute('readonly', true)
        // 将要 copy 的值赋给 textarea 标签的 value 属性
        textarea.setAttribute('value', el.$value)
        // 将 textarea 插入到 body 中
        document.body.appendChild(textarea)
        // 选中值并复制
        textarea.select()
        textarea.setSelectionRange(0, textarea.value.length)
        const result = document.execCommand('copy')
        if (result) {
          console.log('复制成功')
        } else {
          console.log('复制失败')
        }
        // 操作完成后删除标签
        document.body.removeChild(textarea)
      }
    }
    // 绑定点击事件，就是所谓的一键 copy 啦
    el.addEventListener('click', el.handler)
  },
  // 当传进来的值更新的时候触发
  componentUpdated(el, { value }) {
    el.$value = value
  },
  // 指令与元素解绑的时候，移除事件绑定
  unbind(el) {
    el.removeEventListener('click', el.handler)
  }
}

vue2+ts指令版本

跟vue2指令版本差不多，这里就不做过多的解释了。

import { Directive, DirectiveBinding } from 'vue'

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

/**
 * 点击复制
 */
const copy: Directive = {
  bind(el: MyHTMLElement, binding: DirectiveBinding<string>) {
    el.$value = binding.value
    el.handler = () => {
      if (!el.$value) return console.log('无复制内容')
      // 判断当前环境是否支持navigator.clipboard 对象
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(el.$value).then(() => {
          console.log('复制成功')
        }).catch(() => {
          console.log('复制失败')
        })
      } else {
        // 动态创建 textarea 标签
        const textarea = document.createElement('textarea')
        // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘
        textarea.setAttribute('readonly', 'true')
        // 将要 copy 的值赋给 textarea 标签的 value 属性
        textarea.setAttribute('value', el.$value)
        // 将 textarea 插入到 body 中
        document.body.appendChild(textarea)
        // 选中值并复制
        textarea.select()
        textarea.setSelectionRange(0, textarea.value.length)
        const result = document.execCommand('copy')
        if (result) {
          console.log('复制成功')
        } else {
          console.log('复制失败')
        }
        // 操作完成后删除标签
        document.body.removeChild(textarea)
      }
    }
    // 绑定点击事件，就是所谓的一键 copy 啦
    el.addEventListener('click', el.handler)
  },
  // 当传进来的值更新的时候触发
  componentUpdated(el: MyHTMLElement, binding: DirectiveBinding<string>) {
    el.$value = binding.value
  },
  // 指令与元素解绑的时候，移除事件绑定
  unbind(el: MyHTMLElement) {
    el.removeEventListener('click', el.handler)
  }
}

export default copy

vue3指令版本

解释其中使用的钩子函数

mounted：在绑定元素的父组件及他自己的所有子节点都挂载完成后调用
updated：在绑定元素的父组件及他自己的所有子节点都更新后调用
unmounted：绑定元素的父组件卸载后调用

还有一些没解释的钩子函数请参考官网指令钩子

解释钩子函数参数

el：指令绑定到的元素。这可以用于直接操作 DOM。
binding：一个对象，包含以下属性。

  • value：传递给指令的值。例如在 v-my-directive="1 + 1" 中，值是 2。

还有一些没解释的参数请参考官网钩子参数

/**
 * 点击复制
 */
export default {
  mounted(el, { value }) {
    el.$value = value
    el.handler = () => {
      if (!el.$value) return console.log('无复制内容')
      // 判断当前环境是否支持navigator.clipboard 对象
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(value).then(() => {
          console.log('复制成功')
        }).catch(() => {
          console.log('复制失败')
        })
      } else {
        // 动态创建 textarea 标签
        const textarea = document.createElement('textarea')
        // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘
        textarea.setAttribute('readonly', true)
        // 将要 copy 的值赋给 textarea 标签的 value 属性
        textarea.setAttribute('value', el.$value)
        // 将 textarea 插入到 body 中
        document.body.appendChild(textarea)
        // 选中值并复制
        textarea.select()
        textarea.setSelectionRange(0, textarea.value.length)
        const result = document.execCommand('copy')
        if (result) {
          console.log('复制成功')
        } else {
          console.log('复制失败')
        }
        // 操作完成后删除标签
        document.body.removeChild(textarea)
      }
    }
    // 绑定点击事件，就是所谓的一键 copy 啦
    el.addEventListener('click', el.handler)
  },
  // 当传进来的值更新的时候触发
  updated(el, { value }) {
    el.$value = value
  },
  // 指令与元素解绑的时候，移除事件绑定
  unmounted(el) {
    el.removeEventListener('click', el.handler)
  }
}

vue3+ts指令版本

跟vue3指令版本差不多，这里就不做过多的解释了。

import { Directive, DirectiveBinding } from 'vue'

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

/**
 * 点击复制
 */
const copy: Directive = {
  mounted(el: MyHTMLElement, binding: DirectiveBinding<string>) {
    el.$value = binding.value
    el.handler = () => {
      if (!el.$value) return console.log('无复制内容')
      // 判断当前环境是否支持navigator.clipboard 对象
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(el.$value).then(() => {
          console.log('复制成功')
        }).catch(() => {
          console.log('复制失败')
        })
      } else {
        // 动态创建 textarea 标签
        const textarea = document.createElement('textarea')
        // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘
        textarea.setAttribute('readonly', 'true')
        // 将要 copy 的值赋给 textarea 标签的 value 属性
        textarea.setAttribute('value', el.$value)
        // 将 textarea 插入到 body 中
        document.body.appendChild(textarea)
        // 选中值并复制
        textarea.select()
        textarea.setSelectionRange(0, textarea.value.length)
        const result = document.execCommand('copy')
        if (result) {
          console.log('复制成功')
        } else {
          console.log('复制失败')
        }
        // 操作完成后删除标签
        document.body.removeChild(textarea)
      }
    }
    // 绑定点击事件，就是所谓的一键 copy 啦
    el.addEventListener('click', el.handler)
  },
  // 当传进来的值更新的时候触发
  updated(el: MyHTMLElement, binding: DirectiveBinding<string>) {
    el.$value = binding.value
  },
  // 指令与元素解绑的时候，移除事件绑定
  unmounted(el: MyHTMLElement) {
    el.removeEventListener('click', el.handler)
  }
}

export default copy
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,240评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,328评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,182评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,121评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,135评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,093评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,013评论 3赞 417
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,854评论 0赞 273
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,295评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,513评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,678评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,398评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,989评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,636评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,801评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,657评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,558评论 2赞 352