基于Vue3+ElementPlus项目,复制文字到剪贴板功能实践指南,揭秘使用js-tool-big-box工具库的核心优势
<template>
<el-button @click="copyToClipboard">复制文本到剪贴板</el-button>
</template>
<script setup>
import { ElMessage } from 'element-plus';
const copyToClipboard = async () => {
try {
const textToCopy = '要复制的文本内容';
await navigator.clipboard.writeText(textToCopy);
ElMessage.success('复制成功');
} catch (error) {
ElMessage.error('复制失败');
console.error('复制到剪贴板时发生错误:', error);
}
};
</script>
这段代码展示了如何在Vue 3和Element Plus中创建一个复制到剪贴板的功能。它使用了navigator.clipboard.writeText()
方法来实现复制文本到系统剪贴板。同时,使用了Element Plus的ElMessage
组件来显示操作结果给用户。
评论已关闭