mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-11-30 11:17:38 +08:00
add message
This commit is contained in:
Leopoldthecoder
parent
7e05dab840
commit
557a09c647
@ -2,69 +2,68 @@
|
||||
module.exports = {
|
||||
methods: {
|
||||
open() {
|
||||
this.$notify({
|
||||
title: '标题名称',
|
||||
message: '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'
|
||||
this.$message({
|
||||
message: '这是一条消息提示'
|
||||
});
|
||||
},
|
||||
|
||||
open2() {
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '这是一条成功的提示消息',
|
||||
this.$message({
|
||||
message: '恭喜你，这是一条成功消息',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open3() {
|
||||
this.$notify({
|
||||
title: '警告',
|
||||
message: '这是一条警告的提示消息',
|
||||
this.$message({
|
||||
message: '警告哦，这是一条警告消息',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
this.$notify({
|
||||
title: '消息',
|
||||
message: '这是一条消息的提示消息',
|
||||
type: 'info'
|
||||
});
|
||||
},
|
||||
|
||||
open5() {
|
||||
this.$notify({
|
||||
title: '错误',
|
||||
message: '这是一条错误的提示消息',
|
||||
this.$message({
|
||||
message: '错了哦，这是一条错误消息',
|
||||
type: 'error'
|
||||
});
|
||||
},
|
||||
|
||||
open5() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '恭喜你，这是一条成功消息'
|
||||
});
|
||||
},
|
||||
|
||||
open6() {
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
message: '这是一条不会自动关闭的消息',
|
||||
duration: 0
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '警告哦，这是一条警告消息',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
open7() {
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
message: '这是一条带有回调函数的消息',
|
||||
onClose: this.onClose
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '错了哦，这是一条错误消息',
|
||||
type: 'error'
|
||||
});
|
||||
},
|
||||
|
||||
onClose() {
|
||||
console.log('Notification 已关闭');
|
||||
open8() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '错了哦，这是一条错误消息',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-box.demo-notification {
|
||||
.demo-box.demo-message {
|
||||
.el-button + .el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
@ -73,22 +72,21 @@
|
||||
|
||||
## 基本用法
|
||||
|
||||
<div class="demo-box demo-notification">
|
||||
<el-button :plain="true" v-on:click.native="open">点击展示 Notification</el-button>
|
||||
<div class="demo-box demo-message">
|
||||
<el-button :plain="true" v-on:click.native="open">打开消息提示</el-button>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<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>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$notify({
|
||||
title: '标题名称',
|
||||
message: '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'
|
||||
this.$message({
|
||||
message: '这是一条消息提示'
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -96,54 +94,40 @@
|
||||
</script>
|
||||
```
|
||||
|
||||
## 带有 icon
|
||||
|
||||
<div class="demo-box demo-notification">
|
||||
## 不同状态
|
||||
<div class="demo-box demo-message">
|
||||
<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>
|
||||
<el-button :plain="true" v-on:click.native="open4">错误</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>
|
||||
<el-button :plain="true" v-on:click.native="open4">错误</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open2() {
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '这是一条成功的提示消息',
|
||||
this.$message({
|
||||
message: '恭喜你，这是一条成功消息',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open3() {
|
||||
this.$notify({
|
||||
title: '警告',
|
||||
message: '这是一条警告的提示消息',
|
||||
this.$message({
|
||||
message: '警告哦，这是一条警告消息',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
this.$notify({
|
||||
title: '消息',
|
||||
message: '这是一条消息的提示消息',
|
||||
type: 'info'
|
||||
});
|
||||
},
|
||||
|
||||
open5() {
|
||||
this.$notify({
|
||||
title: '错误',
|
||||
message: '这是一条错误的提示消息',
|
||||
this.$message({
|
||||
message: '错了哦，这是一条错误消息',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
@ -152,54 +136,54 @@
|
||||
</script>
|
||||
```
|
||||
|
||||
## 不会自动关闭
|
||||
<div class="demo-box demo-notification">
|
||||
<el-button :plain="true" v-on:click.native="open6">不会自动关闭的 Notification</el-button>
|
||||
## 可关闭
|
||||
<div class="demo-box demo-message">
|
||||
<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>
|
||||
|
||||
```html
|
||||
<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>
|
||||
|
||||
<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
|
||||
open5() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '恭喜你，这是一条成功消息'
|
||||
});
|
||||
},
|
||||
|
||||
onClose() {
|
||||
console.log('Notification 已关闭');
|
||||
open6() {
|
||||
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
|
||||
import { Notification } from 'element-ui';
|
||||
import { Message } from 'element-ui';
|
||||
```
|
||||
|
||||
此时调用方法为 `Notification(options)`。
|
||||
此时调用方法为 `Message(options)`。
|
||||
|
||||
## API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| title | 标题 | string | | |
|
||||
| message | 说明文字 | string | | |
|
||||
| type | 主题 | string | 'success', 'warning', 'info', 'error' | |
|
||||
| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | | 4500 |
|
||||
| onClose | 关闭时的回调函数 | function | | |
|
||||
| message | 消息文字 | string | | |
|
||||
| type | 主题 | string | 'success', 'warning', 'info', 'error' | 'info' |
|
||||
| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | | 3000 |
|
||||
| showClose | 是否显示关闭按钮 | boolean | | false |
|
||||
| onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | | |
|
||||
|
||||
@ -4,36 +4,36 @@
|
||||
return {
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '标签1'
|
||||
label: '黄金糕'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '标签2'
|
||||
label: '双皮奶'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '标签3'
|
||||
label: '蚵仔煎'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '标签4'
|
||||
label: '龙须面'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '标签5'
|
||||
label: '北京烤鸭'
|
||||
}],
|
||||
options2: [{
|
||||
value: '选项1',
|
||||
label: '标签1'
|
||||
label: '黄金糕'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '标签2',
|
||||
label: '双皮奶',
|
||||
disabled: true
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '标签3'
|
||||
label: '蚵仔煎'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '标签4'
|
||||
label: '龙须面'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '标签5'
|
||||
label: '北京烤鸭'
|
||||
}],
|
||||
options3: [{
|
||||
label: '分组1',
|
||||
@ -59,39 +59,58 @@
|
||||
}],
|
||||
options4: [{
|
||||
value: '选项1',
|
||||
label: '标签1'
|
||||
label: '黄金糕'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '标签2'
|
||||
label: '双皮奶'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '标签3'
|
||||
label: '蚵仔煎'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '标签4'
|
||||
label: '龙须面'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '标签5'
|
||||
label: '北京烤鸭'
|
||||
}, {
|
||||
value: '选项6',
|
||||
label: '标签6'
|
||||
label: '炸酱面'
|
||||
}, {
|
||||
value: '选项7',
|
||||
label: '标签7'
|
||||
label: '羊蝎子'
|
||||
}, {
|
||||
value: '选项8',
|
||||
label: '标签8'
|
||||
label: '肉夹馍'
|
||||
}, {
|
||||
value: '选项9',
|
||||
label: '标签9'
|
||||
label: '回锅肉'
|
||||
}, {
|
||||
value: '选项10',
|
||||
label: '标签10'
|
||||
label: '小笼包'
|
||||
}, {
|
||||
value: '选项11',
|
||||
label: '标签11'
|
||||
label: '红烧肉'
|
||||
}],
|
||||
options5: [],
|
||||
cities: [{
|
||||
value: 'Beijing',
|
||||
label: '北京'
|
||||
}, {
|
||||
value: 'Shanghai',
|
||||
label: '上海'
|
||||
}, {
|
||||
value: 'Nanjing',
|
||||
label: '南京'
|
||||
}, {
|
||||
value: 'Chengdu',
|
||||
label: '成都'
|
||||
}, {
|
||||
value: 'Shenzhen',
|
||||
label: '深圳'
|
||||
}, {
|
||||
value: 'Guangzhou',
|
||||
label: '广州'
|
||||
}],
|
||||
value: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
@ -392,10 +411,11 @@
|
||||
|
||||
<el-select v-model="value6">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
v-for="item in cities"
|
||||
:label="item.label"
|
||||
: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-select>
|
||||
|
||||
@ -403,10 +423,11 @@
|
||||
<template>
|
||||
<el-select v-model="value6">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
v-for="item in cities"
|
||||
:label="item.label"
|
||||
: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-select>
|
||||
</template>
|
||||
@ -415,21 +436,24 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '标签1'
|
||||
cities: [{
|
||||
value: 'Beijing',
|
||||
label: '北京'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '标签2'
|
||||
value: 'Shanghai',
|
||||
label: '上海'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '标签3'
|
||||
value: 'Nanjing',
|
||||
label: '南京'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '标签4'
|
||||
value: 'Chengdu',
|
||||
label: '成都'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '标签5'
|
||||
value: 'Shenzhen',
|
||||
label: '深圳'
|
||||
}, {
|
||||
value: 'Guangzhou',
|
||||
label: '广州'
|
||||
}],
|
||||
value6: ''
|
||||
}
|
||||
|
||||
@ -25,9 +25,9 @@ var Message = function(options) {
|
||||
|
||||
let topDist = 0;
|
||||
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;
|
||||
instances.push(instance);
|
||||
};
|
||||
@ -49,7 +49,7 @@ Message.close = function(id, userOnClose) {
|
||||
|
||||
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';
|
||||
instances[i].dom.style.top = parseInt(instances[i].dom.style.top, 10) - removedHeight - 20 + 'px';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<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>
|
||||
<transition name="el-message-fade">
|
||||
<div class="el-message" v-show="visible" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer" @mouseleave="startTimer">
|
||||
<i class="el-message__icon" :class="[ typeClass ]"></i>
|
||||
<div class="el-message__group">
|
||||
<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>
|
||||
</transition>
|
||||
@ -23,12 +22,11 @@
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
title: '',
|
||||
message: '',
|
||||
duration: 4500,
|
||||
type: '',
|
||||
duration: 3000,
|
||||
type: 'info',
|
||||
onClose: null,
|
||||
|
||||
showClose: false,
|
||||
closed: false,
|
||||
top: null,
|
||||
timer: null
|
||||
@ -37,7 +35,7 @@
|
||||
|
||||
computed: {
|
||||
typeClass() {
|
||||
return this.type ? `el-icon-${ typeMap[this.type] }` : '';
|
||||
return `el-icon-${ typeMap[this.type] }`;
|
||||
}
|
||||
},
|
||||
|
||||
@ -77,13 +75,7 @@
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.duration > 0) {
|
||||
this.timer = setTimeout(() => {
|
||||
if (!this.closed) {
|
||||
this.handleClose();
|
||||
}
|
||||
}, this.duration);
|
||||
}
|
||||
this.startTimer();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -281,6 +281,7 @@
|
||||
|
||||
visible(val) {
|
||||
if (!val) {
|
||||
this.$refs.reference.$el.querySelector('input').blur();
|
||||
this.$el.querySelector('.el-input__icon').classList.remove('is-reverse');
|
||||
this.broadcast('select-dropdown', 'destroyPopper');
|
||||
if (this.$refs.input) {
|
||||
@ -423,6 +424,9 @@
|
||||
},
|
||||
|
||||
toggleMenu() {
|
||||
if (this.filterable && this.query === '' && this.visible) {
|
||||
return;
|
||||
}
|
||||
if (!this.disabled) {
|
||||
this.visible = !this.visible;
|
||||
if (this.remote && this.visible) {
|
||||
@ -472,7 +476,9 @@
|
||||
},
|
||||
|
||||
selectOption() {
|
||||
if (this.options[this.hoverIndex]) {
|
||||
this.handleOptionSelect(this.options[this.hoverIndex]);
|
||||
}
|
||||
},
|
||||
|
||||
deleteSelected(event) {
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
@import "./popover.css";
|
||||
@import "./tooltip.css";
|
||||
@import "./autocomplete.css";
|
||||
@import "./message.css";
|
||||
@import "./message-box.css";
|
||||
@import "./date-picker.css";
|
||||
@import "./time-picker.css";
|
||||
|
||||
72
packages/theme-default/src/message.css
Normal file
72
packages/theme-default/src/message.css
Normal 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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user