feat: update alert
tangjinzhou
parent
d0c839ebae
commit
2ab5d86672
|
|
@ -1,5 +1,5 @@
|
|||
module.exports = {
|
||||
dev: {
|
||||
componentName: 'affix', // dev components
|
||||
componentName: 'alert', // dev components
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
|
|||
</svg></i><span class="ant-alert-message">Warning text</span><span class="ant-alert-description"></span></div> <br>
|
||||
<div data-show="true" class="ant-alert ant-alert-warning ant-alert-banner ant-alert-closable"><i aria-label="icon: exclamation-circle" class="ant-alert-icon anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
|
||||
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"></path>
|
||||
</svg></i><span class="ant-alert-message">Very long warning text warning text text text text text text text</span><span class="ant-alert-description"></span><a class="ant-alert-close-icon"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
|
||||
</svg></i><span class="ant-alert-message">Very long warning text warning text text text text text text text</span><span class="ant-alert-description"></span><a type="button" tabindex="0" class="ant-alert-close-icon"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
|
||||
<path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
|
||||
</svg></i></a></div> <br>
|
||||
<div data-show="true" class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-banner"><span class="ant-alert-message">Warning text without icon</span><span class="ant-alert-description"></span></div> <br>
|
||||
|
|
@ -21,16 +21,16 @@ exports[`renders ./components/alert/demo/basic.md correctly 1`] = `<div data-sho
|
|||
|
||||
exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
|
||||
<div>
|
||||
<div data-show="true" class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-closable"><span class="ant-alert-message">Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text</span><span class="ant-alert-description"></span><a class="ant-alert-close-icon"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
|
||||
<div data-show="true" class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-closable"><span class="ant-alert-message">Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text</span><span class="ant-alert-description"></span><a type="button" tabindex="0" class="ant-alert-close-icon"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
|
||||
<path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
|
||||
</svg></i></a></div>
|
||||
<div data-show="true" class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon ant-alert-closable"><span class="ant-alert-message">Error Text</span><span class="ant-alert-description">Error Description Error Description Error Description Error Description Error Description Error Description</span><a class="ant-alert-close-icon"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
|
||||
<div data-show="true" class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon ant-alert-closable"><span class="ant-alert-message">Error Text</span><span class="ant-alert-description">Error Description Error Description Error Description Error Description Error Description Error Description</span><a type="button" tabindex="0" class="ant-alert-close-icon"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
|
||||
<path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
|
||||
</svg></i></a></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/alert/demo/close-text.md correctly 1`] = `<div data-show="true" class="ant-alert ant-alert-info ant-alert-no-icon ant-alert-closable"><span class="ant-alert-message">Info Text</span><span class="ant-alert-description"></span><a class="ant-alert-close-icon">Close Now</a></div>`;
|
||||
exports[`renders ./components/alert/demo/close-text.md correctly 1`] = `<div data-show="true" class="ant-alert ant-alert-info ant-alert-no-icon ant-alert-closable"><span class="ant-alert-message">Info Text</span><span class="ant-alert-description"></span><a type="button" tabindex="0" class="ant-alert-close-icon"><span class="ant-alert-close-text">Close Now</span></a></div>`;
|
||||
|
||||
exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
|
||||
<div>
|
||||
|
|
@ -92,7 +92,7 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
|
|||
|
||||
exports[`renders ./components/alert/demo/smooth-closed.md correctly 1`] = `
|
||||
<div>
|
||||
<div data-show="true" class="ant-alert ant-alert-success ant-alert-no-icon ant-alert-closable"><span class="ant-alert-message">Alert Message Text</span><span class="ant-alert-description"></span><a class="ant-alert-close-icon"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
|
||||
<div data-show="true" class="ant-alert ant-alert-success ant-alert-no-icon ant-alert-closable"><span class="ant-alert-message">Alert Message Text</span><span class="ant-alert-description"></span><a type="button" tabindex="0" class="ant-alert-close-icon"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
|
||||
<path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
|
||||
</svg></i></a></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,10 +28,10 @@ describe('Alert', () => {
|
|||
},
|
||||
});
|
||||
wrapper.find('.ant-alert-close-icon').trigger('click');
|
||||
expect(onClose).toBeCalled();
|
||||
expect(onClose).toHaveBeenCalled();
|
||||
jest.runAllTimers();
|
||||
wrapper.vm.$refs.alert.animationEnd();
|
||||
expect(afterClose).toBeCalled();
|
||||
expect(afterClose).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
describe('data and aria props', () => {
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
## API
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| afterClose | Called when close animation is finished | () => void | - |
|
||||
| banner | Whether to show as banner | boolean | false |
|
||||
| closable | Whether Alert can be closed | boolean | - |
|
||||
| closeText | Close text to show | string\|slot | - |
|
||||
| description | Additional content of Alert | string\|slot | - |
|
||||
| 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` |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| afterClose | Called when close animation is finished | () => void | - | - |
|
||||
| banner | Whether to show as banner | boolean | false | - |
|
||||
| closable | Whether Alert can be closed | boolean | - | - |
|
||||
| closeText | Close text to show | string\|slot | - | - |
|
||||
| description | Additional content of Alert | string\|slot | - | - |
|
||||
| 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` | - |
|
||||
|
||||
### events
|
||||
|
||||
| Events Name | Description | Arguments |
|
||||
| ----------- | ----------------------------- | ----------------------- |
|
||||
| close | Callback when Alert is closed | (e: MouseEvent) => void |
|
||||
| Events Name | Description | Arguments | Version |
|
||||
| ----------- | ----------------------------- | ----------------------- | ------- |
|
||||
| close | Callback when Alert is closed | (e: MouseEvent) => void | - |
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { getComponentFromProp, isValidElement } from '../_util/props-util';
|
|||
import { cloneElement } from '../_util/vnode';
|
||||
import { ConfigConsumerProps } from '../config-provider';
|
||||
import Base from '../base';
|
||||
|
||||
function noop() {}
|
||||
export const AlertProps = {
|
||||
/**
|
||||
|
|
@ -42,7 +43,7 @@ const Alert = {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
closing: true,
|
||||
closing: false,
|
||||
closed: false,
|
||||
};
|
||||
},
|
||||
|
|
@ -56,14 +57,14 @@ const Alert = {
|
|||
dom.style.height = `${dom.offsetHeight}px`;
|
||||
|
||||
this.setState({
|
||||
closing: false,
|
||||
closing: true,
|
||||
});
|
||||
this.$emit('close', e);
|
||||
},
|
||||
animationEnd() {
|
||||
this.setState({
|
||||
closing: false,
|
||||
closed: true,
|
||||
closing: true,
|
||||
});
|
||||
this.afterClose();
|
||||
},
|
||||
|
|
@ -84,8 +85,7 @@ const Alert = {
|
|||
// 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':
|
||||
|
|
@ -117,7 +117,7 @@ const Alert = {
|
|||
|
||||
const alertCls = classNames(prefixCls, {
|
||||
[`${prefixCls}-${type}`]: true,
|
||||
[`${prefixCls}-close`]: !closing,
|
||||
[`${prefixCls}-closing`]: closing,
|
||||
[`${prefixCls}-with-description`]: !!description,
|
||||
[`${prefixCls}-no-icon`]: !showIcon,
|
||||
[`${prefixCls}-banner`]: !!banner,
|
||||
|
|
@ -125,8 +125,12 @@ const Alert = {
|
|||
});
|
||||
|
||||
const closeIcon = closable ? (
|
||||
<a onClick={this.handleClose} class={`${prefixCls}-close-icon`}>
|
||||
{closeText || <Icon type="close" />}
|
||||
<a type="button" onClick={this.handleClose} class={`${prefixCls}-close-icon`} tabIndex={0}>
|
||||
{closeText ? (
|
||||
<span class={`${prefixCls}-close-text`}>{closeText}</span>
|
||||
) : (
|
||||
<Icon type="close" />
|
||||
)}
|
||||
</a>
|
||||
) : null;
|
||||
|
||||
|
|
@ -145,7 +149,7 @@ const Alert = {
|
|||
});
|
||||
return closed ? null : (
|
||||
<transition {...transitionProps}>
|
||||
<div v-show={closing} class={alertCls} data-show={closing}>
|
||||
<div v-show={!closing} class={alertCls} data-show={!closing}>
|
||||
{showIcon ? iconNode : null}
|
||||
<span class={`${prefixCls}-message`}>{message}</span>
|
||||
<span class={`${prefixCls}-description`}>{description}</span>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| afterClose | 关闭动画结束后触发的回调函数 | () => void | - |
|
||||
| banner | 是否用作顶部公告 | boolean | false |
|
||||
| closable | 默认不显示关闭按钮 | boolean | 无 |
|
||||
| closeText | 自定义关闭按钮 | string\|slot | 无 |
|
||||
| description | 警告提示的辅助性文字介绍 | string\|slot | 无 |
|
||||
| icon | 自定义图标，`showIcon` 为 `true` 时有效 | vnode \| slot | - |
|
||||
| message | 警告提示内容 | string\|slot | 无 |
|
||||
| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true |
|
||||
| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| afterClose | 关闭动画结束后触发的回调函数 | () => void | - | - |
|
||||
| banner | 是否用作顶部公告 | boolean | false | - |
|
||||
| closable | 默认不显示关闭按钮 | boolean | 无 | - |
|
||||
| closeText | 自定义关闭按钮 | string\|slot | 无 | - |
|
||||
| description | 警告提示的辅助性文字介绍 | string\|slot | 无 | - |
|
||||
| icon | 自定义图标，`showIcon` 为 `true` 时有效 | vnode \| slot | - | - |
|
||||
| message | 警告提示内容 | string\|slot | 无 | - |
|
||||
| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true | - |
|
||||
| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` | - |
|
||||
|
||||
### 事件
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| -------- | -------------------- | ----------------------- |
|
||||
| close | 关闭时触发的回调函数 | (e: MouseEvent) => void |
|
||||
| 事件名称 | 说明 | 回调参数 | 版本 |
|
||||
| -------- | -------------------- | ----------------------- | ---- |
|
||||
| close | 关闭时触发的回调函数 | (e: MouseEvent) => void | - |
|
||||
|
|
|
|||
Loading…
Reference in New Issue