网站建设 亿安网络,wordpress 运费设置,免费全自动网页制作系统,网站优化排名软件网站需求背景 用户需要对流水号进行复制使用#xff0c;前端的展示是通过样式控制#xff0c;超出省略号表示#xff0c;鼠标悬浮展示完整流水号。此处的鼠标悬浮展示采用的是:title#xff0c;这样就无法对文本进行选中。
下面是给出一键复制的不同的解决方案#xff0c;希望…需求背景 用户需要对流水号进行复制使用前端的展示是通过样式控制超出省略号表示鼠标悬浮展示完整流水号。此处的鼠标悬浮展示采用的是:title这样就无法对文本进行选中。
下面是给出一键复制的不同的解决方案希望对大家有所帮助。 使用UI框架中的Popover 弹出框 如下图所示 优点 可以直接根据前端工程中使用到的UI库引入使用 缺点 需要用户手动选中文本进行复制而且从项目全局考虑为了样式的一致性可能会造成较大的改动 ClipboardJS ClipboardJS 是一个轻量级的 JavaScript 库主要用于实现剪贴板功能让用户可以方便地复制文本。 使用方法 npm 安装 npm install clipboard --save引入 import ClipboardJS from clipboard样例 templateel-button typeprimary idcopy-button clickoneKeyCopy一键复制/el-buttondiv classcontainerinput v-modellogJson //div
/templatescript
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 基本用法 // content需要复制的内容
const copyToClipboard (content) {const textarea document.createElement(textarea)textarea.value contentdocument.body.appendChild(textarea)textarea.select()document.execCommand(Copy)textarea.remove()
}兼容性 不同的浏览器或版本对 execCommand 的支持程度不同 navigator.clipboard.writeText navigator.clipboard.writeText 是一个现代浏览器提供的 API用于将文本写入剪贴板。 基本用法 !DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title复制文本示例/title
/head
bodytextarea idtext-to-copy rows4 cols50这是需要复制的文本。/textareabrbutton idcopy-button复制文本/buttonscriptdocument.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均存在不兼容的情况。
