mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(Notify): add type prop (#4237)
This commit is contained in:
neverland
GitHub
parent
ae53f9b58f
commit
10b52963b8
@ -1,5 +1,5 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { RED, WHITE } from '../utils/constant';
|
||||
import { WHITE } from '../utils/constant';
|
||||
import { inherit } from '../utils/functional';
|
||||
import { PopupMixin } from '../mixins/popup';
|
||||
import Popup from '../popup';
|
||||
@ -10,6 +10,7 @@ import { DefaultSlots } from '../utils/types';
|
||||
import { PopupMixinProps } from '../mixins/popup/type';
|
||||
|
||||
export type NotifyProps = PopupMixinProps & {
|
||||
type: 'primary' | 'success' | 'danger' | 'warning';
|
||||
color: string;
|
||||
message: string | number;
|
||||
duration: number;
|
||||
@ -37,7 +38,7 @@ function Notify(
|
||||
position="top"
|
||||
overlay={false}
|
||||
lockScroll={false}
|
||||
class={[bem(), props.className]}
|
||||
class={[bem([props.type]), props.className]}
|
||||
{...inherit(ctx, true)}
|
||||
>
|
||||
{props.message}
|
||||
@ -47,17 +48,18 @@ function Notify(
|
||||
|
||||
Notify.props = {
|
||||
...PopupMixin.props,
|
||||
background: String,
|
||||
className: null as any,
|
||||
message: [Number, String],
|
||||
getContainer: [String, Function],
|
||||
type: {
|
||||
type: String,
|
||||
default: 'danger'
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: WHITE
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: RED
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 3000
|
||||
|
||||
@ -17,13 +17,27 @@ Vue.use(Notify);
|
||||
Notify('Notify Message');
|
||||
```
|
||||
|
||||
### Custom Config
|
||||
### Notify Type
|
||||
|
||||
```js
|
||||
Notify({ type: 'primary', message: 'Notify Message' });
|
||||
Notify({ type: 'success', message: 'Notify Message' });
|
||||
Notify({ type: 'danger', message: 'Notify Message' });
|
||||
Notify({ type: 'warning', message: 'Notify Message' });
|
||||
```
|
||||
|
||||
### Custom Notify
|
||||
|
||||
```js
|
||||
Notify({
|
||||
message: 'Notify Message',
|
||||
duration: 1000,
|
||||
background: '#1989fa'
|
||||
message: 'Custom Color',
|
||||
color: '#ad0000',
|
||||
background: '#ffe1e1'
|
||||
});
|
||||
|
||||
Notify({
|
||||
message: 'Custom Duration',
|
||||
duration: 1000
|
||||
});
|
||||
```
|
||||
|
||||
@ -54,6 +68,7 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| type | Can be set to `primary` `info` `warning` | `string` | `danger` |
|
||||
| message | Message | `string` | - |
|
||||
| duration | Duration(ms), won't disappear if value is 0 | `number` | `3000` |
|
||||
| color | Message color | `string` | `#fff` | |
|
||||
|
||||
@ -17,13 +17,38 @@ Vue.use(Notify);
|
||||
Notify('通知内容');
|
||||
```
|
||||
|
||||
### 自定义配置
|
||||
### 通知类型
|
||||
|
||||
支持`primary`、`success`、`warning`、`danger`四种通知类型，默认为`danger`
|
||||
|
||||
```js
|
||||
// 主要通知
|
||||
Notify({ type: 'primary', message: '通知内容' });
|
||||
|
||||
// 成功通知
|
||||
Notify({ type: 'success', message: '通知内容' });
|
||||
|
||||
// 危险通知
|
||||
Notify({ type: 'danger', message: '通知内容' });
|
||||
|
||||
// 警告通知
|
||||
Notify({ type: 'warning', message: '通知内容' });
|
||||
```
|
||||
|
||||
### 自定义通知
|
||||
|
||||
自定义消息通知的颜色和展示时长
|
||||
|
||||
```js
|
||||
Notify({
|
||||
message: '通知内容',
|
||||
duration: 1000,
|
||||
background: '#1989fa'
|
||||
message: '自定义颜色',
|
||||
color: '#ad0000',
|
||||
background: '#ffe1e1'
|
||||
});
|
||||
|
||||
Notify({
|
||||
message: '自定义时长',
|
||||
duration: 1000
|
||||
});
|
||||
```
|
||||
|
||||
@ -54,6 +79,7 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| type | 类型，可选值为 `primary` `info` `warning` | `string` | `danger` | 2.1.6 |
|
||||
| message | 展示文案，支持通过`\n`换行 | `string` | - | - |
|
||||
| duration | 展示时长(ms)，值为 0 时，notify 不会消失 | `number` | `3000` | - |
|
||||
| color | 字体颜色 | `string` | `#fff` | - |
|
||||
|
||||
@ -1,19 +1,22 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-button
|
||||
type="primary"
|
||||
:text="$t('showNotify')"
|
||||
@click="showNotify"
|
||||
/>
|
||||
<van-button type="danger" :text="$t('basicUsage')" @click="showNotify" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customConfig')">
|
||||
<van-button
|
||||
type="primary"
|
||||
:text="$t('showCustomNotify')"
|
||||
@click="showCustomNotify"
|
||||
/>
|
||||
<demo-block :title="$t('notifyType')">
|
||||
<div style="margin-bottom: 15px;">
|
||||
<van-button type="info" :text="$t('primary')" @click="showType('primary')" />
|
||||
<van-button type="primary" :text="$t('success')" @click="showType('success')" />
|
||||
</div>
|
||||
|
||||
<van-button type="danger" :text="$t('danger')" @click="showType('danger')" />
|
||||
<van-button type="warning" :text="$t('warning')" @click="showType('warning')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customNotify')">
|
||||
<van-button type="primary" :text="$t('customColor')" @click="showCustomColor" />
|
||||
<van-button type="primary" :text="$t('customDuration')" @click="showCustomDuration" />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
@ -22,16 +25,26 @@
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
primary: '主要通知',
|
||||
success: '成功通知',
|
||||
danger: '危险通知',
|
||||
warning: '警告通知',
|
||||
content: '通知内容',
|
||||
customConfig: '自定义配置',
|
||||
showNotify: '显示消息通知',
|
||||
showCustomNotify: '显示自定义消息通知'
|
||||
notifyType: '通知类型',
|
||||
customColor: '自定义颜色',
|
||||
customNotify: '自定义配置',
|
||||
customDuration: '自定义时长'
|
||||
},
|
||||
'en-US': {
|
||||
primary: 'Primary',
|
||||
success: 'Success',
|
||||
danger: 'Danger',
|
||||
warning: 'Warning',
|
||||
content: 'Notify Message',
|
||||
customConfig: 'Custom Config',
|
||||
showNotify: 'Show Notify',
|
||||
showCustomNotify: 'Show Custom Notify'
|
||||
notifyType: 'Notify Type',
|
||||
customColor: 'Custom Color',
|
||||
customNotify: 'Custom Notify',
|
||||
customDuration: 'Custom Duration'
|
||||
}
|
||||
},
|
||||
|
||||
@ -40,11 +53,25 @@ export default {
|
||||
this.$notify(this.$t('content'));
|
||||
},
|
||||
|
||||
showCustomNotify() {
|
||||
showCustomColor() {
|
||||
this.$notify({
|
||||
message: this.$t('customColor'),
|
||||
color: '#ad0000',
|
||||
background: '#ffe1e1'
|
||||
});
|
||||
},
|
||||
|
||||
showCustomDuration() {
|
||||
this.$notify({
|
||||
message: this.$t('customDuration'),
|
||||
duration: 1000
|
||||
});
|
||||
},
|
||||
|
||||
showType(type) {
|
||||
this.$notify({
|
||||
message: this.$t('content'),
|
||||
duration: 1000,
|
||||
background: '#1989fa'
|
||||
type
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -52,7 +79,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-notify {
|
||||
background-color: @white;
|
||||
|
||||
@ -9,4 +9,20 @@
|
||||
// allow newline charactor
|
||||
white-space: pre-wrap;
|
||||
text-align: center;
|
||||
|
||||
&--primary {
|
||||
background-color: @notify-primary-background-color;
|
||||
}
|
||||
|
||||
&--success {
|
||||
background-color: @notify-success-background-color;
|
||||
}
|
||||
|
||||
&--danger {
|
||||
background-color: @notify-danger-background-color;
|
||||
}
|
||||
|
||||
&--warning {
|
||||
background-color: @notify-warning-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import Vue from 'vue';
|
||||
import VanNotify from './Notify';
|
||||
import { RED, WHITE } from '../utils/constant';
|
||||
import { WHITE } from '../utils/constant';
|
||||
import { isObj, isServer } from '../utils';
|
||||
import { mount } from '../utils/functional';
|
||||
import { NotifyOptions } from 'types/notify';
|
||||
@ -57,10 +57,11 @@ function Notify(options: NotifyOptions) {
|
||||
|
||||
function defaultOptions(): NotifyOptions {
|
||||
return {
|
||||
type: 'danger',
|
||||
value: true,
|
||||
message: '',
|
||||
color: WHITE,
|
||||
background: RED,
|
||||
background: undefined,
|
||||
duration: 3000,
|
||||
className: '',
|
||||
onClose: null,
|
||||
|
||||
@ -2,7 +2,10 @@
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">显示消息通知</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">显示自定义消息通知</span></button></div>
|
||||
<div><button class="van-button van-button--danger van-button--normal"><span class="van-button__text">基础用法</span></button></div>
|
||||
<div>
|
||||
<div style="margin-bottom: 15px;"><button class="van-button van-button--info van-button--normal"><span class="van-button__text">主要通知</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">成功通知</span></button></div> <button class="van-button van-button--danger van-button--normal"><span class="van-button__text">危险通知</span></button> <button class="van-button van-button--warning van-button--normal"><span class="van-button__text">警告通知</span></button>
|
||||
</div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">自定义颜色</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">自定义时长</span></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`create a notify 1`] = `<div class="van-popup van-popup--top van-notify" style="color: rgb(255, 255, 255); background: rgb(255, 68, 68); z-index: 2001;" name="van-popup-slide-top">test</div>`;
|
||||
exports[`create a notify 1`] = `<div class="van-popup van-popup--top van-notify van-notify--danger" style="color: rgb(255, 255, 255); z-index: 2001;" name="van-popup-slide-top">test</div>`;
|
||||
|
||||
exports[`notify disappear 1`] = `<div class="van-popup van-popup--top van-notify" style="color: red; z-index: 2001; background: blue;" name="van-popup-slide-top">test</div>`;
|
||||
exports[`notify disappear 1`] = `<div class="van-popup van-popup--top van-notify van-notify--danger" style="color: red; z-index: 2001; background: blue;" name="van-popup-slide-top">test</div>`;
|
||||
|
||||
exports[`notify disappear 2`] = `<div class="van-popup van-popup--top van-notify" style="color: red; z-index: 2001; background: blue; display: none;" name="van-popup-slide-top">test</div>`;
|
||||
exports[`notify disappear 2`] = `<div class="van-popup van-popup--top van-notify van-notify--danger" style="color: red; z-index: 2001; background: blue; display: none;" name="van-popup-slide-top">test</div>`;
|
||||
|
||||
exports[`notify disappear 3`] = `<div class="van-popup van-popup--top van-notify" style="color: rgb(255, 255, 255); z-index: 2002; background: rgb(255, 68, 68);" name="van-popup-slide-top">text2</div>`;
|
||||
exports[`notify disappear 3`] = `<div class="van-popup van-popup--top van-notify van-notify--danger" style="color: rgb(255, 255, 255); z-index: 2002;" name="van-popup-slide-top">text2</div>`;
|
||||
|
||||
exports[`notify disappear 4`] = `<div class="van-popup van-popup--top van-notify" style="color: rgb(255, 255, 255); z-index: 2002; background: rgb(255, 68, 68); display: none;" name="van-popup-slide-top">text2</div>`;
|
||||
exports[`notify disappear 4`] = `<div class="van-popup van-popup--top van-notify van-notify--danger" style="color: rgb(255, 255, 255); z-index: 2002; display: none;" name="van-popup-slide-top">text2</div>`;
|
||||
|
||||
exports[`type prop 1`] = `<div class="van-popup van-popup--top van-notify van-notify--primary" style="color: rgb(255, 255, 255); z-index: 2001;" name="van-popup-slide-top">test</div>`;
|
||||
|
||||
@ -11,6 +11,16 @@ test('create a notify', async () => {
|
||||
expect(notify.$el.outerHTML).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('type prop', async () => {
|
||||
const notify = Notify({
|
||||
message: 'test',
|
||||
type: 'primary'
|
||||
});
|
||||
|
||||
await later();
|
||||
expect(notify.$el.outerHTML).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('notify disappear', async () => {
|
||||
const onClose = jest.fn();
|
||||
const notify = Notify({
|
||||
|
||||
@ -360,6 +360,10 @@
|
||||
@notify-padding: @padding-xs @padding-md;
|
||||
@notify-font-size: @font-size-md;
|
||||
@notify-line-height: 20px;
|
||||
@notify-primary-background-color: @blue;
|
||||
@notify-success-background-color: @green;
|
||||
@notify-danger-background-color: @red;
|
||||
@notify-warning-background-color: @orange;
|
||||
|
||||
// NumberKeyboard
|
||||
@number-keyboard-background-color: @white;
|
||||
|
||||
1
types/notify.d.ts
vendored
1
types/notify.d.ts
vendored
@ -3,6 +3,7 @@ import Vue from 'vue';
|
||||
export type NotifyMessage = string | number;
|
||||
|
||||
export type NotifyOptions = {
|
||||
type?: 'primary' | 'success' | 'danger' | 'warning';
|
||||
value?: boolean;
|
||||
color?: string;
|
||||
message?: NotifyMessage;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user