本文深入探讨了Vue组件库ElementUI中的Alert组件，分析了其结构、功能及实现方式，包括如何设置主题、标题、类型、图标、居中效果等。通过源码分析，了解组件的布局、图标、标题、描述信息和关闭按钮的实现细节，以及Vue的transition动画和绑定样式。同时，讨论了组件的可定制性和关闭事件处理。
邂逅Alert
ElementUI 作为国内比较火的一个VUe框架，主要原因是其中的数组件满足了日常开发的大部分需求，在写Vue项目的时候，经常会用Alert 组件与用户进行交互。作为一名在Vue学习之路上的后生小辈，源码分析可以提高我们项目开发的意识，今天我就来解剖一下ElementUI 中的Alert组件，在分析它的源码之前，让我们先看看它完整的功能有哪些？ElementUI-Alert
熟悉Alert
看完Alert的参数，我们大概可以知道Alert 的一些功能，它可以设置主题，标题，类型，图标，居中效果，是否可关闭，关闭按钮自定义文本文本，关闭触发的事件。写下来我们就开始解剖Alert组件
Alert的结构分析
transition 显示变换效果
外层div盒子用于处理Alert整体的居中情况
i标签用于显示Alert的图标样式
内层div 展示Alert 的主体内容区域
span 标签用于设置alert的标题
两个p标签用于展示描述信息
最后的i标签用于显示关闭按钮或关闭文本
实现
transition
Vue提供了封装的transition组件，在进入/离开的过程中，会产生6个类，通过6个类的样式切换可以实现简单的动画效果。具体可查阅官网
最低0.47元/天 解锁文章
1001
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
