vue2 element 使用图标写一个好看的复制功能

在 Vue 2 中使用 Element UI 框架来实现一个带有图标的复制功能，你通常会结合 Element UI 的图标库（如 Font Awesome 或 Element 自带的图标，如果它支持）和一个用于复制文本到剪贴板的 JavaScript 方法。这里我将展示如何使用 Element UI 的 <el-button> 组件结合 Font Awesome 图标库来实现这个功能。

首先，确保你已经安装了 Element UI 和 Font Awesome（或你选择的任何图标库）。如果你还没有安装 Font Awesome，你可以通过 CDN 链接或 npm 来安装它。

1. 安装和引入依赖

如果你还没有安装 Element UI，你可以通过 npm 安装它：

npm install element-ui --save

在你的 Vue 项目中全局或局部引入 Element UI。

对于 Font Awesome，你可以通过 CDN 引入：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

或者通过 npm 安装：

npm install @fortawesome/fontawesome-free --save

然后在你的 Vue 组件中引入所需的图标 CSS 文件。

2. 实现复制功能

在你的 Vue 组件中，你可以使用 JavaScript 的 navigator.clipboard.writeText 方法来复制文本到剪贴板。请注意，这个方法在某些浏览器上可能需要用户交互（如点击事件）才能正常工作。

下面是一个简单的 Vue 组件示例，展示了如何使用 Element UI 的按钮和 Font Awesome 的图标来实现复制功能：

<template>
  <div>
    <el-button type="primary" @click="copyText">
      <i class="fas fa-copy"></i> 复制文本
    </el-button>
    <p>要复制的文本: {{ textToCopy }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textToCopy: 'Hello, Element UI and Font Awesome!',
    };
  },
  methods: {
    async copyText() {
      try {
        await navigator.clipboard.writeText(this.textToCopy);
        this.$message({
          message: '复制成功',
          type: 'success',
        });
      } catch (err) {
        this.$message.error('复制失败: ' + err.message);
      }
    },
  },
};
</script>

<style scoped>
/* 你的样式 */
</style>

注意：这个示例中使用了 Element UI 的 this.$message 方法来显示操作结果的消息。确保你的 Vue 实例已经全局或局部引入了 Element UI，并且已经注册了 Message 插件。

如果你还没有注册 Message 插件，你可以在你的 Vue 应用的入口文件（通常是 main.js 或 app.js）中添加以下代码来全局注册它：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

// 如果你想要使用 Message 插件，确保它已经被引入
// ElementUI.Message 是 Element UI 的一部分，所以当你全局引入 ElementUI 时，它就已经可用了

现在，你应该能够在你的 Vue 应用中使用一个带有 Font Awesome 图标的 Element UI 按钮来复制文本了。