drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

support Modal

Browse source 
support Modal
This commit is contained in:
梁灏 2017-03-09 18:31:47 +08:00
parent f97e5bb01a
commit 6259471f4c
9 changed files with 153 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
CHANGE.md
View file

@ -48,4 +48,6 @@ class 改为 className
### DatePicker
使用 v-model
### LoadingBar
部分 prop 移至 data
部分 prop 移至 data
### Modal
visible 改为 value，使用 v-model，style 改为 styles，$Modal 的关闭有改动，建议后面在纯 html 模式下测试

2
README.md
View file

@ -39,7 +39,7 @@
- [x] Card
- [ ] Message
- [ ] Notice
- [ ] Modal
- [x] Modal
- [x] Progress
- [x] Badge
- [x] Collapse

1
examples/app.vue
View file

@ -51,6 +51,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
<li><router-link to="/form">Form</router-link></li>
<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>
</ul>
</nav>
<router-view></router-view>

4
examples/main.js
View file

@ -168,6 +168,10 @@ const router = new VueRouter({
{
path: '/loading-bar',
component: require('./routers/loading-bar.vue')
},
{
path: '/modal',
component: require('./routers/modal.vue')
}
]
});

94
examples/routers/modal.vue Normal file
View file

@ -0,0 +1,94 @@
<template>
<div>
<i-button @click.native="instance('info')">消息</i-button>
<i-button @click.native="instance('success')">成功</i-button>
<i-button @click.native="instance('warning')">警告</i-button>
<i-button @click.native="instance('error')">错误</i-button>
</div>
</template>
<script>
export default {
methods: {
instance (type) {
const title = '对话框的标题';
const content = '<p>一些对话框内容</p><p>一些对话框内容</p>';
switch (type) {
case 'info':
this.$Modal.info({
title: title,
content: content
});
break;
case 'success':
this.$Modal.success({
title: title,
content: content
});
break;
case 'warning':
this.$Modal.warning({
title: title,
content: content
});
break;
case 'error':
this.$Modal.error({
title: title,
content: content
});
break;
}
}
}
}
</script>
<!--<template>-->
<!--<div>-->
<!--<i-button @click.native="confirm">标准</i-button>-->
<!--<i-button @click.native="custom">自定义按钮文字</i-button>-->
<!--<i-button @click.native="async">异步关闭</i-button>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--methods: {-->
<!--confirm () {-->
<!--this.$Modal.confirm({-->
<!--title: '确认对话框标题',-->
<!--content: '<p>一些对话框内容</p><p>一些对话框内容</p>',-->
<!--onOk: () => {-->
<!--console.log('确定');-->
<!--// this.$Message.info('点击了确定');-->
<!--},-->
<!--onCancel: () => {-->
<!--console.log('取消');-->
<!--// 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);-->
<!--}-->
<!--});-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->

2
src/components/loading-bar/loading-bar.vue
View file

@ -6,7 +6,7 @@
</transition>
</template>
<script>
import { oneOf } from '../../utils/assist';
// import { oneOf } from '../../utils/assist';
const prefixCls = 'ivu-loading-bar';

16
src/components/modal/confirm.js
View file

@ -17,18 +17,18 @@ Modal.newInstance = properties => {
const div = document.createElement('div');
div.innerHTML = `
<Modal${props} :visible.sync="visible" :width="width" :scrollable.sync="scrollable">
<Modal${props} v-model="visible" :width="width" :scrollable="scrollable">
<div class="${prefixCls}">
<div class="${prefixCls}-head">
<div class="${prefixCls}-head-title">{{{ title }}}</div>
<div class="${prefixCls}-head-title" v-html="title"></div>
</div>
<div class="${prefixCls}-body">
<div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
{{{ body }}}
<div v-html="body"></div>
</div>
<div class="${prefixCls}-footer">
<i-button type="text" size="large" v-if="showCancel" @click="cancel">{{ cancelText }}</i-button>
<i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
<i-button type="text" size="large" v-if="showCancel" @click.native="cancel">{{ cancelText }}</i-button>
<i-button type="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ okText }}</i-button>
</div>
</div>
</Modal>
@ -68,7 +68,7 @@ Modal.newInstance = properties => {
},
methods: {
cancel () {
this.visible = false;
this.$children[0].visible = false;
this.buttonLoading = false;
this.onCancel();
this.remove();
@ -77,7 +77,7 @@ Modal.newInstance = properties => {
if (this.loading) {
this.buttonLoading = true;
} else {
this.visible = false;
this.$children[0].visible = false;
this.remove();
}
this.onOk();
@ -89,7 +89,7 @@ Modal.newInstance = properties => {
},
destroy () {
this.$destroy();
document.body.removeChild(div);
document.body.removeChild(this.$el);
this.onRemove();
},
onOk () {},

63
src/components/modal/modal.vue
View file

@ -1,24 +1,30 @@
<template>
<div :class="maskClasses" v-show="visible" @click="mask" transition="fade"></div>
<div :class="wrapClasses" @click="handleWrapClick">
<div :class="classes" :style="styles" v-show="visible" transition="ease">
<div :class="[prefixCls + '-content']">
<a :class="[prefixCls + '-close']" v-if="closable" @click="close">
<slot name="close">
<Icon type="ios-close-empty"></Icon>
</slot>
</a>
<div :class="[prefixCls + '-header']" v-if="showHead" v-el:head><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
<div :class="[prefixCls + '-body']"><slot></slot></div>
<div :class="[prefixCls + '-footer']" v-if="!footerHide">
<slot name="footer">
<i-button type="text" size="large" @click="cancel">{{ cancelText }}</i-button>
<i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
</slot>
<span>
<transition name="fade">
<div :class="maskClasses" v-show="visible" @click="mask"></div>
</transition>
<div :class="wrapClasses" @click="handleWrapClick">
<transition name="ease">
<div :class="classes" :style="mainStyles" v-show="visible">
<div :class="[prefixCls + '-content']">
<a :class="[prefixCls + '-close']" v-if="closable" @click="close">
<slot name="close">
<Icon type="ios-close-empty"></Icon>
</slot>
</a>
<div :class="[prefixCls + '-header']" v-if="showHead"><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
<div :class="[prefixCls + '-body']"><slot></slot></div>
<div :class="[prefixCls + '-footer']" v-if="!footerHide">
<slot name="footer">
<i-button type="text" size="large" @click.native="cancel">{{ cancelText }}</i-button>
<i-button type="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ okText }}</i-button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</div>
</div>
</span>
</template>
<script>
import Icon from '../icon';
@ -31,7 +37,7 @@
export default {
components: { Icon, iButton },
props: {
visible: {
value: {
type: Boolean,
default: false
},
@ -66,7 +72,7 @@
type: Boolean,
default: false
},
style: {
styles: {
type: Object
},
className: {
@ -87,7 +93,8 @@
prefixCls: prefixCls,
wrapShow: false,
showHead: true,
buttonLoading: false
buttonLoading: false,
visible: this.value
};
},
computed: {
@ -106,14 +113,14 @@
classes () {
return `${prefixCls}`;
},
styles () {
mainStyles () {
let style = {};
const styleWidth = {
width: `${this.width}px`
};
const customStyle = this.style ? this.style : {};
const customStyle = this.styles ? this.styles : {};
Object.assign(style, styleWidth, customStyle);
@ -123,6 +130,7 @@
methods: {
close () {
this.visible = false;
this.$emit('input', false);
this.$emit('on-cancel');
},
mask () {
@ -143,6 +151,7 @@
this.buttonLoading = true;
} else {
this.visible = false;
this.$emit('input', false);
}
this.$emit('on-ok');
},
@ -182,14 +191,14 @@
this.resetScrollBar();
}
},
ready () {
mounted () {
if (this.visible) {
this.wrapShow = true;
}
let showHead = true;
if (this.$els.head.innerHTML == `<div class="${prefixCls}-header-inner"></div>` && !this.title) {
if (this.$slots.head === undefined && !this.title) {
showHead = false;
}
@ -203,6 +212,10 @@
this.removeScrollEffect();
},
watch: {
value (val) {
this.visible = val;
console.log(this.visible)
},
visible (val) {
if (val === false) {
this.buttonLoading = false;

6
src/index.js
View file

@ -22,7 +22,7 @@ import InputNumber from './components/input-number';
import LoadingBar from './components/loading-bar';
import Menu from './components/menu';
// import Message from './components/message';
// import Modal from './components/modal';
import Modal from './components/modal';
// import Notice from './components/notice';
import Page from './components/page';
import Poptip from './components/poptip';
@ -81,7 +81,7 @@ const iview = {
MenuItem: Menu.Item,
Submenu: Menu.Sub,
// Message,
// Modal,
Modal,
// Notice,
iOption: Option,
OptionGroup,
@ -123,7 +123,7 @@ const install = function (Vue, opts = {}) {
Vue.prototype.$Loading = LoadingBar;
// Vue.prototype.$Message = Message;
// Vue.prototype.$Modal = Modal;
Vue.prototype.$Modal = Modal;
// Vue.prototype.$Notice = Notice;
};