邂逅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个类的样式切换可以实现简单的动画效果。具体可查阅官网