前端一键复制解决方案分享

需求背景

用户需要对流水号 进行复制使用,前端的展示是通过样式控制,超出省略号表示,鼠标悬浮展示完整流水号。此处的鼠标悬浮展示采用的是:title='',这样就无法对文本进行选中。

下面是给出一键复制的不同的解决方案,希望对大家有所帮助。

使用UI框架中的Popover 弹出框
如下图所示:
  • 优点
    • 可以直接根据前端工程中使用到的UI库引入使用
  • 缺点
    • 需要用户手动选中文本进行复制,而且从项目全局考虑,为了样式的一致性可能会造成较大的改动
ClipboardJS

ClipboardJS 是一个轻量级的 JavaScript 库,主要用于实现剪贴板功能,让用户可以方便地复制文本。

使用方法
  • npm 安装

    javascript 复制代码
    npm install clipboard --save
 ###### 引入

 ```javascript
 import ClipboardJS from 'clipboard'
 ```
 ###### 样例

 ```vue
 <template>
 	<el-button type="primary" id="copy-button" @click="oneKeyCopy">一键复制</el-button>
 	<div class="container">
         <input v-model="logJson" />
     </div>
 </template>

 <script>
 import ClipboardJS from 'clipboard';
 export default {
     data() {
         return {
             logJson: '哈哈哈',
 		}
 	},
     methods: {
         oneKeyCopy() {
             let clipboard = new ClipboardJS('#copy-button', {
                 text: () => this.logJson,
             });
             clipboard.on('success', (e) => {
                 this.$message.success('复制成功!');
                 clipboard.destroy();
             });
             clipboard.on('error', () => {
                 this.$message.error('复制失败,请手动复制!');
                 clipboard.destroy();
             });
             clipboard.onClick(event => event.preventDefault()); // 阻止默认的点击事件
             clipboard.click(); // 触发点击事件以执行复制操作
             clipboard.destroy();
         },
 	}
 }
 </script>
 ```
原生JS
基本用法
js 复制代码
// content:需要复制的内容
const copyToClipboard = (content) => {
  const textarea = document.createElement("textarea")
  textarea.value = content
  document.body.appendChild(textarea)
  textarea.select()
  document.execCommand("Copy")
  textarea.remove()
}
兼容性

不同的浏览器或版本对 execCommand 的支持程度不同
4.

navigator.clipboard.writeText 是一个现代浏览器提供的 API,用于将文本写入剪贴板。

基本用法
html 复制代码
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复制文本示例</title>
</head>
<body>
    <textarea id="text-to-copy" rows="4" cols="50">这是需要复制的文本。</textarea><br>
    <button id="copy-button">复制文本</button>

    <script>
        document.getElementById('copy-button').addEventListener('click', function() {
            const text = document.getElementById('text-to-copy').value;
            
            navigator.clipboard.writeText(text)
                .then(() => {
                    console.log('文本已复制:', text);
                    alert('文本已复制到剪贴板!');
                })
                .catch(err => {
                    console.error('复制失败:', err);
                });
        });
    </script>
</body>
</html>
代码解释
  • 通过 document.getElementById 获取文本域和按钮元素。
  • 为按钮添加点击事件监听器。
  • 在点击事件中,获取文本域中的值,并调用 navigator.clipboard.writeText(text)
  • 使用 .then() 方法处理成功情况,并在控制台输出信息或显示提示。
  • 使用 .catch() 方法处理错误情况。
兼容性

navigator.clipboard 是现代浏览器支持的特性(如 Chrome, Firefox, Edge 等),在某些旧版浏览器中可能不被支持。建议在使用前检查浏览器的兼容性。

总结

推荐方案2,方案1的使用需要考虑项目样式的一致性,可能会导致较多的内容改动;方案4和方案3均存在不兼容的情况。

相关推荐
寻找沙漠的人27 分钟前
前端知识补充—CSS
前端·css
GISer_Jing39 分钟前
2025前端面试热门题目——计算机网络篇
前端·计算机网络·面试
m0_7482455240 分钟前
吉利前端、AI面试
前端·面试·职场和发展
理想不理想v1 小时前
webpack最基础的配置
前端·webpack·node.js
pubuzhixing1 小时前
开源白板新方案:Plait 同时支持 Angular 和 React 啦!
前端·开源·github
2401_857600951 小时前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界
前端·javascript·vue.js
2401_857600951 小时前
数字时代的医疗挂号变革:SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL1 小时前
vue入门教程:组件透传 Attributes
前端·javascript·vue.js
2402_857583491 小时前
基于 SSM 框架的 Vue 电脑测评系统:照亮电脑品质之路
前端·javascript·vue.js
web150850966412 小时前
在uniapp Vue3版本中如何解决webH5网页浏览器跨域的问题
前端·uni-app