feat: update alert
tangjinzhou
parent
6de4c38a5f
commit
02a0012dcb
|
|
@ -21,6 +21,7 @@ Please note that Affix should not cover other content on the page, especially wh
|
|||
export default {
|
||||
category: 'Components',
|
||||
subtitle: '固钉',
|
||||
zhType: '导航',
|
||||
type: 'Navigation',
|
||||
title: 'Affix',
|
||||
render () {
|
||||
|
|
|
|||
|
|
@ -147,8 +147,8 @@ const Affix = {
|
|||
},
|
||||
|
||||
updatePosition (e) {
|
||||
let { offsetTop } = this
|
||||
const { offsetBottom, offset, target = getDefaultTarget } = this
|
||||
let { offsetTop } = this
|
||||
const targetNode = target()
|
||||
|
||||
// Backwards support
|
||||
|
|
|
|||
|
|
@ -0,0 +1,63 @@
|
|||
<cn>
|
||||
#### 自定义图标
|
||||
可口的图标让信息类型更加醒目。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Custom Icon
|
||||
Decent icon make information more clear and more friendly.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-alert message="showIcon = false" type="success" >
|
||||
<a-icon type="smile" slot="icon" />
|
||||
</a-alert>
|
||||
<a-alert message="Success Tips" type="success" showIcon >
|
||||
<a-icon type="smile" slot="icon" />
|
||||
</a-alert>
|
||||
<a-alert message="Informational Notes" type="info" showIcon >
|
||||
<a-icon type="smile" slot="icon" />
|
||||
</a-alert>
|
||||
<a-alert message="Warning" type="warning" showIcon >
|
||||
<a-icon type="smile" slot="icon" />
|
||||
</a-alert>
|
||||
<a-alert message="Error" type="error" showIcon >
|
||||
<a-icon type="smile" slot="icon" />
|
||||
</a-alert>
|
||||
<a-alert
|
||||
message="Success Tips"
|
||||
description="Detailed description and advices about successful copywriting."
|
||||
type="success"
|
||||
showIcon
|
||||
>
|
||||
<a-icon type="smile" slot="icon" />
|
||||
</a-alert>
|
||||
<a-alert
|
||||
message="Informational Notes"
|
||||
description="Additional description and informations about copywriting."
|
||||
type="info"
|
||||
showIcon
|
||||
>
|
||||
<a-icon type="smile" slot="icon" />
|
||||
</a-alert>
|
||||
<a-alert
|
||||
message="Warning"
|
||||
description="This is a warning notice about copywriting."
|
||||
type="warning"
|
||||
showIcon
|
||||
>
|
||||
<a-icon type="smile" slot="icon" />
|
||||
</a-alert>
|
||||
<a-alert
|
||||
message="Error"
|
||||
description="This is an error message about copywriting."
|
||||
type="error"
|
||||
showIcon
|
||||
>
|
||||
<a-icon type="smile" slot="icon" />
|
||||
</a-alert>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -29,6 +29,7 @@ export default {
|
|||
category: 'Components',
|
||||
subtitle: '警告提示',
|
||||
type: 'Feedback',
|
||||
zhType: '反馈',
|
||||
title: 'Alert',
|
||||
render () {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<cn>
|
||||
#### 平滑地卸载
|
||||
平滑、自然的卸载提示
|
||||
平滑、自然的卸载提示。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
| closable | Whether Alert can be closed | boolean | - |
|
||||
| closeText | Close text to show | string\|slot | - |
|
||||
| description | Additional content of Alert | string\|slot | - |
|
||||
| iconType | Icon type, effective when `showIcon` is `true` | string | - |
|
||||
| icon | Custom icon, effective when `showIcon` is `true` | vnode \| slot | - |
|
||||
| message | Content of Alert | string\|slot | - |
|
||||
| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true |
|
||||
| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` |
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ import classNames from 'classnames'
|
|||
import BaseMixin from '../_util/BaseMixin'
|
||||
import PropTypes from '../_util/vue-types'
|
||||
import getTransitionProps from '../_util/getTransitionProps'
|
||||
import { getComponentFromProp } from '../_util/props-util'
|
||||
import { getComponentFromProp, isValidElement } from '../_util/props-util'
|
||||
import { cloneElement } from '../_util/vnode'
|
||||
function noop () { }
|
||||
export const AlertProps = {
|
||||
/**
|
||||
|
|
@ -28,6 +29,7 @@ export const AlertProps = {
|
|||
iconType: PropTypes.string,
|
||||
prefixCls: PropTypes.string,
|
||||
banner: PropTypes.bool,
|
||||
icon: PropTypes.any,
|
||||
}
|
||||
|
||||
const Alert = {
|
||||
|
|
@ -69,11 +71,14 @@ const Alert = {
|
|||
const closeText = getComponentFromProp(this, 'closeText')
|
||||
const description = getComponentFromProp(this, 'description')
|
||||
const message = getComponentFromProp(this, 'message')
|
||||
const icon = getComponentFromProp(this, 'icon')
|
||||
// banner模式默认有 Icon
|
||||
showIcon = banner && showIcon === undefined ? true : showIcon
|
||||
// banner模式默认为警告
|
||||
type = banner && type === undefined ? 'warning' : type || 'info'
|
||||
|
||||
let iconTheme = 'filled'
|
||||
// should we give a warning?
|
||||
// warning(!iconType, `The property 'iconType' is deprecated. Use the property 'icon' instead.`);
|
||||
if (!iconType) {
|
||||
switch (type) {
|
||||
case 'success':
|
||||
|
|
@ -83,7 +88,7 @@ const Alert = {
|
|||
iconType = 'info-circle'
|
||||
break
|
||||
case 'error':
|
||||
iconType = 'cross-circle'
|
||||
iconType = 'close-circle'
|
||||
break
|
||||
case 'warning':
|
||||
iconType = 'exclamation-circle'
|
||||
|
|
@ -94,7 +99,7 @@ const Alert = {
|
|||
|
||||
// use outline icon in alert with description
|
||||
if (description) {
|
||||
iconType += '-o'
|
||||
iconTheme = 'outlined'
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -113,9 +118,21 @@ const Alert = {
|
|||
|
||||
const closeIcon = closable ? (
|
||||
<a onClick={this.handleClose} class={`${prefixCls}-close-icon`}>
|
||||
{closeText || <Icon type='cross' />}
|
||||
{closeText || <Icon type='close' />}
|
||||
</a>
|
||||
) : null
|
||||
|
||||
const iconNode = icon && (
|
||||
isValidElement(icon)
|
||||
? cloneElement(
|
||||
icon,
|
||||
{
|
||||
class: `${prefixCls}-icon`,
|
||||
},
|
||||
) : <span class={`${prefixCls}-icon`}>{icon}</span>) || (
|
||||
<Icon class={`${prefixCls}-icon`} type={iconType} theme={iconTheme} />
|
||||
)
|
||||
|
||||
const transitionProps = getTransitionProps(`${prefixCls}-slide-up`, {
|
||||
appear: false,
|
||||
afterLeave: this.animationEnd,
|
||||
|
|
@ -123,7 +140,7 @@ const Alert = {
|
|||
return closed ? null : (
|
||||
<transition {...transitionProps}>
|
||||
<div v-show={closing} class={alertCls} data-show={closing}>
|
||||
{showIcon ? <Icon class={`${prefixCls}-icon`} type={iconType} /> : null}
|
||||
{showIcon ? iconNode : null}
|
||||
<span class={`${prefixCls}-message`}>{message}</span>
|
||||
<span class={`${prefixCls}-description`}>{description}</span>
|
||||
{closeIcon}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
| closable | 默认不显示关闭按钮 | boolean | 无 |
|
||||
| closeText | 自定义关闭按钮 | string\|slot | 无 |
|
||||
| description | 警告提示的辅助性文字介绍 | string\|slot | 无 |
|
||||
| iconType | 自定义图标类型，`showIcon` 为 `true` 时有效 | string | - |
|
||||
| icon | 自定义图标，`showIcon` 为 `true` 时有效 | vnode \| slot | - |
|
||||
| message | 警告提示内容 | string\|slot | 无 |
|
||||
| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true |
|
||||
| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` |
|
||||
|
|
|
|||
Loading…
Reference in New Issue