vue写入数据到系统剪切板

要在Vue中将数据写入系统剪贴板，可以使用Clipboard API。 具体步骤如下：

1. 安装clipboard库

在命令行中运行以下命令：

npm install clipboard --save

2. 导入Clipboard库

在Vue组件中导入clipboard库：

import Clipboard from 'clipboard';

3. 创建Clipboard实例

在Vue组件的mounted生命周期函数中创建一个Clipboard实例：

mounted() {
  this.clipboard = new Clipboard('.btn');
},

这里的'.btn'是一个CSS选择器，指定要将事件绑定到哪些元素上。在这个例子中，我们将在带有类名'btn'的元素上绑定事件。

4. 添加事件监听器

在created生命周期函数中，添加一个事件监听器，监听Clipboard实例的'success'事件：

created() {
  this.clipboard.on('success', (e) => {
    console.log('Copied to clipboard:', e.text);
  });
},

5. 写入数据到剪贴板

在Vue组件中，添加一个方法，将要写入剪贴板的数据传递给Clipboard实例：

methods: {
  copyToClipboard() {
    this.clipboard.writeText('Hello world!');
  }
}

这个例子中，我们将字符串'Hello world!'写入剪贴板。

6. 绑定事件

在Vue组件的模板中，将copyToClipboard方法绑定到按钮或其他元素的点击事件上：

<button class="btn" @click="copyToClipboard">Copy to clipboard</button>

现在，当用户点击按钮时，'Hello world!'将被写入剪贴板，并触发'success'事件