Skip to content

Commit aa18e68

Browse files
XutaotaotaoXutaotaotao
committed
feat: add alter description api
1 parent 70dfc3c commit aa18e68

File tree

7 files changed

+164
-29
lines changed

7 files changed

+164
-29
lines changed

‎doc/components/nHeader/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ export default {
106106
indexName: 'ninecat-ui',
107107
inputSelector: '.ndoc-search',
108108
debug: true, // Set debug to true if you want to inspect the dropdown
109-
"start_urls": ["https://ninecat-ui.github.io"],
109+
start_urls: ['https://ninecat-ui.github.io']
110110
});
111111
},
112112
methods: {

‎doc/markdown/nAlert/en-US/index.md

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export default {
5454
```
5555
:::
5656

57-
### Custome define close
57+
### Customize define close
5858
:::demo
5959
```html
6060
<template>
@@ -82,13 +82,49 @@ export default {
8282
```
8383
:::
8484

85+
### Contains supporting text introduction
86+
:::demo
87+
```html
88+
<template>
89+
<div >
90+
<n-alert
91+
v-model:show="show"
92+
message="Success Text"
93+
type="success"
94+
description="Success Description Success Description Success Description"
95+
/>
96+
<n-alert
97+
closable
98+
v-model:show="show"
99+
message="Warning Text"
100+
type="warning"
101+
:showIcon="true"
102+
description="Warning Description Warning Description Warning Description"
103+
/>
104+
</div>
105+
</template>
106+
107+
<script>
108+
export default {
109+
data: function () {
110+
return {
111+
show: true,
112+
}
113+
}
114+
}
115+
</script>
116+
117+
```
118+
:::
119+
85120
### API
86121

87122
| Property | Description | Type | Default |
88123
| :--- | :--- | :--- | :--- |
89124
| show | Whether to show | Boolean | false |
90125
| closable | Whether to close | Boolean | false |
91126
| message | Content of Alert | String | |
127+
|description | Auxiliary text introduction for warnings | String| |
92128
| type | Type of Alert styles, options:`info`,`success`,`warning`,`error` | String | info |
93129
| closeText | Custome define close text | String | |
94130
| showIcon | Whether show icon | Boolean | flase |

‎doc/markdown/nAlert/zh-CN/index.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,13 +82,49 @@ export default {
8282
```
8383
:::
8484

85+
### 含有辅助性文字介绍
86+
:::demo 含有辅助性文字介绍的警告提示。
87+
```html
88+
<template>
89+
<div >
90+
<n-alert
91+
v-model:show="show"
92+
message="Success Text"
93+
type="success"
94+
description="Success Description Success Description Success Description"
95+
/>
96+
<n-alert
97+
closable
98+
v-model:show="show"
99+
message="Warning Text"
100+
type="warning"
101+
:showIcon="true"
102+
description="Warning Description Warning Description Warning Description"
103+
/>
104+
</div>
105+
</template>
106+
107+
<script>
108+
export default {
109+
data: function () {
110+
return {
111+
show: true,
112+
}
113+
}
114+
}
115+
</script>
116+
117+
```
118+
:::
119+
85120
## API
86121

87122
| 参数 | 说明 | 类型 | 默认值 |
88123
| :--- | :--- | :--- | :--- |
89124
| show | 是否展示 | Boolean | false |
90125
| closable | 是否可关闭 | Boolean | false |
91126
| message | 提示内容 | String | |
127+
|description | 警告提示的辅助性文字介绍 | String| |
92128
| type | 提示类型，可选值`info`,`success`,`warning`,`error` | String | info |
93129
| closeText | 自定义关闭文案 | String | |
94130
| showIcon | 是否展示辅助性图标 | Boolean | flase |

‎packages/n-alert/index.scss

Lines changed: 48 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,58 @@
11
.base-alert {
22
position: relative;
3+
box-sizing: border-box;
34
margin: 10px 0;
5+
padding: 10px 20px;
46
min-width: 172px;
5-
height: 50px;
7+
min-height: 60px;
68
box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.06), 0 4px 8px 0 rgba(0, 0, 0, 0.06);
79
border-radius: 6px;
810
display: flex;
911
justify-content: center;
1012
align-items: center;
1113
.alert-content {
12-
position: absolute;
13-
.iconfont {
14-
font-size: 12px;
15-
}
16-
.message-text {
17-
font-family: PingFangSC-Regular;
18-
font-size: 14px;
19-
color: #575757;
20-
line-height: 20px;
21-
margin-left: 10px;
22-
margin-right: 10px;
23-
}
24-
.close-text{
25-
color: rgba(0,0,0,.45);
26-
transition: color .3s;
27-
font-size: 12px;
28-
cursor: pointer;
14+
width: 100%;
15+
// position: absolute;
16+
display: flex;
17+
.icon{
18+
.iconfont {
19+
font-size: 12px;
20+
}
21+
}
22+
.content{
23+
flex: 0 0 70%;
24+
.message-text {
25+
font-family: PingFangSC-Regular;
26+
font-size: 14px;
27+
color: #575757;
28+
line-height: 20px;
29+
margin-left: 10px;
30+
margin-right: 10px;
31+
}
32+
.title{
33+
display: block;
34+
margin-bottom: 4px;
35+
color: rgba(0,0,0,.85);
36+
font-size: 16px;
37+
}
38+
.description{
39+
font-size: 14px;
40+
line-height: 22px;
41+
}
42+
}
43+
.close{
44+
position: absolute;
45+
right: 10px;
46+
top: 5px;
47+
.icon-times{
48+
font-size: 10px;
49+
}
50+
.close-text{
51+
color: rgba(0,0,0,.45);
52+
transition: color .3s;
53+
font-size: 12px;
54+
cursor: pointer;
55+
}
2956
}
3057
.icon-info {
3158
color: #2196f3;
@@ -43,6 +70,9 @@
4370
color: #f44336;
4471
cursor: pointer;
4572
}
73+
.title-icon{
74+
font-size: 20px !important;
75+
}
4676
}
4777
}
4878
.info {

‎packages/n-alert/index.tsx

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ const AlterProps = {
1313
default: false
1414
},
1515
type: {
16-
type: String as PropType<''>
16+
type: String as PropType<''>,
17+
default: 'info'
1718
},
1819
message: {
1920
type: String as PropType<''>
@@ -23,6 +24,9 @@ const AlterProps = {
2324
},
2425
showIcon: {
2526
type: Boolean as PropType<false>
27+
},
28+
description: {
29+
type: String as PropType<''>
2630
}
2731
};
2832

@@ -34,7 +38,12 @@ const NAlert = defineComponent({
3438
const alertClass = () => {
3539
return classNames(['base-alert', props.type]);
3640
};
37-
const iconClass = classNames([`icon-${props.type}`]);
41+
const messageClass = () => {
42+
return classNames(['message-text', props.description ? 'title' : '']);
43+
};
44+
const iconClass = () => {
45+
return classNames([`icon-${props.type}`, props.description ? 'title-icon' : '']);
46+
};
3847
const closeAlert = () => {
3948
emit('update:show', false);
4049
};
@@ -44,17 +53,24 @@ const NAlert = defineComponent({
4453
: <NIcon
4554
id="alertCloseIcon"
4655
name="icon-times"
47-
class={iconClass}
56+
class={iconClass()}
4857
onClick={closeAlert}
4958
/>);
5059
};
5160
return () => (
5261
props.show
5362
? <div class={alertClass()}>
5463
<div class="alert-content">
55-
{props.showIcon && <NIcon name={`icon-${props.type}`} /> }
56-
<span class="message-text">{props.message}</span>
57-
{props.closable && renderCloseContent()}
64+
<div class="icon">
65+
{props.showIcon && <NIcon class={iconClass()} name={`icon-${props.type}`} /> }
66+
</div>
67+
<div class="content">
68+
<span class={messageClass()}>{props.message}</span>
69+
<p class="description">{props.description}</p>
70+
</div>
71+
<div class="close">
72+
{props.closable && renderCloseContent()}
73+
</div>
5874
</div>
5975
</div>
6076
: null

‎test/specs/__snapshots__/alter.spec.js.snap

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,19 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`NAlter renders correctly 1`] = `
4-
<div class="base-alert">
4+
<div class="base-alert info">
55
<div class="alert-content">
6-
<!----><span class="message-text"><!----></span>
7-
<!---->
6+
<div class="icon">
7+
<!---->
8+
</div>
9+
<div class="content"><span class="message-text"><!----></span>
10+
<p class="description">
11+
<!---->
12+
</p>
13+
</div>
14+
<div class="close">
15+
<!---->
16+
</div>
817
</div>
918
</div>
1019
`;

‎test/specs/alter.spec.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,14 @@ describe('NAlter', () => {
4242
});
4343
expect(wrapper.find('.close-text').exists()).toBe(true);
4444
});
45+
it('render description when has description', () => {
46+
const wrapper = mount({
47+
render () {
48+
return <NAlter show={true} description="description" message={'test'} closable closeText="close"/>;
49+
}
50+
});
51+
expect(wrapper.find('.description').exists()).toBe(true);
52+
});
4553
it('when click close icon, close this alter', async () => {
4654
const wrapper = mount({
4755
render () {

0 commit comments

Comments
 (0)