模拟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}
`;

  效果图:

模拟elementUI或使用自定义属性简单封装对话框_第1张图片

 

 

 

 二、自定义扩展属性

  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]);

  效果图:

  模拟elementUI或使用自定义属性简单封装对话框_第2张图片

 

 

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

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

你可能感兴趣的:(模拟elementUI或使用自定义属性简单封装对话框)