Layui 中点击按钮复制链接
在 layui 中,要实现点击按钮复制链接的功能,可以使用 layui
的 layer
模块中的 msg
方法来显示提示信息,以及使用原生 JavaScript 的 Clipboard API
来实现复制文本到剪贴板的功能。
以下是实现这个功能的示例代码:
HTML 部分:
<button class="layui-btn" id="copyBtn">复制链接</button>
JavaScript 部分:
// 确保页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
// 获取按钮元素
var copyBtn = document.getElementById('copyBtn');
// 为按钮绑定点击事件
copyBtn.addEventListener('click', function() {
// 要复制的文本内容
var textToCopy = 'https://www.yourwebsite.com/your-page';
// 使用 Clipboard API 复制文本到剪贴板
navigator.clipboard.writeText(textToCopy).then(function() {
// 使用 layui 的 layer 显示复制成功的提示
layui.layer.msg('链接已复制到剪贴板', {icon: 1, time: 1000});
}).catch(function(error) {
// 如果复制失败,显示错误信息
layui.layer.msg('复制失败', {icon: 5, time: 1000});
});
});
});
确保在页面中引入了 layui
的 CSS 和 JavaScript 文件。
这段代码首先监听按钮的点击事件,然后使用 navigator.clipboard.writeText()
方法将指定的文本复制到剪贴板。操作成功则使用 layui.layer.msg()
显示提示信息,失败则显示失败信息。
评论已关闭