drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Drawer add placement: top & bottom

Browse source
This commit is contained in:
梁灏 2021-05-25 17:22:19 +08:00
parent 899c7009b2
commit 5e1cd7bae3
2 changed files with 80 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/components/drawer/drawer.vue
View file

@ -4,7 +4,7 @@
<div :class="maskClasses" :style="maskStyle" v-show="visible" v-if="mask" @click="handleMask"></div>
</transition>
<div :class="wrapClasses" @click="handleWrapClick">
<transition :name="'move-' + placement">
<transition :name="transitionName">
<div :class="classes" :style="mainStyles" v-show="visible">
<div :class="contentClasses" ref="content">
<a class="ivu-drawer-close" v-if="closable" @click="close">
@ -15,7 +15,7 @@
<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">
<div class="ivu-drawer-drag" :class="'ivu-drawer-drag-' + placement" v-if="draggable" @mousedown="handleTriggerMousedown">
<slot name="trigger">
<div class="ivu-drawer-drag-move-trigger">
<div class="ivu-drawer-drag-move-trigger-point">
@ -57,6 +57,11 @@
type: [Number, String],
default: 256
},
// 4.6.0
height: {
type: [Number, String],
default: 256
},
closable: {
type: Boolean,
default: true
@ -79,9 +84,10 @@
type: Boolean,
default: false
},
// 4.6.0 add top, bottom
placement: {
validator (value) {
return oneOf(value, ['left', 'right']);
return oneOf(value, ['left', 'right', 'top', 'bottom']);
},
default: 'right'
},
@ -117,9 +123,12 @@
showHead: true,
canMove: false,
dragWidth: this.width,
dragHeight: this.height,
wrapperWidth: this.width,
wrapperHeight: this.height,
wrapperLeft: 0,
minWidth: 256
minWidth: 256,
minHeight: 256
};
},
computed: {
@ -138,13 +147,23 @@
mainStyles () {
let style = {};
const width = parseInt(this.dragWidth);
if (this.placement === 'left' || this.placement === 'right') {
const width = parseInt(this.dragWidth);
const styleWidth = {
width: width <= 100 ? `${width}%` : `${width}px`
};
const styleWidth = {
width: width <= 100 ? `${width}%` : `${width}px`
};
Object.assign(style, styleWidth);
Object.assign(style, styleWidth);
} else {
const height = parseInt(this.dragHeight);
const styleHeight = {
height: height <= 100 ? `${height}%` : `${height}px`
};
Object.assign(style, styleHeight);
}
return style;
},
@ -173,6 +192,11 @@
[`${prefixCls}-mask-inner`]: this.inner
}
];
},
transitionName () {
if (this.placement === 'left' || this.placement === 'right') return `move-${this.placement}`;
else if (this.placement === 'top') return 'move-up';
else return 'move-down';
}
},
methods: {
@ -306,7 +330,10 @@
},
width (val) {
this.dragWidth = val;
},
height (val) {
this.dragHeight = val;
}
}
};
</script>
</script>

44
src/styles/components/drawer.less
View file

@ -16,6 +16,14 @@
&-right{
right: 0;
}
&-top, &-bottom{
width: 100%;
height: auto;
top: auto;
}
&-bottom{
bottom: 0;
}
&-hidden {
display: none !important;
@ -110,6 +118,17 @@
&-left{
right: 0;
}
&-top, &-bottom{
top: auto;
width: 100%;
height: 0;
}
&-top{
bottom: 0;
}
&-bottom{
top: 0;
}
&-move-trigger{
width: 8px;
height: 100px;
@ -118,7 +137,7 @@
top: 50%;
background: rgb(243, 243, 243);
transform: translate(-50%, -50%);
border-radius: ~"4px / 6px";
border-radius: 4px;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, .2);
cursor: col-resize;
&-point{
@ -132,5 +151,28 @@
}
}
}
&-top &-move-trigger, &-bottom &-move-trigger{
width: 100px;
height: 8px;
line-height: 8px;
top: auto;
left: 50%;
cursor: row-resize;
&-point{
width: 100%;
height: 50%;
transform: translateY(-75%);
text-align: center;
i{
display: inline-block;
border-bottom: inherit;
width: 1px;
height: 100%;
border-left: 1px solid rgb(192, 192, 192);
padding-bottom: inherit;
margin-left: 2px;
}
}
}
}
}