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 时触发的事件。

相关推荐
时间sk6 分钟前
CSS——25.伪元素1(“::first-letter ,::first-line ”)
前端·javascript·css
DarkFallYou10 分钟前
E10鸿蒙App
java·开发语言·前端
会跑的兔子12 分钟前
鸿蒙路由通信(路由跳转/参数传递)
前端·华为·harmonyos
晚风予星21 分钟前
Vue-Cli/Rsbuild动态代理IP地址无需重新启动/依靠热更新
前端·vue.js
low神23 分钟前
在macOS上安装Flutter和环境配置
前端·flutter·react native·macos·前端框架
高 朗25 分钟前
【Vue】MacOS从0开始创建一个前端Vue项目并集成AntDesignVue
前端·vue.js·macos·anti-design-vue
前端杂货铺1 小时前
Electron快速入门——跨平台桌面端应用开发框架
前端·javascript·electron
_Jyann_1 小时前
docker安装windows desktop后打开失败
前端
互联网动态分析1 小时前
Tomcat详解
前端·firefox
长风清留扬1 小时前
小程序安全机制与隐私保护策略探讨
javascript·css·微信小程序·小程序·apache·html5