vue3 element plus 双击文字复制文字并提示复制文字成功

下面将详细介绍如何在 Vue 3 结合 ElementPlus 实现双击文字复制文字并提示复制成功的功能。

步骤分析

1. 创建 Vue 3 项目：使用 Vite 或 Vue CLI 创建一个新的 Vue 3 项目。
2. 安装 ElementPlus：在项目中安装 ElementPlus 组件库。
3. 实现双击复制功能：在组件中监听文字的双击事件，当双击时将文字复制到剪贴板，并使用 ElementPlus 的消息提示框提示复制成功。

具体实现

1. 创建 Vue 3 项目
   使用 Vite 创建一个新的 Vue 3 项目：

npm init vite@latest my-vue-project -- --template vue 
cd my-vue-project 
npm install 

2. 安装 ElementPlus

npm install element-plus --save 

3. 配置 ElementPlus
   在 main.js 中引入并使用 ElementPlus：

import { createApp } from 'vue' 
import ElementPlus from 'element-plus' 
import 'element-plus/dist/index.css'  
import App from './App.vue'  
 
const app = createApp(App) 
app.use(ElementPlus)  
app.mount('#app')  

4. 实现双击复制功能
   在 App.vue 中编写以下代码：

<template> 
  <div> 
    <!-- 显示要复制的文字 --> 
    <p @dblclick="copyText(text)" ref="textRef">{{ text }}</p> 
  </div> 
</template> 
 
<script setup> 
import { ref } from 'vue'; 
import { ElMessage } from 'element-plus'; 
 
// 定义要复制的文字 
const text = ref('这是要复制的文字'); 
const textRef = ref(null); 
 
// 复制文字的函数 
const copyText = async (text) => { 
  try { 
    // 使用 navigator.clipboard.writeText  方法将文字复制到剪贴板 
    await navigator.clipboard.writeText(text);  
    // 复制成功后使用 ElementPlus 的消息提示框提示复制成功 
    ElMessage.success(' 复制成功'); 
  } catch (error) { 
    // 复制失败时使用 ElementPlus 的消息提示框提示复制失败 
    ElMessage.error(' 复制失败'); 
  } 
}; 
</script> 
 
<style scoped> 
p { 
  cursor: pointer; 
} 
</style> 

代码解释

1. 模板部分：
   使用

   标签显示要复制的文字，并绑定 @dblclick 事件，当双击文字时调用 copyText 方法。
   使用 ref 绑定 textRef，方便后续操作。

2. 脚本部分：
   使用 ref 定义要复制的文字 text 和 textRef。
   定义 copyText 方法，该方法使用 navigator.clipboard.writeText 方法将文字复制到剪贴板。
   如果复制成功，使用 ElMessage.success 提示复制成功；如果复制失败，使用 ElMessage.error 提示复制失败。
3. 样式部分：
   设置 p 标签的 cursor 为 pointer，表示该元素可以点击。

运行项目

npm run dev 

现在，当你双击页面上的文字时，文字将被复制到剪贴板，并弹出提示框提示复制成功。

以上内容均由AI搜集总结并生成，仅供参考
类型：代码辅助 豆包