mirror of https://github.com/ElemeFE/element
init message
Leopoldthecoder
parent
05081a7424
commit
7e05dab840
|
|
@ -14,13 +14,14 @@ const install = function(Vue) {
|
||||||
|
|
||||||
{{install}}
|
{{install}}
|
||||||
|
|
||||||
// Vue.use(Loading);
|
Vue.use(Loading);
|
||||||
|
|
||||||
// Vue.prototype.$msgbox = MessageBox;
|
Vue.prototype.$msgbox = MessageBox;
|
||||||
// Vue.prototype.$alert = MessageBox.alert;
|
Vue.prototype.$alert = MessageBox.alert;
|
||||||
// Vue.prototype.$confirm = MessageBox.confirm;
|
Vue.prototype.$confirm = MessageBox.confirm;
|
||||||
// Vue.prototype.$prompt = MessageBox.prompt;
|
Vue.prototype.$prompt = MessageBox.prompt;
|
||||||
// Vue.prototype.$notify = Notification;
|
Vue.prototype.$notify = Notification;
|
||||||
|
Vue.prototype.$message = Message;
|
||||||
};
|
};
|
||||||
|
|
||||||
// auto install
|
// auto install
|
||||||
|
|
|
||||||
|
|
@ -148,5 +148,8 @@
|
||||||
],
|
],
|
||||||
"spinner": [
|
"spinner": [
|
||||||
"./packages/spinner/index.js"
|
"./packages/spinner/index.js"
|
||||||
|
],
|
||||||
|
"message": [
|
||||||
|
"./packages/message/index.js"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,230 @@
|
||||||
|
<script>
|
||||||
|
module.exports = {
|
||||||
|
methods: {
|
||||||
|
open() {
|
||||||
|
this.$notify({
|
||||||
|
title: '标题名称',
|
||||||
|
message: '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
open2() {
|
||||||
|
this.$notify({
|
||||||
|
title: '成功',
|
||||||
|
message: '这是一条成功的提示消息',
|
||||||
|
type: 'success'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
open3() {
|
||||||
|
this.$notify({
|
||||||
|
title: '警告',
|
||||||
|
message: '这是一条警告的提示消息',
|
||||||
|
type: 'warning'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
open4() {
|
||||||
|
this.$notify({
|
||||||
|
title: '消息',
|
||||||
|
message: '这是一条消息的提示消息',
|
||||||
|
type: 'info'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
open5() {
|
||||||
|
this.$notify({
|
||||||
|
title: '错误',
|
||||||
|
message: '这是一条错误的提示消息',
|
||||||
|
type: 'error'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
open6() {
|
||||||
|
this.$notify({
|
||||||
|
title: '提示',
|
||||||
|
message: '这是一条不会自动关闭的消息',
|
||||||
|
duration: 0
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
open7() {
|
||||||
|
this.$notify({
|
||||||
|
title: '提示',
|
||||||
|
message: '这是一条带有回调函数的消息',
|
||||||
|
onClose: this.onClose
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onClose() {
|
||||||
|
console.log('Notification 已关闭');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.demo-box.demo-notification {
|
||||||
|
.el-button + .el-button {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
## 基本用法
|
||||||
|
|
||||||
|
<div class="demo-box demo-notification">
|
||||||
|
<el-button :plain="true" v-on:click.native="open">点击展示 Notification</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<el-button :plain="true" v-on:click.native="open">点击展示 Notification</el-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
open() {
|
||||||
|
this.$notify({
|
||||||
|
title: '标题名称',
|
||||||
|
message: '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 带有 icon
|
||||||
|
|
||||||
|
<div class="demo-box demo-notification">
|
||||||
|
<el-button :plain="true" v-on:click.native="open2">成功</el-button>
|
||||||
|
<el-button :plain="true" v-on:click.native="open3">警告</el-button>
|
||||||
|
<el-button :plain="true" v-on:click.native="open4">消息</el-button>
|
||||||
|
<el-button :plain="true" v-on:click.native="open5">错误</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<el-button :plain="true" v-on:click.native="open2">成功</el-button>
|
||||||
|
<el-button :plain="true" v-on:click.native="open3">警告</el-button>
|
||||||
|
<el-button :plain="true" v-on:click.native="open4">消息</el-button>
|
||||||
|
<el-button :plain="true" v-on:click.native="open5">错误</el-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
open2() {
|
||||||
|
this.$notify({
|
||||||
|
title: '成功',
|
||||||
|
message: '这是一条成功的提示消息',
|
||||||
|
type: 'success'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
open3() {
|
||||||
|
this.$notify({
|
||||||
|
title: '警告',
|
||||||
|
message: '这是一条警告的提示消息',
|
||||||
|
type: 'warning'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
open4() {
|
||||||
|
this.$notify({
|
||||||
|
title: '消息',
|
||||||
|
message: '这是一条消息的提示消息',
|
||||||
|
type: 'info'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
open5() {
|
||||||
|
this.$notify({
|
||||||
|
title: '错误',
|
||||||
|
message: '这是一条错误的提示消息',
|
||||||
|
type: 'error'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 不会自动关闭
|
||||||
|
<div class="demo-box demo-notification">
|
||||||
|
<el-button :plain="true" v-on:click.native="open6">不会自动关闭的 Notification</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<el-button :plain="true" v-on:click.native="open6">不会自动关闭的 Notification</el-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
open6() {
|
||||||
|
this.$notify({
|
||||||
|
title: '提示',
|
||||||
|
message: '这是一条不会自动关闭的消息',
|
||||||
|
duration: 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 回调函数
|
||||||
|
<div class="demo-box demo-notification">
|
||||||
|
<el-button :plain="true" v-on:click.native="open7">带有回调函数的 Notification</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<el-button :plain="true" v-on:click.native="open7">带有回调函数的 Notification</el-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
open7() {
|
||||||
|
this.$notify({
|
||||||
|
title: '提示',
|
||||||
|
message: '这是一条带有回调函数的消息',
|
||||||
|
onClose: this.onClose
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onClose() {
|
||||||
|
console.log('Notification 已关闭');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 全局方法
|
||||||
|
|
||||||
|
element 为 Vue.prototype 添加了全局方法 $notify。因此在 vue instance 中可以采用本页面中的方式调用 `Notification`。
|
||||||
|
|
||||||
|
## 单独引用
|
||||||
|
|
||||||
|
单独引入 `Notification`：
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { Notification } from 'element-ui';
|
||||||
|
```
|
||||||
|
|
||||||
|
此时调用方法为 `Notification(options)`。
|
||||||
|
|
||||||
|
## API
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||||
|
| title | 标题 | string | | |
|
||||||
|
| message | 说明文字 | string | | |
|
||||||
|
| type | 主题 | string | 'success', 'warning', 'info', 'error' | |
|
||||||
|
| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | | 4500 |
|
||||||
|
| onClose | 关闭时的回调函数 | function | | |
|
||||||
|
|
@ -81,6 +81,12 @@
|
||||||
"title": "notification 通知",
|
"title": "notification 通知",
|
||||||
"description": "悬浮出现在页面右上角, 显示全局的通知提醒消息"
|
"description": "悬浮出现在页面右上角, 显示全局的通知提醒消息"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "/message",
|
||||||
|
"name": "消息提示 (message)",
|
||||||
|
"title": "message 消息提示",
|
||||||
|
"description": "对用户的操作进行反馈提示,包含成功、反馈或错误等消息提示"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "/loading",
|
"path": "/loading",
|
||||||
"name": "加载 (loading)",
|
"name": "加载 (loading)",
|
||||||
|
|
|
||||||
|
|
@ -48,7 +48,7 @@
|
||||||
"vue-loader": "^9.3.2",
|
"vue-loader": "^9.3.2",
|
||||||
"vue": "^2.0.0-rc.1",
|
"vue": "^2.0.0-rc.1",
|
||||||
"vue-markdown-loader": "^0.4.0",
|
"vue-markdown-loader": "^0.4.0",
|
||||||
"vue-popup": "^0.2.1",
|
"vue-popup": "^0.2.2",
|
||||||
"vue-router": "^2.0.0-beta.2"
|
"vue-router": "^2.0.0-beta.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,6 @@
|
||||||
"author": "elemefe",
|
"author": "elemefe",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"vue-popup": "^0.2.1"
|
"vue-popup": "^0.2.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,6 @@
|
||||||
"author": "elemefe",
|
"author": "elemefe",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"vue-popup": "^0.2.1"
|
"vue-popup": "^0.2.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
var cooking = require('cooking');
|
||||||
|
var path = require('path');
|
||||||
|
|
||||||
|
cooking.set({
|
||||||
|
entry: {
|
||||||
|
index: path.join(__dirname, 'index.js')
|
||||||
|
},
|
||||||
|
dist: path.join(__dirname, 'lib'),
|
||||||
|
template: false,
|
||||||
|
format: 'umd',
|
||||||
|
moduleName: 'ElMessage',
|
||||||
|
extractCSS: 'style.css',
|
||||||
|
|
||||||
|
extends: ['vue', 'saladcss']
|
||||||
|
});
|
||||||
|
|
||||||
|
cooking.add('resolve.alias', {
|
||||||
|
'main': path.join(__dirname, '../../src'),
|
||||||
|
'packages': path.join(__dirname, '../../packages')
|
||||||
|
});
|
||||||
|
|
||||||
|
cooking.add('externals', {
|
||||||
|
vue: {
|
||||||
|
root: 'Vue',
|
||||||
|
commonjs: 'vue',
|
||||||
|
commonjs2: 'vue',
|
||||||
|
amd: 'vue'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = cooking.resolve();
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import Message from './src/main.js';
|
||||||
|
|
||||||
|
module.exports = Message;
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
{
|
||||||
|
"name": "el-message",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"description": "A message component for Vue.js.",
|
||||||
|
"keywords": [
|
||||||
|
"element",
|
||||||
|
"vue",
|
||||||
|
"component"
|
||||||
|
],
|
||||||
|
"main": "./lib/index.js",
|
||||||
|
"repository": "https://github.com/element-component/element/tree/master/packages/message",
|
||||||
|
"author": "elemefe",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
let MessageConstructor = Vue.extend(require('./main.vue'));
|
||||||
|
|
||||||
|
let instance;
|
||||||
|
let instances = [];
|
||||||
|
let seed = 1;
|
||||||
|
|
||||||
|
var Message = function(options) {
|
||||||
|
options = options || {};
|
||||||
|
let userOnClose = options.onClose;
|
||||||
|
let id = 'message_' + seed++;
|
||||||
|
|
||||||
|
options.onClose = function() {
|
||||||
|
Message.close(id, userOnClose);
|
||||||
|
};
|
||||||
|
|
||||||
|
instance = new MessageConstructor({
|
||||||
|
data: options
|
||||||
|
});
|
||||||
|
instance.id = id;
|
||||||
|
instance.vm = instance.$mount();
|
||||||
|
document.body.appendChild(instance.vm.$el);
|
||||||
|
instance.vm.visible = true;
|
||||||
|
instance.dom = instance.vm.$el;
|
||||||
|
|
||||||
|
let topDist = 0;
|
||||||
|
for (let i = 0, len = instances.length; i < len; i++) {
|
||||||
|
topDist += instances[i].$el.offsetHeight + 16;
|
||||||
|
}
|
||||||
|
topDist += 16;
|
||||||
|
instance.top = topDist;
|
||||||
|
instances.push(instance);
|
||||||
|
};
|
||||||
|
|
||||||
|
Message.close = function(id, userOnClose) {
|
||||||
|
let index;
|
||||||
|
let removedHeight;
|
||||||
|
for (var i = 0, len = instances.length; i < len; i++) {
|
||||||
|
if (id === instances[i].id) {
|
||||||
|
if (typeof userOnClose === 'function') {
|
||||||
|
userOnClose(instances[i]);
|
||||||
|
}
|
||||||
|
index = i;
|
||||||
|
removedHeight = instances[i].dom.offsetHeight;
|
||||||
|
instances.splice(i, 1);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (len > 1) {
|
||||||
|
for (i = index; i < len - 1 ; i++) {
|
||||||
|
instances[i].dom.style.top = parseInt(instances[i].dom.style.top, 10) - removedHeight - 16 + 'px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Message;
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
<template>
|
||||||
|
<transition name="el-notification-fade">
|
||||||
|
<div class="el-notification" v-show="visible" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()">
|
||||||
|
<i class="el-notification__icon" :class="[ typeClass ]" v-if="type"></i>
|
||||||
|
<div class="el-notification__group" :style="{ 'margin-left': type ? '55px' : '0' }">
|
||||||
|
<span>{{ title }}</span>
|
||||||
|
<p>{{ message }}</p>
|
||||||
|
<div class="el-notification__closeBtn el-icon-close" @click="handleClose()"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script type="text/babel">
|
||||||
|
let typeMap = {
|
||||||
|
success: 'circle-check',
|
||||||
|
info: 'information',
|
||||||
|
warning: 'warning',
|
||||||
|
error: 'circle-cross'
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
visible: false,
|
||||||
|
title: '',
|
||||||
|
message: '',
|
||||||
|
duration: 4500,
|
||||||
|
type: '',
|
||||||
|
onClose: null,
|
||||||
|
|
||||||
|
closed: false,
|
||||||
|
top: null,
|
||||||
|
timer: null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
typeClass() {
|
||||||
|
return this.type ? `el-icon-${ typeMap[this.type] }` : '';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
closed(newVal) {
|
||||||
|
if (newVal) {
|
||||||
|
this.visible = false;
|
||||||
|
this.$el.addEventListener('transitionend', () => {
|
||||||
|
this.$destroy(true);
|
||||||
|
this.$el.parentNode.removeChild(this.$el);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
handleClose() {
|
||||||
|
this.closed = true;
|
||||||
|
if (typeof this.onClose === 'function') {
|
||||||
|
this.onClose();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
clearTimer() {
|
||||||
|
clearTimeout(this.timer);
|
||||||
|
},
|
||||||
|
|
||||||
|
startTimer() {
|
||||||
|
if (this.duration > 0) {
|
||||||
|
this.timer = setTimeout(() => {
|
||||||
|
if (!this.closed) {
|
||||||
|
this.handleClose();
|
||||||
|
}
|
||||||
|
}, this.duration);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
if (this.duration > 0) {
|
||||||
|
this.timer = setTimeout(() => {
|
||||||
|
if (!this.closed) {
|
||||||
|
this.handleClose();
|
||||||
|
}
|
||||||
|
}, this.duration);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
10
src/index.js
10
src/index.js
|
|
@ -48,6 +48,7 @@ import Col from '../packages/col/index.js';
|
||||||
import Upload from '../packages/upload/index.js';
|
import Upload from '../packages/upload/index.js';
|
||||||
import Progress from '../packages/progress/index.js';
|
import Progress from '../packages/progress/index.js';
|
||||||
import Spinner from '../packages/spinner/index.js';
|
import Spinner from '../packages/spinner/index.js';
|
||||||
|
import Message from '../packages/message/index.js';
|
||||||
|
|
||||||
const install = function(Vue) {
|
const install = function(Vue) {
|
||||||
if (install.installed) return;
|
if (install.installed) return;
|
||||||
|
|
@ -99,6 +100,7 @@ const install = function(Vue) {
|
||||||
Vue.component(Upload.name, Upload);
|
Vue.component(Upload.name, Upload);
|
||||||
Vue.component(Progress.name, Progress);
|
Vue.component(Progress.name, Progress);
|
||||||
Vue.component(Spinner.name, Spinner);
|
Vue.component(Spinner.name, Spinner);
|
||||||
|
Vue.component(Message.name, Message);
|
||||||
|
|
||||||
Vue.use(Loading);
|
Vue.use(Loading);
|
||||||
|
|
||||||
|
|
@ -107,15 +109,16 @@ const install = function(Vue) {
|
||||||
Vue.prototype.$confirm = MessageBox.confirm;
|
Vue.prototype.$confirm = MessageBox.confirm;
|
||||||
Vue.prototype.$prompt = MessageBox.prompt;
|
Vue.prototype.$prompt = MessageBox.prompt;
|
||||||
Vue.prototype.$notify = Notification;
|
Vue.prototype.$notify = Notification;
|
||||||
|
Vue.prototype.$message = Message;
|
||||||
};
|
};
|
||||||
|
|
||||||
auto install
|
// auto install
|
||||||
if (typeof window !== 'undefined' && window.Vue) {
|
if (typeof window !== 'undefined' && window.Vue) {
|
||||||
install(window.Vue);
|
install(window.Vue);
|
||||||
};
|
};
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
install
|
install,
|
||||||
Group,
|
Group,
|
||||||
SelectDropdown,
|
SelectDropdown,
|
||||||
Pagination,
|
Pagination,
|
||||||
|
|
@ -165,5 +168,6 @@ module.exports = {
|
||||||
Col,
|
Col,
|
||||||
Upload,
|
Upload,
|
||||||
Progress,
|
Progress,
|
||||||
Spinner
|
Spinner,
|
||||||
|
Message
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue