el-alert获取参数
时间: 2024-06-08 18:04:39 浏览: 117
`el-alert` 是 Element UI 中的一个轻量级提示框组件,用于显示简单的消息或警告。如果你想在创建 `el-alert` 的时候传入参数,可以通过它的属性来设置。以下是几个常用的参数:
1. **message** 或者 **title**: 这是alert的内容,可以是文字或HTML。
```html
<el-alert :message="yourMessage" type="info" />
```
2. **type**: 指定alert的类型,如 'success', 'warning', 'error', 'info' 等。
```html
<el-alert type="warning">This is a warning message</el-alert>
```
3. **closable**: 是否显示关闭按钮,默认是true,可选值为布尔类型。
```html
<el-alert closable>Click to close</el-alert>
```
4. **show-icon**: 是否显示图标,如用于警告有叹号,成功有对勾等。
```html
<el-alert show-icon type="error"></el-alert>
```
5. **custom-class**: 可以自定义CSS类名,用于添加额外的样式。
```html
<el-alert :custom-class="{'my-custom-class': true}">Custom class example</el-alert>
```
6. **on-close**: 当用户点击关闭按钮时触发的回调函数,通常包含一个event对象。
```html
<el-alert @close="handleClose"></el-alert>
```
如果你有特定的参数想要传递,确保这些参数是Vue组件中数据对象的一部分,并在绑定时使用它们。例如:
```html
<template>
<el-alert :message="alertMessage" :type="alertType" @close="handleClose" />
</template>
<script>
export default {
data() {
return {
alertMessage: 'Hello from alert',
alertType: 'info',
};
},
methods: {
handleClose(event) {
console.log('Alert closed', event);
},
},
};
</script>
```
阅读全文