Skip to content

Commit 7e05dab

Browse files
LeopoldthecoderLeopoldthecoder
committed
init message
1 parent 05081a7 commit 7e05dab

13 files changed

Lines changed: 452 additions & 13 deletions

File tree

‎bin/build-entry.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,14 @@ const install = function(Vue) {
1414
1515
{{install}}
1616
17-
// Vue.use(Loading);
18-
19-
// Vue.prototype.$msgbox = MessageBox;
20-
// Vue.prototype.$alert = MessageBox.alert;
21-
// Vue.prototype.$confirm = MessageBox.confirm;
22-
// Vue.prototype.$prompt = MessageBox.prompt;
23-
// Vue.prototype.$notify = Notification;
17+
Vue.use(Loading);
18+
19+
Vue.prototype.$msgbox = MessageBox;
20+
Vue.prototype.$alert = MessageBox.alert;
21+
Vue.prototype.$confirm = MessageBox.confirm;
22+
Vue.prototype.$prompt = MessageBox.prompt;
23+
Vue.prototype.$notify = Notification;
24+
Vue.prototype.$message = Message;
2425
};
2526
2627
// auto install

‎components.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,5 +148,8 @@
148148
],
149149
"spinner": [
150150
"./packages/spinner/index.js"
151+
],
152+
"message": [
153+
"./packages/message/index.js"
151154
]
152155
}

‎examples/docs/message.md‎

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
<script>
2+
module.exports = {
3+
methods: {
4+
open() {
5+
this.$notify({
6+
title: '标题名称',
7+
message: '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'
8+
});
9+
},
10+
11+
open2() {
12+
this.$notify({
13+
title: '成功',
14+
message: '这是一条成功的提示消息',
15+
type: 'success'
16+
});
17+
},
18+
19+
open3() {
20+
this.$notify({
21+
title: '警告',
22+
message: '这是一条警告的提示消息',
23+
type: 'warning'
24+
});
25+
},
26+
27+
open4() {
28+
this.$notify({
29+
title: '消息',
30+
message: '这是一条消息的提示消息',
31+
type: 'info'
32+
});
33+
},
34+
35+
open5() {
36+
this.$notify({
37+
title: '错误',
38+
message: '这是一条错误的提示消息',
39+
type: 'error'
40+
});
41+
},
42+
43+
open6() {
44+
this.$notify({
45+
title: '提示',
46+
message: '这是一条不会自动关闭的消息',
47+
duration: 0
48+
});
49+
},
50+
51+
open7() {
52+
this.$notify({
53+
title: '提示',
54+
message: '这是一条带有回调函数的消息',
55+
onClose: this.onClose
56+
});
57+
},
58+
59+
onClose() {
60+
console.log('Notification 已关闭');
61+
}
62+
}
63+
};
64+
</script>
65+
66+
<style>
67+
.demo-box.demo-notification {
68+
.el-button + .el-button {
69+
margin-left: 10px;
70+
}
71+
}
72+
</style>
73+
74+
## 基本用法
75+
76+
<div class="demo-box demo-notification">
77+
<el-button :plain="true" v-on:click.native="open">点击展示 Notification</el-button>
78+
</div>
79+
80+
```html
81+
<template>
82+
<el-button :plain="true" v-on:click.native="open">点击展示 Notification</el-button>
83+
</template>
84+
85+
<script>
86+
export default {
87+
methods: {
88+
open() {
89+
this.$notify({
90+
title: '标题名称',
91+
message: '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'
92+
});
93+
}
94+
}
95+
}
96+
</script>
97+
```
98+
99+
## 带有 icon
100+
101+
<div class="demo-box demo-notification">
102+
<el-button :plain="true" v-on:click.native="open2">成功</el-button>
103+
<el-button :plain="true" v-on:click.native="open3">警告</el-button>
104+
<el-button :plain="true" v-on:click.native="open4">消息</el-button>
105+
<el-button :plain="true" v-on:click.native="open5">错误</el-button>
106+
</div>
107+
108+
```html
109+
<template>
110+
<el-button :plain="true" v-on:click.native="open2">成功</el-button>
111+
<el-button :plain="true" v-on:click.native="open3">警告</el-button>
112+
<el-button :plain="true" v-on:click.native="open4">消息</el-button>
113+
<el-button :plain="true" v-on:click.native="open5">错误</el-button>
114+
</template>
115+
116+
<script>
117+
export default {
118+
methods: {
119+
open2() {
120+
this.$notify({
121+
title: '成功',
122+
message: '这是一条成功的提示消息',
123+
type: 'success'
124+
});
125+
},
126+
127+
open3() {
128+
this.$notify({
129+
title: '警告',
130+
message: '这是一条警告的提示消息',
131+
type: 'warning'
132+
});
133+
},
134+
135+
open4() {
136+
this.$notify({
137+
title: '消息',
138+
message: '这是一条消息的提示消息',
139+
type: 'info'
140+
});
141+
},
142+
143+
open5() {
144+
this.$notify({
145+
title: '错误',
146+
message: '这是一条错误的提示消息',
147+
type: 'error'
148+
});
149+
}
150+
}
151+
}
152+
</script>
153+
```
154+
155+
## 不会自动关闭
156+
<div class="demo-box demo-notification">
157+
<el-button :plain="true" v-on:click.native="open6">不会自动关闭的 Notification</el-button>
158+
</div>
159+
160+
```html
161+
<template>
162+
<el-button :plain="true" v-on:click.native="open6">不会自动关闭的 Notification</el-button>
163+
</template>
164+
165+
<script>
166+
export default {
167+
methods: {
168+
open6() {
169+
this.$notify({
170+
title: '提示',
171+
message: '这是一条不会自动关闭的消息',
172+
duration: 0
173+
});
174+
}
175+
}
176+
}
177+
</script>
178+
```
179+
180+
## 回调函数
181+
<div class="demo-box demo-notification">
182+
<el-button :plain="true" v-on:click.native="open7">带有回调函数的 Notification</el-button>
183+
</div>
184+
185+
```html
186+
<template>
187+
<el-button :plain="true" v-on:click.native="open7">带有回调函数的 Notification</el-button>
188+
</template>
189+
190+
<script>
191+
export default {
192+
methods: {
193+
open7() {
194+
this.$notify({
195+
title: '提示',
196+
message: '这是一条带有回调函数的消息',
197+
onClose: this.onClose
198+
});
199+
},
200+
201+
onClose() {
202+
console.log('Notification 已关闭');
203+
}
204+
}
205+
}
206+
</script>
207+
```
208+
209+
## 全局方法
210+
211+
element 为 Vue.prototype 添加了全局方法 $notify。因此在 vue instance 中可以采用本页面中的方式调用 `Notification`。
212+
213+
## 单独引用
214+
215+
单独引入 `Notification`：
216+
217+
```javascript
218+
import { Notification } from 'element-ui';
219+
```
220+
221+
此时调用方法为 `Notification(options)`。
222+
223+
## API
224+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
225+
|---------- |-------------- |---------- |-------------------------------- |-------- |
226+
| title | 标题 | string | | |
227+
| message | 说明文字 | string | | |
228+
| type | 主题 | string | 'success', 'warning', 'info', 'error' | |
229+
| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | | 4500 |
230+
| onClose | 关闭时的回调函数 | function | | |

‎examples/nav.config.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,12 @@
8181
"title": "notification 通知",
8282
"description": "悬浮出现在页面右上角, 显示全局的通知提醒消息"
8383
},
84+
{
85+
"path": "/message",
86+
"name": "消息提示 (message)",
87+
"title": "message 消息提示",
88+
"description": "对用户的操作进行反馈提示,包含成功、反馈或错误等消息提示"
89+
},
8490
{
8591
"path": "/loading",
8692
"name": "加载 (loading)",

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
"vue-loader": "^9.3.2",
4949
"vue": "^2.0.0-rc.1",
5050
"vue-markdown-loader": "^0.4.0",
51-
"vue-popup": "^0.2.1",
51+
"vue-popup": "^0.2.2",
5252
"vue-router": "^2.0.0-beta.2"
5353
}
5454
}

‎packages/dialog/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,6 @@
1212
"author": "elemefe",
1313
"license": "MIT",
1414
"devDependencies": {
15-
"vue-popup": "^0.2.1"
15+
"vue-popup": "^0.2.2"
1616
}
1717
}

‎packages/message-box/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,6 @@
1212
"author": "elemefe",
1313
"license": "MIT",
1414
"dependencies": {
15-
"vue-popup": "^0.2.1"
15+
"vue-popup": "^0.2.2"
1616
}
1717
}

‎packages/message/cooking.conf.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
var cooking = require('cooking');
2+
var path = require('path');
3+
4+
cooking.set({
5+
entry: {
6+
index: path.join(__dirname, 'index.js')
7+
},
8+
dist: path.join(__dirname, 'lib'),
9+
template: false,
10+
format: 'umd',
11+
moduleName: 'ElMessage',
12+
extractCSS: 'style.css',
13+
14+
extends: ['vue', 'saladcss']
15+
});
16+
17+
cooking.add('resolve.alias', {
18+
'main': path.join(__dirname, '../../src'),
19+
'packages': path.join(__dirname, '../../packages')
20+
});
21+
22+
cooking.add('externals', {
23+
vue: {
24+
root: 'Vue',
25+
commonjs: 'vue',
26+
commonjs2: 'vue',
27+
amd: 'vue'
28+
}
29+
});
30+
31+
module.exports = cooking.resolve();

‎packages/message/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Message from './src/main.js';
2+
3+
module.exports = Message;

‎packages/message/package.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "el-message",
3+
"version": "0.0.0",
4+
"description": "A message component for Vue.js.",
5+
"keywords": [
6+
"element",
7+
"vue",
8+
"component"
9+
],
10+
"main": "./lib/index.js",
11+
"repository": "https://github.com/element-component/element/tree/master/packages/message",
12+
"author": "elemefe",
13+
"license": "MIT",
14+
"dependencies": {}
15+
}

0 commit comments

Comments
 (0)