element-ui alert 组件源码分享

今日简单分享 alert 组件源码实现,主要从以下四个方面来分享:

1、alert 组件的页面结构

2、alert 组件的属性

3、alert 组件的 slot

4、alert 组件的方法

一、alert 组件的页面结构

二、alert 组件的属性

2.1 title 属性,标题,类型 string,无默认值。

2.2 type 属性,主题,类型 string,success/warning/info/error,默认 info。

2.3 description 属性,辅助性文字。也可通过默认 slot 传入,类型 string,无默认值。

组件使用如下:

展示效果如下:

2.4 closable 属性,是否可关闭,类型 boolean,默认 true。

2.5 center 属性,文字是否居中,类型 boolean,默认 true。

2.6 close-text 属性,关闭按钮自定义文本,类型 string,无默认值。

组件使用如下:

展示效果如下:

2.7 show-icon 属性,是否显示图标,类型 boolean,默认 false。

组件使用如下:

展示效果如下:

2.8 effect 属性,选择提供的主题,类型 string,light / dark,默认 light。

三、alert 组件的 slot

3.1 title 标题的内容。

组件使用如下:

展示效果如下:

四、alert 组件的方法

4.1 close 关闭 alert 时触发的事件。

相关推荐
孙俊熙30 分钟前
react中封装一个预览.doc和.docx文件的组件
前端·react.js·前端框架
wuhen_n1 小时前
CSS元素动画篇:基于当前位置的变换动画(四)
前端·css·html·css3·html5
by————组态1 小时前
基于web组态优化策略研究
大数据·前端·物联网·低代码·数学建模·自动化
朝阳391 小时前
Electron Forge【实战】自定义菜单 -- 顶部菜单 vs 右键快捷菜单
前端·javascript·electron
叶浩成5201 小时前
a-upload组件实现文件的上传——.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.txt
javascript·pdf·powerpoint
程序员Bears1 小时前
现代前端工具链深度解析:从包管理到构建工具的完整指南
前端·python·visual studio code
agenIT1 小时前
Webpack 相关用法与总结
前端·webpack·node.js
小梦想的博客1 小时前
将uni-app前端项目发布到微信小程序体验版
前端·微信小程序·uni-app
inksci2 小时前
watch 数组 Vue 3
前端·javascript·vue.js
2301_799404912 小时前
深入解析 npm 与 Yarn:Node.js 包管理工具对比与选型指南
前端·npm·node.js