javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(components): [alert] (#10373)

Browse Source 
* docs(components): [alert]

* Update alert doc.
* Add comment for alert props.
* Reorganize code.
This commit is contained in:
Jeremy
2022-11-03 20:38:41 +08:00
committed by GitHub
parent 6524a2df60
commit 8ccb7df2df
4 changed files with 35 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
docs/en-US/component/alert.md
View File

@@ -79,22 +79,22 @@ alert/icon-description
### Alert Attributes
| Name | Description | Type | Default | Required |
| ------------- | --------------------------------- | --------------------------------------------- | --------- | -------- |
| `title` | alert title. | `string` | — | No |
| `type` | alert type. | `'success' \| 'warning' \| 'info' \| 'error'` | `'info'` | No |
| `description` | descriptive text. | `string` | — | No |
| `closable` | whether closable or not. | `boolean` | `true` | No |
| `center` | whether to center the text. | `boolean` | `false` | No |
| `close-text` | customized close button text. | `string` | — | No |
| `show-icon` | whether a type icon is displayed. | `boolean` | `false` | No |
| `effect` | theme style. | `'light' \| 'dark'` | `'light'` | No |
| Name | Description | Type | Default | Required |
| ------------- | ---------------------------------------- | -------------------------------------------------------------- | --------- | -------- |
| `title` | alert title. | `string` | — | No |
| `type` | alert type. | <EnumType :values="['success', 'warning', 'info', 'error']" /> | `info` | No |
| `description` | descriptive text. | `string` | — | No |
| `closable` | whether alert can be dismissed. | `boolean` | `true` | No |
| `center` | whether content is placed in the center. | `boolean` | `false` | No |
| `close-text` | customized close button text. | `string` | — | No |
| `show-icon` | whether a type icon is displayed. | `boolean` | `false` | No |
| `effect` | theme style. | <EnumType :values="['light', 'dark']" /> | `'light'` | No |
### Alert Events
| Name | Description | Type |
| ------- | ----------------------------- | --------------------------- |
| `close` | trigger when alert is closed. | `(evt: MouseEvent) => void` |
| Name | Description | Type |
| ------- | ----------------------------- | -------------------------------------------------- |
| `close` | trigger when alert is closed. | <FunctionType :params="[['evt', 'MouseEvent']]" /> |
### Alert Slots

1
packages/components/alert/index.ts
View File

@@ -6,3 +6,4 @@ export const ElAlert = withInstall(Alert)
export default ElAlert
export * from './src/alert'
export type { AlertInstance } from './src/instance'

21
packages/components/alert/src/alert.ts
View File

@@ -1,10 +1,12 @@
import { TypeComponentsMap, buildProps, keysOf } from '@element-plus/utils'
import type { ExtractPropTypes } from 'vue'
import type Alert from './alert.vue'
export const alertEffects = ['light', 'dark'] as const
export const alertProps = buildProps({
/**
* @description alert title.
*/
title: {
type: String,
default: '',
@@ -13,20 +15,35 @@ export const alertProps = buildProps({
type: String,
default: '',
},
/**
* @description alert type.
*/
type: {
type: String,
values: keysOf(TypeComponentsMap),
default: 'info',
},
/**
* @description whether alert can be dismissed.
*/
closable: {
type: Boolean,
default: true,
},
/**
* @description text for replacing x button
*/
closeText: {
type: String,
default: '',
},
/**
* @description whether show icon
*/
showIcon: Boolean,
/**
* @description should content be placed in center.
*/
center: Boolean,
effect: {
type: String,
@@ -40,5 +57,3 @@ export const alertEmits = {
close: (evt: MouseEvent) => evt instanceof MouseEvent,
}
export type AlertEmits = typeof alertEmits
export type AlertInstance = InstanceType<typeof Alert>

3
packages/components/alert/src/instance.ts Normal file
View File

@@ -0,0 +1,3 @@
import type Alert from './alert.vue'
export type AlertInstance = InstanceType<typeof Alert>