github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

add message

pull/2/head
Leopoldthecoder 2016-08-15 16:10:12 +08:00
parent 7e05dab840
commit 557a09c647
7 changed files with 242 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
examples/docs/message.md
View File

@ -2,69 +2,68 @@
module.exports = { module.exports = {
methods: { methods: {
open() { open() {
this.$notify({ this.$message({
title: '标题名称', message: '这是一条消息提示'
message: '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'
}); });
}, },
open2() { open2() {
this.$notify({ this.$message({
title: '成功', message: '恭喜你，这是一条成功消息',
message: '这是一条成功的提示消息',
type: 'success' type: 'success'
}); });
}, },
open3() { open3() {
this.$notify({ this.$message({
title: '警告', message: '警告哦，这是一条警告消息',
message: '这是一条警告的提示消息',
type: 'warning' type: 'warning'
}); });
}, },
open4() { open4() {
this.$notify({ this.$message({
title: '消息', message: '错了哦，这是一条错误消息',
message: '这是一条消息的提示消息',
type: 'info'
});
},
open5() {
this.$notify({
title: '错误',
message: '这是一条错误的提示消息',
type: 'error' type: 'error'
}); });
}, },
open5() {
this.$message({
showClose: true,
message: '恭喜你，这是一条成功消息'
});
},
open6() { open6() {
this.$notify({ this.$message({
title: '提示', showClose: true,
message: '这是一条不会自动关闭的消息', message: '警告哦，这是一条警告消息',
duration: 0 type: 'warning'
}); });
}, },
open7() { open7() {
this.$notify({ this.$message({
title: '提示', showClose: true,
message: '这是一条带有回调函数的消息', message: '错了哦，这是一条错误消息',
onClose: this.onClose type: 'error'
}); });
}, },
onClose() { open8() {
console.log('Notification 已关闭'); this.$message({
showClose: true,
message: '错了哦，这是一条错误消息',
type: 'error'
});
} }
} }
}; };
</script> </script>
<style> <style>
.demo-box.demo-notification { .demo-box.demo-message {
.el-button + .el-button { .el-button + .el-button {
margin-left: 10px; margin-left: 10px;
} }
@ -73,22 +72,21 @@
## 基本用法 ## 基本用法
<div class="demo-box demo-notification"> <div class="demo-box demo-message">
<el-button :plain="true" v-on:click.native="open">点击展示 Notification</el-button> <el-button :plain="true" v-on:click.native="open">打开消息提示</el-button>
</div> </div>
```html ```html
<template> <template>
<el-button :plain="true" v-on:click.native="open">点击展示 Notification</el-button> <el-button :plain="true" v-on:click.native="open">打开消息提示</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open() { open() {
this.$notify({ this.$message({
title: '标题名称', message: '这是一条消息提示'
message: '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'
}); });
} }
} }
@ -96,54 +94,40 @@
</script> </script>
``` ```
## 带有 icon ## 不同状态
<div class="demo-box demo-message">
<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="open2">成功</el-button>
<el-button :plain="true" v-on:click.native="open3">警告</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="open4">错误</el-button>
<el-button :plain="true" v-on:click.native="open5">错误</el-button>
</div> </div>
```html ```html
<template> <template>
<el-button :plain="true" v-on:click.native="open2">成功</el-button> <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="open3">警告</el-button>
<el-button :plain="true" v-on:click.native="open4">消息</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> </template>
<script> <script>
export default { export default {
methods: { methods: {
open2() { open2() {
this.$notify({ this.$message({
title: '成功', message: '恭喜你，这是一条成功消息',
message: '这是一条成功的提示消息',
type: 'success' type: 'success'
}); });
}, },
open3() { open3() {
this.$notify({ this.$message({
title: '警告', message: '警告哦，这是一条警告消息',
message: '这是一条警告的提示消息',
type: 'warning' type: 'warning'
}); });
}, },
open4() { open4() {
this.$notify({ this.$message({
title: '消息', message: '错了哦，这是一条错误消息',
message: '这是一条消息的提示消息',
type: 'info'
});
},
open5() {
this.$notify({
title: '错误',
message: '这是一条错误的提示消息',
type: 'error' type: 'error'
}); });
} }
@ -152,54 +136,54 @@
</script> </script>
``` ```
## 不会自动关闭 ## 可关闭
<div class="demo-box demo-notification"> <div class="demo-box demo-message">
<el-button :plain="true" v-on:click.native="open6">不会自动关闭的 Notification</el-button> <el-button :plain="true" v-on:click.native="open5">消息</el-button>
<el-button :plain="true" v-on:click.native="open6">成功</el-button>
<el-button :plain="true" v-on:click.native="open7">警告</el-button>
<el-button :plain="true" v-on:click.native="open8">错误</el-button>
</div> </div>
```html ```html
<template> <template>
<el-button :plain="true" v-on:click.native="open6">不会自动关闭的 Notification</el-button> <el-button :plain="true" v-on:click.native="open5">消息</el-button>
<el-button :plain="true" v-on:click.native="open6">成功</el-button>
<el-button :plain="true" v-on:click.native="open7">警告</el-button>
<el-button :plain="true" v-on:click.native="open8">错误</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open6() { open5() {
this.$notify({ this.$message({
title: '提示', showClose: true,
message: '这是一条不会自动关闭的消息', 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() { open6() {
console.log('Notification 已关闭'); this.$message({
showClose: true,
message: '警告哦，这是一条警告消息',
type: 'warning'
});
},
open7() {
this.$message({
showClose: true,
message: '错了哦，这是一条错误消息',
type: 'error'
});
},
open8() {
this.$message({
showClose: true,
message: '错了哦，这是一条错误消息',
type: 'error'
});
} }
} }
} }
@ -208,23 +192,23 @@
## 全局方法 ## 全局方法
element 为 Vue.prototype 添加了全局方法 $notify。因此在 vue instance 中可以采用本页面中的方式调用 `Notification`。 element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 `Message`。
## 单独引用 ## 单独引用
单独引入 `Notification`： 单独引入 `Message`：
```javascript ```javascript
import { Notification } from 'element-ui'; import { Message } from 'element-ui';
``` ```
此时调用方法为 `Notification(options)`。 此时调用方法为 `Message(options)`。
## API ## API
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| title | 标题 | string | | | | message | 消息文字 | string | | |
| message | 说明文字 | string | | | | type | 主题 | string | 'success', 'warning', 'info', 'error' | 'info' |
| type | 主题 | string | 'success', 'warning', 'info', 'error' | | | duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | | 3000 |
| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | | 4500 | | showClose | 是否显示关闭按钮 | boolean | | false |
| onClose | 关闭时的回调函数 | function | | | | onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | | |

96
examples/docs/select.md
View File

@ -4,36 +4,36 @@
return { return {
options: [{ options: [{
value: '选项1', value: '选项1',
label: '标签1' label: '黄金糕'
}, { }, {
value: '选项2', value: '选项2',
label: '标签2' label: '双皮奶'
}, { }, {
value: '选项3', value: '选项3',
label: '标签3' label: '蚵仔煎'
}, { }, {
value: '选项4', value: '选项4',
label: '标签4' label: '龙须面'
}, { }, {
value: '选项5', value: '选项5',
label: '标签5' label: '北京烤鸭'
}], }],
options2: [{ options2: [{
value: '选项1', value: '选项1',
label: '标签1' label: '黄金糕'
}, { }, {
value: '选项2', value: '选项2',
label: '标签2', label: '双皮奶',
disabled: true disabled: true
}, { }, {
value: '选项3', value: '选项3',
label: '标签3' label: '蚵仔煎'
}, { }, {
value: '选项4', value: '选项4',
label: '标签4' label: '龙须面'
}, { }, {
value: '选项5', value: '选项5',
label: '标签5' label: '北京烤鸭'
}], }],
options3: [{ options3: [{
label: '分组1', label: '分组1',
@ -59,39 +59,58 @@
}], }],
options4: [{ options4: [{
value: '选项1', value: '选项1',
label: '标签1' label: '黄金糕'
}, { }, {
value: '选项2', value: '选项2',
label: '标签2' label: '双皮奶'
}, { }, {
value: '选项3', value: '选项3',
label: '标签3' label: '蚵仔煎'
}, { }, {
value: '选项4', value: '选项4',
label: '标签4' label: '龙须面'
}, { }, {
value: '选项5', value: '选项5',
label: '标签5' label: '北京烤鸭'
}, { }, {
value: '选项6', value: '选项6',
label: '标签6' label: '炸酱面'
}, { }, {
value: '选项7', value: '选项7',
label: '标签7' label: '羊蝎子'
}, { }, {
value: '选项8', value: '选项8',
label: '标签8' label: '肉夹馍'
}, { }, {
value: '选项9', value: '选项9',
label: '标签9' label: '回锅肉'
}, { }, {
value: '选项10', value: '选项10',
label: '标签10' label: '小笼包'
}, { }, {
value: '选项11', value: '选项11',
label: '标签11' label: '红烧肉'
}], }],
options5: [], options5: [],
cities: [{
value: 'Beijing',
label: '北京'
}, {
value: 'Shanghai',
label: '上海'
}, {
value: 'Nanjing',
label: '南京'
}, {
value: 'Chengdu',
label: '成都'
}, {
value: 'Shenzhen',
label: '深圳'
}, {
value: 'Guangzhou',
label: '广州'
}],
value: '', value: '',
value2: '', value2: '',
value3: '', value3: '',
@ -392,10 +411,11 @@
<el-select v-model="value6"> <el-select v-model="value6">
<el-option <el-option
v-for="item in options" v-for="item in cities"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
<span>label: {{ item.label }}, value: {{ item.value }}</span> <span style="float: left">{{ item.label }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
</el-option> </el-option>
</el-select> </el-select>
@ -403,10 +423,11 @@
<template> <template>
<el-select v-model="value6"> <el-select v-model="value6">
<el-option <el-option
v-for="item in options" v-for="item in cities"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
<span>label: {{ item.label }}, value: {{ item.value }}</span> <span style="float: left">{{ item.label }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
</el-option> </el-option>
</el-select> </el-select>
</template> </template>
@ -415,21 +436,24 @@
export default { export default {
data() { data() {
return { return {
options: [{ cities: [{
value: '选项1', value: 'Beijing',
label: '标签1' label: '北京'
}, { }, {
value: '选项2', value: 'Shanghai',
label: '标签2' label: '上海'
}, { }, {
value: '选项3', value: 'Nanjing',
label: '标签3' label: '南京'
}, { }, {
value: '选项4', value: 'Chengdu',
label: '标签4' label: '成都'
}, { }, {
value: '选项5', value: 'Shenzhen',
label: '标签5' label: '深圳'
}, {
value: 'Guangzhou',
label: '广州'
}], }],
value6: '' value6: ''
} }

6
packages/message/src/main.js
View File

@ -25,9 +25,9 @@ var Message = function(options) {
let topDist = 0; let topDist = 0;
for (let i = 0, len = instances.length; i < len; i++) { for (let i = 0, len = instances.length; i < len; i++) {
topDist += instances[i].$el.offsetHeight + 16; topDist += instances[i].$el.offsetHeight + 20;
} }
topDist += 16; topDist += 20;
instance.top = topDist; instance.top = topDist;
instances.push(instance); instances.push(instance);
}; };
@ -49,7 +49,7 @@ Message.close = function(id, userOnClose) {
if (len > 1) { if (len > 1) {
for (i = index; i < len - 1 ; i++) { for (i = index; i < len - 1 ; i++) {
instances[i].dom.style.top = parseInt(instances[i].dom.style.top, 10) - removedHeight - 16 + 'px'; instances[i].dom.style.top = parseInt(instances[i].dom.style.top, 10) - removedHeight - 20 + 'px';
} }
} }
}; };

28
packages/message/src/main.vue
View File

@ -1,11 +1,10 @@
<template> <template>
<transition name="el-notification-fade"> <transition name="el-message-fade">
<div class="el-notification" v-show="visible" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()"> <div class="el-message" v-show="visible" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer" @mouseleave="startTimer">
<i class="el-notification__icon" :class="[ typeClass ]" v-if="type"></i> <i class="el-message__icon" :class="[ typeClass ]"></i>
<div class="el-notification__group" :style="{ 'margin-left': type ? '55px' : '0' }"> <div class="el-message__group">
<span>{{ title }}</span>
<p>{{ message }}</p> <p>{{ message }}</p>
<div class="el-notification__closeBtn el-icon-close" @click="handleClose()"></div> <div v-if="showClose" class="el-message__closeBtn el-icon-close" @click="handleClose"></div>
</div> </div>
</div> </div>
</transition> </transition>
@ -23,12 +22,11 @@
data() { data() {
return { return {
visible: false, visible: false,
title: '',
message: '', message: '',
duration: 4500, duration: 3000,
type: '', type: 'info',
onClose: null, onClose: null,
showClose: false,
closed: false, closed: false,
top: null, top: null,
timer: null timer: null
@ -37,7 +35,7 @@
computed: { computed: {
typeClass() { typeClass() {
return this.type ? `el-icon-${ typeMap[this.type] }` : ''; return `el-icon-${ typeMap[this.type] }`;
} }
}, },
@ -77,13 +75,7 @@
}, },
mounted() { mounted() {
if (this.duration > 0) { this.startTimer();
this.timer = setTimeout(() => {
if (!this.closed) {
this.handleClose();
}
}, this.duration);
}
} }
}; };
</script> </script>

8
packages/select/src/select.vue
View File

@ -281,6 +281,7 @@
visible(val) { visible(val) {
if (!val) { if (!val) {
this.$refs.reference.$el.querySelector('input').blur();
this.$el.querySelector('.el-input__icon').classList.remove('is-reverse'); this.$el.querySelector('.el-input__icon').classList.remove('is-reverse');
this.broadcast('select-dropdown', 'destroyPopper'); this.broadcast('select-dropdown', 'destroyPopper');
if (this.$refs.input) { if (this.$refs.input) {
@ -423,6 +424,9 @@
}, },
toggleMenu() { toggleMenu() {
if (this.filterable && this.query === '' && this.visible) {
return;
}
if (!this.disabled) { if (!this.disabled) {
this.visible = !this.visible; this.visible = !this.visible;
if (this.remote && this.visible) { if (this.remote && this.visible) {
@ -472,7 +476,9 @@
}, },
selectOption() { selectOption() {
this.handleOptionSelect(this.options[this.hoverIndex]); if (this.options[this.hoverIndex]) {
this.handleOptionSelect(this.options[this.hoverIndex]);
}
}, },
deleteSelected(event) { deleteSelected(event) {

1
packages/theme-default/src/index.css
View File

@ -15,6 +15,7 @@
@import "./popover.css"; @import "./popover.css";
@import "./tooltip.css"; @import "./tooltip.css";
@import "./autocomplete.css"; @import "./autocomplete.css";
@import "./message.css";
@import "./message-box.css"; @import "./message-box.css";
@import "./date-picker.css"; @import "./date-picker.css";
@import "./time-picker.css"; @import "./time-picker.css";

72
packages/theme-default/src/message.css Normal file
View File

@ -0,0 +1,72 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b message {
box-shadow:0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
width: 300px;
padding: 10px 12px;
box-sizing: border-box;
border-radius: 2px;
position: fixed;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
transition: opacity 0.3s, top 0.4s;
overflow: hidden;
z-index: 1000;
@e group {
margin-left: 28px;
position: relative;
& p {
font-size: 14px;
line-height: 20px;
margin: 0 20px 0 0;
color: #8492a6;
text-align: justify;
}
}
@e icon {
size: 20px;
font-size: 20px;
float: left;
position: relative;
}
@e closeBtn {
position: absolute 3px 0 * *;
cursor: pointer;
color: #C0CCDA;
font-size: 14px;
&:hover {
color: #99A9BF;
}
}
& .el-icon-circle-check {
color: #13ce66;
}
& .el-icon-circle-cross {
color: #ff4949;
}
& .el-icon-information {
color: #50bfff;
}
& .el-icon-warning {
color: #f7ba2a;
}
}
.el-message-fade-enter,
.el-message-fade-leave-active {
opacity: 0;
}
}