前言

  现在前端框架有许多的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

模拟elementUI或使用自定义属性简单封装对话框的更多相关文章

  1. React Native之Fetch简单封装、获取网络状态

    1.Fetch的使用 fetch的使用非常简单,只需传入请求的url fetch('https://facebook.github.io/react-native/movies.json'); 当然是 ...

  2. 孤荷凌寒自学python第六十六天学习mongoDB的基本操作并进行简单封装5

    孤荷凌寒自学python第六十六天学习mongoDB的基本操作并进行简单封装5并学习权限设置 (完整学习过程屏幕记录视频地址在文末) 今天是学习mongoDB数据库的第十二天. 今天继续学习mongo ...

  3. 孤荷凌寒自学python第六十五天学习mongoDB的基本操作并进行简单封装4

    孤荷凌寒自学python第六十五天学习mongoDB的基本操作并进行简单封装4 (完整学习过程屏幕记录视频地址在文末) 今天是学习mongoDB数据库的第十一天. 今天继续学习mongoDB的简单操作 ...

  4. 孤荷凌寒自学python第六十四天学习mongoDB的基本操作并进行简单封装3

    孤荷凌寒自学python第六十四天学习mongoDB的基本操作并进行简单封装3 (完整学习过程屏幕记录视频地址在文末) 今天是学习mongoDB数据库的第十天. 今天继续学习mongoDB的简单操作, ...

  5. 孤荷凌寒自学python第六十三天学习mongoDB的基本操作并进行简单封装2

    孤荷凌寒自学python第六十三天学习mongoDB的基本操作并进行简单封装2 (完整学习过程屏幕记录视频地址在文末) 今天是学习mongoDB数据库的第九天. 今天继续学习mongoDB的简单操作, ...

  6. 孤荷凌寒自学python第六十二天学习mongoDB的基本操作并进行简单封装1

    孤荷凌寒自学python第六十二天学习mongoDB的基本操作并进行简单封装1 (完整学习过程屏幕记录视频地址在文末) 今天是学习mongoDB数据库的第八天. 今天开始学习mongoDB的简单操作, ...

  7. Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件

    封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...

  8. Android AsyncTask 深度理解、简单封装、任务队列分析、自定义线程池

    前言:由于最近在做SDK的功能,需要设计线程池.看了很多资料不知道从何开始着手,突然发现了AsyncTask有对线程池的封装,so,就拿它开刀,本文将从AsyncTask的基本用法,到简单的封装,再到 ...

  9. FMDB简单封装和使用

    工具:火狐浏览器+SQLite Manager插件 ; Xcode; FMDB库; 效果: 项目地址: https://github.com/sven713/PackFMDB 主要参考这两篇博客: 1 ...

随机推荐

  1. Java实现 LeetCode 225 用队列实现栈

    225. 用队列实现栈 使用队列实现栈的下列操作: push(x) – 元素 x 入栈 pop() – 移除栈顶元素 top() – 获取栈顶元素 empty() – 返回栈是否为空 注意: 你只能使 ...

  2. Java实现 LeetCode 4 寻找两个有序数组的中位数

    寻找两个有序数组的中位数 给定两个大小为 m 和 n 的有序数组 nums1 和 nums2. 请你找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O(log(m + n)). 你可以假设 n ...

  3. Python 网络爬虫基本概念篇

    爬虫的概念 网络爬虫(又称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.这是百度百科对爬虫的定义,其实,说简单点,爬虫 ...

  4. 倍增法求LCA代码加详细注释

    #include <iostream> #include <vector> #include <algorithm> #define MAXN 100 //2^MA ...

  5. Layui 实现一个高级筛选功能

    基于layui写的一个高级搜索(筛选)功能.效果图: 是一位萌新,所有写的有点儿乱.(放在上面,供新手们参考,也是自己做一个记录.)代码如下: <!DOCTYPE html PUBLIC &qu ...

  6. Android开发之StrictMode

    StrictMode简介 Android开发者官网对StrictMode的介绍 StrictMode类是Android 2.3(API 9)引入的一个工具类 用来帮助开发者发现代码中一些不规范的问题, ...

  7. MyBatis使用模糊查询用户信息及log4j配置文件详解

    1.1 根据用户名称模糊查询用户信息 根据用户名模糊查询用户信息,只需要我们更改映射文件中的sql语句.其他的内容跟上一篇的内容是一样的 1.2添加根据用户名称模糊查询用户信息的sql语句 实例中是查 ...

  8. 如何在centos7安装dnf软件包

    想在自己的笔记本CentOS7上安装dnf玩玩儿,但是根据百度出来的方法没有成功. yum install epel-release -y yum install dnf 现在将解决办法转载过来,如下 ...

  9. [CF453D]Little Pony and Elements of Harmony

    题目   点这里看题目. 分析   设\(count(x)\)为\(x\)的二进制中\(1\)的个数.因此\(f(u,v)=count(u\oplus v)\)   看一看每次转移,我们发现最不友好的 ...

  10. JS遍历对象的几种方法

    几天前一个小伙伴问我 Object.getOwnPropertyNames() 是干什么用的 平时还真没有使用到这个方法,一时不知如何回答 从方法名称来分析,应该是返回的是对象自身属性名组成的数组 那 ...