diff --git a/examples/routers/drawer.vue b/examples/routers/drawer.vue
index 3876f3f..c1f000d 100644
--- a/examples/routers/drawer.vue
+++ b/examples/routers/drawer.vue
@@ -5,69 +5,68 @@
-
+
+ 一些内容
+ 一些内容
+ 一些内容
+
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+ 一些内容
+
一些内容
- 一些内容
- 一些内容
-
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
- 一些内容
-
-
+
一些内容
一些内容
一些内容
@@ -126,7 +125,7 @@
一些内容
一些内容22
-
+
一些内容
一些内容
一些内容
@@ -207,6 +206,9 @@
methods: {
handleClose () {
this.$Message.info('关闭了');
+ },
+ hrw (w) {
+ console.log(w);
}
}
};
diff --git a/src/components/drawer/drawer.vue b/src/components/drawer/drawer.vue
index 3c63589..09512b9 100644
--- a/src/components/drawer/drawer.vue
+++ b/src/components/drawer/drawer.vue
@@ -15,6 +15,15 @@
+
@@ -27,6 +36,8 @@
import Emitter from '../../mixins/emitter';
import ScrollbarMixins from '../modal/mixins-scrollbar';
+ import { on, off } from '../../utils/dom';
+
const prefixCls = 'ivu-drawer';
export default {
@@ -90,6 +101,11 @@
inner: {
type: Boolean,
default: false
+ },
+ // Whether drag and drop is allowed to adjust width
+ draggable: {
+ type: Boolean,
+ default: false
}
},
data () {
@@ -98,6 +114,11 @@
visible: this.value,
wrapShow: false,
showHead: true,
+ canMove: false,
+ dragWidth: this.width,
+ wrapperWidth: this.width,
+ wrapperLeft: 0,
+ minWidth: 256
};
},
computed: {
@@ -108,14 +129,15 @@
[`${prefixCls}-hidden`]: !this.wrapShow,
[`${this.className}`]: !!this.className,
[`${prefixCls}-no-mask`]: !this.mask,
- [`${prefixCls}-wrap-inner`]: this.inner
+ [`${prefixCls}-wrap-inner`]: this.inner,
+ [`${prefixCls}-wrap-dragging`]: this.canMove
}
];
},
mainStyles () {
let style = {};
- const width = parseInt(this.width);
+ const width = parseInt(this.dragWidth);
const styleWidth = {
width: width <= 100 ? `${width}%` : `${width}px`
@@ -168,6 +190,38 @@
const className = event.target.getAttribute('class');
if (className && className.indexOf(`${prefixCls}-wrap`) > -1) this.handleMask();
},
+ handleMousemove (event) {
+ if (!this.canMove || !this.draggable) return;
+ // 更新容器宽度和距离左侧页面距离，如果是window则距左侧距离为0
+ this.handleSetWrapperWidth();
+ const left = event.pageX - this.wrapperLeft;
+ // 如果抽屉方向为右边，宽度计算需用容器宽度减去left
+ let width = this.placement === 'right' ? this.wrapperWidth - left : left;
+ // 限定最小宽度
+ width = Math.max(width, parseFloat(this.minWidth));
+ event.atMin = width === parseFloat(this.minWidth);
+ // 如果当前width不大于100，视为百分比
+ if (width <= 100) width = (width / this.wrapperWidth) * 100;
+ this.dragWidth = width;
+ this.$emit('on-resize-width', parseInt(this.dragWidth));
+ },
+ handleSetWrapperWidth () {
+ const {
+ width,
+ left
+ } = this.$el.getBoundingClientRect();
+ this.wrapperWidth = width;
+ this.wrapperLeft = left;
+ },
+ handleMouseup () {
+ if (!this.draggable) return;
+ this.canMove = false;
+ },
+ handleTriggerMousedown () {
+ this.canMove = true;
+ // 防止鼠标选中抽屉中文字，造成拖动trigger触发浏览器原生拖动行为
+ window.getSelection().removeAllRanges();
+ },
},
mounted () {
if (this.visible) {
@@ -181,8 +235,14 @@
}
this.showHead = showHead;
+
+ on(document, 'mousemove', this.handleMousemove);
+ on(document, 'mouseup', this.handleMouseup);
+ this.handleSetWrapperWidth();
},
beforeDestroy () {
+ off(document, 'mousemove', this.handleMousemove);
+ off(document, 'mouseup', this.handleMouseup);
this.removeScrollEffect();
},
watch: {
diff --git a/src/styles/components/drawer.less b/src/styles/components/drawer.less
index 6f2570f..de90312 100644
--- a/src/styles/components/drawer.less
+++ b/src/styles/components/drawer.less
@@ -36,6 +36,10 @@
position: absolute;
overflow: hidden;
}
+
+ &-dragging{
+ user-select: none;
+ }
}
&-wrap * {
@@ -93,4 +97,36 @@
&-no-mask{
pointer-events: none;
}
+
+ &-drag{
+ top: 0;
+ height: 100%;
+ width: 0;
+ position: absolute;
+ &-left{
+ right: 0;
+ }
+ &-move-trigger{
+ width: 8px;
+ height: 100px;
+ line-height: 100px;
+ position: absolute;
+ top: 50%;
+ background: rgb(243, 243, 243);
+ transform: translate(-50%, -50%);
+ border-radius: ~"4px / 6px";
+ box-shadow: 0 0 1px 1px rgba(0, 0, 0, .2);
+ cursor: col-resize;
+ &-point{
+ display: inline-block;
+ width: 50%;
+ transform: translateX(50%);
+ i{
+ display: block;
+ border-bottom: 1px solid rgb(192, 192, 192);
+ padding-bottom: 2px;
+ }
+ }
+ }
+ }
}
\ No newline at end of file
--
libgit2 0.21.4