Naive UI模态框中的复制功能失效问题解析

问题现象

在使用Naive UI的模态框组件时，开发人员发现一个奇怪的现象：当模态框处于打开状态时，执行复制文本到剪贴板的操作会失败；而关闭模态框后，同样的复制逻辑却能正常工作。

问题分析

这个现象看似与Naive UI组件相关，但实际上涉及浏览器安全机制和可访问性限制。浏览器为了防止恶意脚本滥用剪贴板功能，对复制操作施加了严格的限制条件。

浏览器安全机制

现代浏览器要求复制操作必须满足以下条件之一：

1. 操作必须由用户明确的交互行为（如点击事件）触发
2. 执行复制操作的元素必须处于焦点状态
3. 操作必须在主文档上下文中执行

模态框的特殊性

当模态框打开时，它会创建一个新的焦点上下文，这可能导致：

1. 主文档失去焦点
2. 动态创建的textarea元素无法获得足够的焦点权限
3. 浏览器认为复制操作不是由用户直接触发的

解决方案

临时解决方案

可以通过强制设置焦点来绕过浏览器的限制：

function copyText(text) {
    const textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    textField.focus(); // 强制获取焦点
    document.execCommand('copy');
    textField.remove();
}

更优方案

1. 使用现代Clipboard API：替代已废弃的document.execCommand

async function copyText(text) {
    try {
        await navigator.clipboard.writeText(text);
        return true;
    } catch (err) {
        console.error('复制失败:', err);
        return false;
    }
}

2. 避免在模态框中执行复制：将复制操作移到模态框外执行

3. 确保用户交互：确保复制操作是由用户点击等明确行为触发的

最佳实践建议

1. 优先使用现代的Clipboard API，它提供了更可靠和安全的剪贴板访问方式
2. 如果必须使用execCommand，确保操作是由用户交互直接触发的
3. 在模态场景中，考虑使用专门的复制按钮组件
4. 添加完善的错误处理和用户反馈机制

总结

这个问题虽然在使用Naive UI模态框时被发现，但本质上是一个浏览器安全机制问题。理解浏览器对剪贴板操作的限制条件，可以帮助开发者编写更健壮的代码。随着Web API的发展，建议逐步迁移到更现代的Clipboard API，以获得更好的兼容性和用户体验。