原生js造轮子之----仿ElementUI消息提示组件，含生命周期钩子

最新推荐文章于 2024-07-03 10:10:20 发布

codingWeb

最新推荐文章于 2024-07-03 10:10:20 发布

阅读量729

点赞数 1

分类专栏： js html css 文章标签：前端 javascript

本文链接：https://blog.csdn.net/fesfsefgs/article/details/106344142

版权

本文档将展示如何用原生JavaScript模仿ElementUI的消息提示组件，包括其生命周期钩子。通过实现这一组件，你可以理解其工作原理，并自定义所需的交互和样式。

摘要由CSDN通过智能技术生成

先来看看ElementUI消息提示组件

官网：

https://element.eleme.cn/#/zh-CN/component/message

在这里插入图片描述

我的效果：

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<style type="text/css">
			div,
			i,
			button {
    
				margin: 0;
				padding: 0;
			}
			
			/*预定义样式，通过js动态生成dom时，加上指定类名*/
			.dpn-message {
    
				font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif;
				font-size: 12px;
				z-index: 99999;
			}
			
			.dpn-message {
    
				box-sizing: border-box;
				position: fixed;
				top: -200px;
				left: 50%;
				transform: translateX(-50%);
				z-index: 99999;
				padding: 15px;
				padding-right: 32px;
				min-width: 20%;
				max-width: 50%;
				border-radius: 4px;
				transition: top .3s;
			}
			
			/*info 消息*/
			.dpn-message.dpn-info {
    
				background: #EDF2FC;
				border: 1px solid #EBEEF5;
				color: #909399;
			}
			
			/*success消息*/
			.dpn-message.dpn-success {
    
				background: #f0f9eb;
				border</

最低0.47元/天解锁文章

codingWeb

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
原生js造轮子之----仿ElementUI消息提示组件，含生命周期钩子

先来看看ElementUI消息提示组件官网：https://element.eleme.cn/#/zh-CN/component/message我的效果：代码如下：<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0
复制链接

扫一扫