模拟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 = `

${dialog.title}
${dialog.children[0].textContent}
  ${dialog.children[1].children[0].textContent}
  ${dialog.children[1].children[1].textContent}
`;

　　效果图：

 

 

 

 二、自定义扩展属性

　　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