support Message
support Message
This commit is contained in:
梁灏
parent
a538b6751f
commit
6cadeba44f
11 changed files with 59 additions and 67 deletions
|
|
@ -50,4 +50,9 @@ class 改为 className
|
|||
### LoadingBar
|
||||
部分 prop 移至 data
|
||||
### Modal
|
||||
visible 改为 value，使用 v-model，style 改为 styles，$Modal 的关闭有改动，建议后面在纯 html 模式下测试
|
||||
visible 改为 value，使用 v-model，style 改为 styles，$Modal 的关闭有改动，建议后面在纯 html 模式下测试
|
||||
### Table
|
||||
i-table 改为 Table
|
||||
### Message
|
||||
notice.vue 的 key 改为了 name，style 改为 styles
|
||||
notification.vue 的 key 改为了 name，style 改为 styles
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
- [x] Form
|
||||
- [x] Alert
|
||||
- [x] Card
|
||||
- [ ] Message
|
||||
- [x] Message
|
||||
- [ ] Notice
|
||||
- [x] Modal
|
||||
- [x] Progress
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
|
|||
<li><router-link to="/table">Table</router-link></li>
|
||||
<li><router-link to="/loading-bar">LoadingBar</router-link></li>
|
||||
<li><router-link to="/modal">Modal</router-link></li>
|
||||
<li><router-link to="/message">Message</router-link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<router-view></router-view>
|
||||
|
|
|
|||
|
|
@ -172,6 +172,10 @@ const router = new VueRouter({
|
|||
{
|
||||
path: '/modal',
|
||||
component: require('./routers/modal.vue')
|
||||
},
|
||||
{
|
||||
path: '/message',
|
||||
component: require('./routers/message.vue')
|
||||
}
|
||||
]
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,44 +1,20 @@
|
|||
<template>
|
||||
<i-button @click="confirm">标准</i-button>
|
||||
<i-button @click="custom">自定义按钮文字</i-button>
|
||||
<i-button @click="async">异步关闭</i-button>
|
||||
<i-button @click.native="time">显示一个10秒的提示</i-button>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
confirm () {
|
||||
this.$Modal.confirm({
|
||||
title: '确认对话框标题',
|
||||
content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
|
||||
onOk: () => {
|
||||
this.$Message.info('点击了确定');
|
||||
},
|
||||
onCancel: () => {
|
||||
this.$Message.info('点击了取消');
|
||||
}
|
||||
});
|
||||
},
|
||||
custom () {
|
||||
this.$Modal.confirm({
|
||||
title: '确认对话框标题',
|
||||
content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
|
||||
okText: 'OK',
|
||||
cancelText: 'Cancel'
|
||||
});
|
||||
},
|
||||
async () {
|
||||
this.$Modal.confirm({
|
||||
title: '确认对话框标题',
|
||||
content: '<p>对话框将在 2秒 后关闭</p>',
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
setTimeout(() => {
|
||||
this.$Modal.remove();
|
||||
this.$Message.info('异步关闭了对话框');
|
||||
}, 2000);
|
||||
}
|
||||
time () {
|
||||
this.$Message.info('我将在10秒后消失', 3, () => {
|
||||
console.log(1111)
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$Message.config({
|
||||
top: 50,
|
||||
duration: 3
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -24,8 +24,8 @@ Notification.newInstance = properties => {
|
|||
notice (noticeProps) {
|
||||
notification.add(noticeProps);
|
||||
},
|
||||
remove (key) {
|
||||
notification.close(key);
|
||||
remove (name) {
|
||||
notification.close(name);
|
||||
},
|
||||
component: notification,
|
||||
destroy () {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
<template>
|
||||
<div :class="classes" :style="style" :transition="transitionName">
|
||||
<div :class="[baseClass + '-content']" v-el:content>{{{ content }}}</div>
|
||||
<a :class="[baseClass + '-close']" @click="close" v-if="closable">
|
||||
<i class="ivu-icon ivu-icon-ios-close-empty"></i>
|
||||
</a>
|
||||
</div>
|
||||
<transition :name="transitionName">
|
||||
<div :class="classes" :style="styles">
|
||||
<div :class="[baseClass + '-content']" ref="content" v-html="content"></div>
|
||||
<a :class="[baseClass + '-close']" @click="close" v-if="closable">
|
||||
<i class="ivu-icon ivu-icon-ios-close-empty"></i>
|
||||
</a>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
|
@ -21,7 +23,7 @@
|
|||
type: String,
|
||||
default: ''
|
||||
},
|
||||
style: {
|
||||
styles: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
|
|
@ -36,7 +38,7 @@
|
|||
className: {
|
||||
type: String
|
||||
},
|
||||
key: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
|
|
@ -80,10 +82,10 @@
|
|||
close () {
|
||||
this.clearCloseTimer();
|
||||
this.onClose();
|
||||
this.$parent.close(this.key);
|
||||
this.$parent.close(this.name);
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
created () {
|
||||
this.clearCloseTimer();
|
||||
|
||||
if (this.duration !== 0) {
|
||||
|
|
@ -94,7 +96,7 @@
|
|||
|
||||
// check if with desc in Notice component
|
||||
if (this.prefixCls === 'ivu-notice') {
|
||||
this.withDesc = this.$els.content.querySelectorAll(`.${this.prefixCls}-desc`)[0].innerHTML !== '';
|
||||
this.withDesc = this.$refs.content.querySelectorAll(`.${this.prefixCls}-desc`)[0].innerHTML !== '';
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
|
|
|
|||
|
|
@ -1,18 +1,21 @@
|
|||
<template>
|
||||
<div :class="classes" :style="style">
|
||||
<Notice v-for="notice in notices"
|
||||
<div :class="classes" :style="styles">
|
||||
<Notice
|
||||
v-for="notice in notices"
|
||||
:key="notice"
|
||||
:prefix-cls="prefixCls"
|
||||
:style="notice.style"
|
||||
:styles="notice.styles"
|
||||
:content="notice.content"
|
||||
:duration="notice.duration"
|
||||
:closable="notice.closable"
|
||||
:key="notice.key"
|
||||
:name="notice.name"
|
||||
:transition-name="notice.transitionName"
|
||||
:on-close="notice.onClose">
|
||||
</Notice>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// todo :key="notice"
|
||||
import Notice from './notice.vue';
|
||||
|
||||
const prefixCls = 'ivu-notification';
|
||||
|
|
@ -30,7 +33,7 @@
|
|||
type: String,
|
||||
default: prefixCls
|
||||
},
|
||||
style: {
|
||||
styles: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {
|
||||
|
|
@ -63,25 +66,25 @@
|
|||
},
|
||||
methods: {
|
||||
add (notice) {
|
||||
const key = notice.key || getUuid();
|
||||
const name = notice.name || getUuid();
|
||||
|
||||
let _notice = Object.assign({
|
||||
style: {
|
||||
styles: {
|
||||
right: '50%'
|
||||
},
|
||||
content: '',
|
||||
duration: 1.5,
|
||||
closable: false,
|
||||
key: key
|
||||
name: name
|
||||
}, notice);
|
||||
|
||||
this.notices.push(_notice);
|
||||
},
|
||||
close (key) {
|
||||
close (name) {
|
||||
const notices = this.notices;
|
||||
|
||||
for (let i = 0; i < notices.length; i++) {
|
||||
if (notices[i].key === key) {
|
||||
if (notices[i].name === name) {
|
||||
this.notices.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ const prefixKey = 'ivu_message_key_';
|
|||
let defaultDuration = 1.5;
|
||||
let top;
|
||||
let messageInstance;
|
||||
let key = 1;
|
||||
let name = 1;
|
||||
|
||||
const iconTypes = {
|
||||
'info': 'information-circled',
|
||||
|
|
@ -20,7 +20,7 @@ const iconTypes = {
|
|||
function getMessageInstance () {
|
||||
messageInstance = messageInstance || Notification.newInstance({
|
||||
prefixCls: prefixCls,
|
||||
style: {
|
||||
styles: {
|
||||
top: `${top}px`
|
||||
}
|
||||
});
|
||||
|
|
@ -42,9 +42,9 @@ function notice (content, duration = defaultDuration, type, onClose) {
|
|||
let instance = getMessageInstance();
|
||||
|
||||
instance.notice({
|
||||
key: `${prefixKey}${key}`,
|
||||
name: `${prefixKey}${name}`,
|
||||
duration: duration,
|
||||
style: {},
|
||||
styles: {},
|
||||
transitionName: 'move-up',
|
||||
content: `
|
||||
<div class="${prefixCls}-custom-content ${prefixCls}-${type}">
|
||||
|
|
@ -57,7 +57,7 @@ function notice (content, duration = defaultDuration, type, onClose) {
|
|||
|
||||
// 用于手动消除
|
||||
return (function () {
|
||||
let target = key++;
|
||||
let target = name++;
|
||||
|
||||
return function () {
|
||||
instance.remove(`${prefixKey}${target}`);
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@
|
|||
</table>
|
||||
</template>
|
||||
<script>
|
||||
// todo :key="row"
|
||||
import Cell from './cell.vue';
|
||||
import Mixin from './mixin';
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import Input from './components/input';
|
|||
import InputNumber from './components/input-number';
|
||||
import LoadingBar from './components/loading-bar';
|
||||
import Menu from './components/menu';
|
||||
// import Message from './components/message';
|
||||
import Message from './components/message';
|
||||
import Modal from './components/modal';
|
||||
// import Notice from './components/notice';
|
||||
import Page from './components/page';
|
||||
|
|
@ -80,7 +80,7 @@ const iview = {
|
|||
MenuGroup: Menu.Group,
|
||||
MenuItem: Menu.Item,
|
||||
Submenu: Menu.Sub,
|
||||
// Message,
|
||||
Message,
|
||||
Modal,
|
||||
// Notice,
|
||||
iOption: Option,
|
||||
|
|
@ -122,7 +122,7 @@ const install = function (Vue, opts = {}) {
|
|||
});
|
||||
|
||||
Vue.prototype.$Loading = LoadingBar;
|
||||
// Vue.prototype.$Message = Message;
|
||||
Vue.prototype.$Message = Message;
|
||||
Vue.prototype.$Modal = Modal;
|
||||
// Vue.prototype.$Notice = Notice;
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue