vuejs：单击时将标签内容复制到剪贴板而不创建功能

Question

如何在不使用自己的功能的情况下将HTML标签的内容复制到剪贴板？

<div @click="navigator.clipboard.writeText(this)">Hello {{ name }}!</div>

Answer 1

根据 > ，通用代码无法假设访问特定于平台的API，因此，如果您的代码直接使用仅浏览器的全球范围，例如window或文档，他们会丢弃错误。因此，常见的方法是懒洋洋地访问仅客户端的生命周期挂钩，例如已安装。

实时演示：

new Vue({
  el: '#app',
  data: {
    name: 'Alpha',
    browserApi: null
  },
  mounted() {
    this.browserApi = navigator
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div ref="elText" @click="browserApi.clipboard.writeText($refs.elText.innerText)">Hello {{ name }}!</div>
</div>

Answer 2

我认为在VUE3中，没有“丑陋”解决方案是不可能的，请参阅此处的灵感。但是我认为，最清洁的方法是只用其中一行代码创建一种方法。

Answer 3

更适合可读性

vue；

new Vue({
  el: '#app',
  data: {
    name: 'Alpha',
  },
  methods {
    copyPageUrl(){
        navigator.clipboard.writeText($refs.elText.innerText)
    },
  }
})

html;

<div id="app">
  <div ref="elText" @click="copyPageUrl">Hello {{ name }}!</div>
</div>