Vue.js 实现将指定字符串复制到剪切板 - 完整指南 - 常规

在 Vue.js 中，可以使用 Clipboard API 来实现将指定字符串复制到剪切板。首先，在 Vue 组件中，可以通过在 methods 中定义一个方法，例如 copyToClipboard 来实现复制字符串的功能。然后，在该方法中，可以使用 navigator.clipboard.writeText() 方法将指定的字符串复制到剪切板。

下面是一个示例代码：

<template>
  <div>
    <button @click="copyToClipboard('Hello World')">复制到剪切板</button>
  </div>
</template>

<script>
export default {
  methods: {
    copyToClipboard(text) {
      navigator.clipboard.writeText(text)
        .then(() => {
          console.log('复制成功');
        })
        .catch((error) => {
          console.error('复制失败:', error);
        });
    }
  }
}
</script>

在上面的示例中，点击按钮时，会调用 copyToClipboard 方法，并将字符串 'Hello World' 传递给该方法。然后，该方法会调用 navigator.clipboard.writeText() 方法来将指定的字符串复制到剪切板。如果复制成功，会在控制台输出 '复制成功'，如果复制失败，会在控制台输出 '复制失败' 并打印错误信息。

需要注意的是，navigator.clipboard.writeText() 方法是一个异步方法，因此需要使用 .then() 和 .catch() 来处理复制成功和失败的情况。另外，该方法在某些浏览器中可能不被支持，因此在使用前最好先进行浏览器兼容性检查。