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

需求背景

用户需要对流水号 进行复制使用,前端的展示是通过样式控制,超出省略号表示,鼠标悬浮展示完整流水号。此处的鼠标悬浮展示采用的是: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均存在不兼容的情况。

相关推荐
爱泡脚的鸡腿12 分钟前
HTML CSS 第二次笔记
前端·css
灯火不休ᝰ28 分钟前
前端处理pdf文件流,展示pdf
前端·pdf
智践行30 分钟前
Trae开发实战之转盘小程序
前端·trae
最新资讯动态36 分钟前
DialogHub上线OpenHarmony开源社区,高效开发鸿蒙应用弹窗
前端
lvbb661 小时前
框架修改思路
前端·javascript·vue.js
树上有只程序猿1 小时前
Java程序员需要掌握的技术
前端
从零开始学安卓1 小时前
Kotlin(三) 协程
前端
阿镇吃橙子1 小时前
一些手写及业务场景处理问题汇总
前端·算法·面试
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(九)——FSP(First Screen Paint)像素级分析、RUM+合成监控、Lighthouse CI
前端·性能优化