在 Layui 中实现复制链接功能
2024/12/12 17:23 教程知识 阅读：1343 评论：0

Layui 是一个非常流行的前端 UI 框架，它提供了丰富的组件和插件来简化前端开发工作。要在 Layui 中实现复制链接功能，可以使用 Layui 的 layer 提示框组件和原生的 JavaScript 来实现。

以下是一个简单的示例，展示如何使用 Layui 实现点击按钮复制链接到剪贴板，并给用户一个提示：

首先，确保你已经引入了 Layui 的 CSS 和 JavaScript 文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui 复制链接示例</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-v2.5.7/dist/css/layui.css">
</head>
<body>

<!-- 你的 HTML 内容 -->
<button id="copyBtn" class="layui-btn layui-btn-normal">复制链接</button>

<!-- 引入 Layui 的 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/layui-v2.5.7/dist/layui.js"></script>
<script>
  // 等待 DOM 完全加载
  document.addEventListener('DOMContentLoaded', function() {
    // 获取按钮元素
    var copyBtn = document.getElementById('copyBtn');
    // 定义要复制的链接
    var link = 'https://www.example.com';

    // 监听按钮点击事件
    copyBtn.addEventListener('click', function() {
      // 创建一个临时的 textarea 元素
      var textarea = document.createElement('textarea');
      textarea.value = link;
      document.body.appendChild(textarea);

      // 选中并复制内容
      textarea.select();
      document.execCommand('copy');

      // 移除临时的 textarea 元素
      document.body.removeChild(textarea);

      // 使用 layer 提示复制成功
      layer.msg('链接已复制到剪贴板', {icon: 1});
    });
  });
</script>

</body>
</html>

代码说明：

1.引入 Layui‌：

  • 引入 Layui 的 CSS 文件来应用样式。

  • 引入 Layui 的 JavaScript。

Layui‌ 1 CSS 2 JavaScript 5
上一篇 AI：当下的变革与挑战 下一篇 为网站或应用添加Web Share API实现社交分享功能