update Drawer

This commit is contained in:
梁灏 2018-08-23 16:49:36 +08:00
parent 749665eee7
commit f59e6e89ad
2 changed files with 127 additions and 3 deletions

View file

@ -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>

View file

@ -1,4 +1,4 @@
// used for Modal & $Spin
// used for Modal & $Spin & Drawer
import { getScrollBarSize } from '../../utils/assist';
export default {
methods: {