模拟elementUI或使用自定义属性简单封装对话框

前言

　　现在前端框架有许多的UI框架可以选择，但是样式或者功能不一定是我们项目中想要的，因此很多时候需要自己封装。此篇文件简单介绍一下利用自定义标签或者自定义扩展属性来封装UI组件，方便项目的其他地方复用，如果要封装其他例如分页功能、按钮、动画等等也是一样的，这里主要讲思路，大家完全可以举一反三。

一、自定义标签

　　例如elmentUI的标签都是el-开头

  <el-dialog title="对话框">
    <span class="dialog-body">这是一段信息</span>
    <span class="dialog-footer">
      <el-button>取消</el-button>
      <el-button type="primary">确定</el-button>
    </span>
  </el-dialog>

　　js去读取并替换为浏览器可以识别解析的标签（这里用jq写会更方便，不过我懒得引入了）：

let dialog = document.getElementsByTagName("el-dialog")[0];
dialog.outerHTML = `<div class="el-dialog">
<h3 class="dialog-header">${dialog.title}</h3>
<span class="dialog-body">${dialog.children[0].textContent}</span><span class="dialog-footer">
  <button class="el-button">${dialog.children[1].children[0].textContent}</button>
  <button class="el-button el-button-${dialog.children[1].children[1].attributes[0].value}">${dialog.children[1].children[1].textContent}</button>
</span></div>`;

　　效果图：

二、自定义扩展属性

　　data-开头，设置属性值或内容，然后标签替换

  <div class="el-dialog" data-title="自定义属性对话框">
    <span class="dialog-body">这是一段信息</span>
    <span class="dialog-footer">
      <button class="el-button">取消</button>
      <button class="el-button el-button-primary">确定</button>
    </span>
  </div>

　　js部分元素.dataset.属性来读取：

let dialog2 = document.getElementsByClassName("el-dialog")[1];
let h3 = document.createElement("h3");
h3.setAttribute("class","dialog-header");
h3.innerHTML = dialog2.dataset.title;
dialog2.insertBefore(h3,dialog2.children[0]);

　　效果图：

　　样式写的比较简单，dom元素操作也很单一，大家可以换jq操作会更加方便，这里主要讲思路。

　　项目源代码：https://github.com/13632756286/user-defined