本文讲解如何通过参数化函数为多个“复制到剪贴板”按钮分配各自专属的文本内容，避免所有按钮均复制同一值的问题。
本文讲解如何通过参数化函数为多个“复制到剪贴板”按钮分配各自专属的文本内容，避免所有按钮均复制同一值的问题。
在实际开发中，若多个按钮共用同一个 copyText() 函数且未区分上下文，就会出现点击任一按钮都复制相同内容的问题——正如示例中两个按钮均执行 navigator.clipboard.writeText("12345") 和 navigator.clipboard.writeText("54321")，最终仅后者生效（因后调用覆盖前调用），导致逻辑混乱。
正确做法是将待复制的文本作为参数传入函数，实现行为解耦：
<script>
function copyText(textToCopy) {
navigator.clipboard.writeText(textToCopy)
.then(() => console.log(`Copied: ${textToCopy}`))
.catch(err => console.error('Failed to copy: ', err));
}
</script>
<p id="p1">
<div class="enabled-left-icon-4-9z5">
<button onclick="copyText('12345')">Copy 12345</button>
</div>
</p>
<p id="p2">
<div class="enabled-left-icon-5-MqF">
<button onclick="copyText('54321')">Copy 54321</button>
</div>
</p>✅ 关键改进点：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 函数 copyText(textToCopy) 接收动态参数，消除硬编码依赖；
- 每个 <button> 显式传入对应文本，职责清晰、可维护性强；
- 添加 .then() 和 .catch() 处理异步复制结果，提升健壮性与调试能力。
⚠️ 注意事项：
- navigator.clipboard.writeText() 是异步 API，必须使用 Promise 链式处理；
- 浏览器需处于安全上下文（HTTPS 或 localhost），否则调用会失败；
- 不建议在 onclick 中直接写长逻辑，生产环境推荐使用 addEventListener 分离 HTML 与 JS。
通过参数化设计，你不仅能精准控制每个按钮的行为，也为后续扩展（如动态生成按钮、绑定数据属性等）打下良好基础。
