Drawer add draggable prop
This commit is contained in:
梁灏
parent
4616d882d5
commit
a17511c397
3 changed files with 160 additions and 62 deletions
|
|
@ -5,69 +5,68 @@
|
|||
<Button @click="visible3 = true">show3</Button>
|
||||
|
||||
<div style="width: 500px;height:500px;background: green;position: relative;">
|
||||
|
||||
<Drawer v-model="visible" placement="left" draggable inner :transfer="false" width="50" @on-resize-width="hrw" title="抽屉标题" :styles="styles" @on-close="handleClose">
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<Button @click="visible2 = true">show2</Button>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
</Drawer>
|
||||
</div>
|
||||
|
||||
<Drawer v-model="visible" width="70" inner title="抽屉标题" :styles="styles" @on-close="handleClose">
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<Button @click="visible2 = true">show2</Button>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
</Drawer>
|
||||
|
||||
|
||||
<Drawer v-model="visible2" title="抽屉标题" placement="right">
|
||||
<Drawer v-model="visible2" draggable title="抽屉标题" placement="right">
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
|
|
@ -126,7 +125,7 @@
|
|||
<p>一些内容</p>
|
||||
<p>一些内容22</p>
|
||||
</Drawer>
|
||||
<Drawer v-model="visible3" placement="left">
|
||||
<Drawer v-model="visible3" draggable placement="left">
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
|
|
@ -207,6 +206,9 @@
|
|||
methods: {
|
||||
handleClose () {
|
||||
this.$Message.info('关闭了');
|
||||
},
|
||||
hrw (w) {
|
||||
console.log(w);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -15,6 +15,15 @@
|
|||
<div :class="[prefixCls + '-header']" 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 class="ivu-drawer-drag" :class="{ 'ivu-drawer-drag-left': placement === 'left' }" v-if="draggable" @mousedown="handleTriggerMousedown">
|
||||
<slot name="trigger">
|
||||
<div class="ivu-drawer-drag-move-trigger">
|
||||
<div class="ivu-drawer-drag-move-trigger-point">
|
||||
<i></i><i></i><i></i><i></i><i></i>
|
||||
</div>
|
||||
</div>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue