VueJS如何实现点击标签无需自定义函数复制内容到剪贴板

不需要额外编写独立的自定义函数，直接在元素的内联点击事件中调用浏览器原生剪贴板API即可实现需求，注意navigator.clipboard.writeText()只接收字符串类型参数，不能直接传入DOM元素对象。

• 原生HTML写法：通过onclick绑定内联事件，用this.innerText获取当前绑定事件标签内的纯文本内容传入API即可，this会直接指向绑定事件的标签本身，不会受内部子元素点击影响

  <div onclick="navigator.clipboard.writeText(this.innerText)">点击复制我里面的内容</div>
  

• Vue框架写法（即示例中使用@click指令的场景）：Vue内联事件中this不指向当前DOM节点，需要通过内置的$event对象拿到绑定事件的元素，再取文本内容；如果标签内嵌套了子元素，建议用currentTarget避免点击到子节点时取错内容

  <div @click="navigator.clipboard.writeText($event.currentTarget.innerText)">Hello {{ name }}!</div>
  

注意事项：navigator.clipboard属于浏览器安全敏感API，仅在HTTPS环境、本地localhost开发环境下可正常调用，普通HTTP环境调用会被安全策略拦截。如果需要复制标签内的富文本结构，可将innerText替换为innerHTML，但writeText方法仅支持写入纯文本。

内容的提问来源于stack exchange，提问作者DevonDahon