update Drawer
This commit is contained in:
parent
749665eee7
commit
f59e6e89ad
2 changed files with 127 additions and 3 deletions
|
@ -1,5 +1,27 @@
|
|||
<template>
|
||||
<div></div>
|
||||
<div v-transfer-dom :data-transfer="transfer">
|
||||
<transition name="fade">
|
||||
<div class="ivu-drawer-mask" :style="maskStyle" v-show="visible" v-if="mask" @click="handleMask"></div>
|
||||
</transition>
|
||||
<div :class="wrapClasses" @click="handleWrapClick">
|
||||
<transition name="fade">
|
||||
<div class="ivu-drawer" :style="mainStyles" v-show="visible">
|
||||
<div :class="contentClasses" ref="content" :style="contentStyles">
|
||||
<a class="ivu-drawer-close" v-if="closable" @click="close">
|
||||
<slot name="close">
|
||||
<Icon type="ios-close"></Icon>
|
||||
</slot>
|
||||
</a>
|
||||
<div :class="[prefixCls + '-header']"
|
||||
@mousedown="handleMoveStart"
|
||||
v-if="showHead"
|
||||
><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
|
||||
<div :class="[prefixCls + '-body']" :style="styles"><slot></slot></div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Icon from '../icon';
|
||||
|
@ -61,15 +83,117 @@
|
|||
return !this.$IVIEW || this.$IVIEW.transfer === '' ? true : this.$IVIEW.transfer;
|
||||
}
|
||||
},
|
||||
className: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
visible: this.value,
|
||||
wrapShow: false,
|
||||
showHead: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
computed: {
|
||||
wrapClasses () {
|
||||
return [
|
||||
`${prefixCls}-wrap`,
|
||||
{
|
||||
[`${prefixCls}-hidden`]: !this.wrapShow,
|
||||
[`${this.className}`]: !!this.className,
|
||||
[`${prefixCls}-no-mask`]: !this.mask
|
||||
}
|
||||
];
|
||||
},
|
||||
mainStyles () {
|
||||
let style = {};
|
||||
|
||||
const width = parseInt(this.width);
|
||||
|
||||
const styleWidth = {
|
||||
width: width <= 100 ? `${width}%` : `${width}px`
|
||||
};
|
||||
|
||||
Object.assign(style, styleWidth);
|
||||
|
||||
return style;
|
||||
},
|
||||
contentClasses () {
|
||||
return [
|
||||
`${prefixCls}-content`,
|
||||
{
|
||||
[`${prefixCls}-content-no-mask`]: !this.mask
|
||||
}
|
||||
];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
close () {
|
||||
this.visible = false;
|
||||
this.$emit('input', false);
|
||||
this.$emit('on-close');
|
||||
},
|
||||
handleMask () {
|
||||
if (this.maskClosable && this.mask) {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
handleWrapClick (event) {
|
||||
// use indexOf,do not use === ,because ivu-modal-wrap can have other custom className
|
||||
const className = event.target.getAttribute('class');
|
||||
if (className && className.indexOf(`${prefixCls}-wrap`) > -1) this.handleMask();
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
if (this.visible) {
|
||||
this.wrapShow = true;
|
||||
}
|
||||
|
||||
let showHead = true;
|
||||
|
||||
if (this.$slots.header === undefined && !this.title) {
|
||||
showHead = false;
|
||||
}
|
||||
|
||||
this.showHead = showHead;
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.removeScrollEffect();
|
||||
},
|
||||
watch: {
|
||||
value (val) {
|
||||
this.visible = val;
|
||||
},
|
||||
visible (val) {
|
||||
if (val === false) {
|
||||
this.timer = setTimeout(() => {
|
||||
this.wrapShow = false;
|
||||
this.removeScrollEffect();
|
||||
}, 300);
|
||||
} else {
|
||||
if (this.timer) clearTimeout(this.timer);
|
||||
this.wrapShow = true;
|
||||
if (!this.scrollable) {
|
||||
this.addScrollEffect();
|
||||
}
|
||||
}
|
||||
this.broadcast('Table', 'on-visible-change', val);
|
||||
this.broadcast('Slider', 'on-visible-change', val); // #2852
|
||||
this.$emit('on-visible-change', val);
|
||||
},
|
||||
scrollable (val) {
|
||||
if (!val) {
|
||||
this.addScrollEffect();
|
||||
} else {
|
||||
this.removeScrollEffect();
|
||||
}
|
||||
},
|
||||
title (val) {
|
||||
if (this.$slots.header === undefined) {
|
||||
this.showHead = !!val;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
|
@ -1,4 +1,4 @@
|
|||
// used for Modal & $Spin
|
||||
// used for Modal & $Spin & Drawer
|
||||
import { getScrollBarSize } from '../../utils/assist';
|
||||
export default {
|
||||
methods: {
|
||||
|
|
Loading…
Add table
Reference in a new issue