From f59e6e89ad2fa12340a17bff0c204cd396fa9068 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Thu, 23 Aug 2018 16:49:36 +0800
Subject: [PATCH] update Drawer
---
src/components/drawer/drawer.vue | 126 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
src/components/modal/mixins-scrollbar.js | 2 +-
2 files changed, 126 insertions(+), 2 deletions(-)
diff --git a/src/components/drawer/drawer.vue b/src/components/drawer/drawer.vue
index 869c776..48e89f3 100644
--- a/src/components/drawer/drawer.vue
+++ b/src/components/drawer/drawer.vue
@@ -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,
};
},
+ 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>
\ No newline at end of file
diff --git a/src/components/modal/mixins-scrollbar.js b/src/components/modal/mixins-scrollbar.js
index 87f305d..f6ce263 100644
--- a/src/components/modal/mixins-scrollbar.js
+++ b/src/components/modal/mixins-scrollbar.js
@@ -1,4 +1,4 @@
-// used for Modal & $Spin
+// used for Modal & $Spin & Drawer
import { getScrollBarSize } from '../../utils/assist';
export default {
methods: {
--
libgit2 0.21.4