Layui Tab组件可通过添加data-url属性、监听右键事件并调用navigator.clipboard.writeText实现URL复制功能，需注意iframe src存储、动态同步及兼容性处理。
<p>在 Layui 的 Tab 组件中，默认不支持右键复制当前标签页的 URL，但可以通过监听 tab 标签的右键事件、获取对应 iframe 或页面的地址，再调用浏览器 API 实现复制功能。</p>
<H3>1. 给 tab 标签添加唯一标识和 URL 数据</H3>
<p>创建 tab 时，把目标页面 URL 存入 DOM 元素的 <strong>data-url</strong> 属性中，方便后续读取：</p>
<font color="#666">
<pre class="brush:php;toolbar:false;">
// 示例：添加新 tab 时
element.tabAdd('demo', {
title: '用户管理',
content: '<iframe src="/user/list" frameborder="0"></iframe>',
id: 'user-list'
});
// 然后手动为刚生成的 tab 标签添加 data-url
$('.layui-tab-title .layui-this').attr('data-url', '/user/list');
// 或更稳妥的做法：在 tabAdd 后通过 id 定位并设置
$('.layui-tab-title li[lay-id="user-list"]').attr('data-url', '/user/list');
2. 监听 tab 标签的右键事件
利用事件委托监听 `.layui-tab-title li` 的 `contextmenu`（右键）事件，阻止默认菜单，并读取 `data-url`：
// 注意：需确保 DOM 已渲染完成（如放在 tabAdd 后或使用 element.on）
$(document).on('contextmenu', '.layui-tab-title li', function(e) {
e.preventDefault(); // 阻止默认右键菜单
const url = $(this).data('url');
if (url) {
copyToClipboard(url);
}
});
3. 实现复制到剪贴板函数
使用现代浏览器支持的 navigator.clipboard.writeText，兼容性好且无需 input 模拟：
function copyToClipboard(text) {
if (navigator.clipboard) {
navigator.clipboard.writeText(text).then(() => {
layer.msg('链接已复制', {icon: 1});
}).catch(err => {
console.error('复制失败:', err);
layer.msg('复制失败，请手动复制', {icon: 2});
});
} else {
// 降级方案：创建临时 input 复制
const input = document.createElement('input');
input.value = text;
document.body.appendChild(input);
input.select();
document.execCommand('copy');
document.body.removeChild(input);
layer.msg('链接已复制', {icon: 1});
}
}
4. 补充说明与注意事项
实际使用中需注意以下几点：
- 如果 tab 内容是 iframe，data-url 应存 iframe 的 src，不是父页面地址
- 若 tab 是纯 HTML 片段（非 iframe），可存路由路径（如 `/home`），由前端路由统一处理
- 动态添加 tab 后，务必同步设置 data-url，否则右键无法获取链接
- 建议在 `element.tabChange` 回调里更新当前 active tab 的 data-url，避免切换后失效
