当前位置：首页 > JavaScript

js实现layui

2026-01-31 23:20:09JavaScript

使用原生JavaScript实现类似LayUI的功能

LayUI是一个经典的前端UI框架，以下通过原生JavaScript模拟其核心功能（如弹层、表单验证等），避免依赖库的使用。

弹层组件实现

创建基础弹层结构，通过CSS控制显示/隐藏：

function showLayer(options) {
  const { title = '提示', content = '', btn = ['确定'] } = options;
  const layerHTML = `
    <div class="layer-mask">
      <div class="layer-box">
        <div class="layer-title">${title}</div>
        <div class="layer-content">${content}</div>
        <div class="layer-footer">
          ${btn.map(text => `<button>${text}</button>`).join('')}
        </div>
      </div>
    </div>
  `;
  document.body.insertAdjacentHTML('beforeend', layerHTML);
}

// 调用示例
showLayer({
  content: '这是一个模拟弹层',
  btn: ['确认', '取消']
});

CSS样式需单独定义：

.layer-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 999;
}
.layer-box {
  width: 300px;
  background: white;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

表单验证模块

实现基础的非空验证和格式校验：

const formValidator = {
  rules: {
    required: value => value.trim() !== '',
    email: value => /^\w+@[a-z0-9]+\.[a-z]+$/i.test(value)
  },

  validate(formEl) {
    const inputs = formEl.querySelectorAll('[data-validate]');
    let isValid = true;

    inputs.forEach(input => {
      const rules = input.dataset.validate.split('|');
      for (let rule of rules) {
        if (!this.rules[rule](input.value)) {
          input.style.borderColor = 'red';
          isValid = false;
          break;
        }
      }
    });

    return isValid;
  }
};

// 使用示例
document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  if (formValidator.validate(this)) {
    // 提交逻辑
  }
});

HTML结构对应：

<input type="text" data-validate="required|email">

动态表格渲染

实现数据驱动表格渲染：

function renderTable(data, container) {
  const headers = Object.keys(data[0]);
  const headerHTML = `<tr>${headers.map(h => `<th>${h}</th>`).join('')}</tr>`;
  const bodyHTML = data.map(item => 
    `<tr>${headers.map(h => `<td>${item[h]}</td>`).join('')}</tr>`
  ).join('');

  container.innerHTML = `
    <table class="demo-table">
      <thead>${headerHTML}</thead>
      <tbody>${bodyHTML}</tbody>
    </table>
  `;
}

// 调用示例
renderTable([
  { id: 1, name: '张三' },
  { id: 2, name: '李四' }
], document.getElementById('table-container'));