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

add inner prop

Browse source
This commit is contained in:
梁灏 2018-08-24 12:03:52 +08:00
parent ab58648e93
commit 8a3c7282f8
3 changed files with 88 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

118
examples/routers/drawer.vue
View file

@ -3,63 +3,67 @@
<Button @click="visible = true">show1</Button>
<Button @click="visible2 = true">show2</Button>
<Button @click="visible3 = true">show3</Button>
<Drawer v-model="visible" title="抽屉标题" :styles="styles" width="520">
<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 style="width: 500px;height:500px;background: green;position: relative;">
<Drawer v-model="visible" title="抽屉标题" :styles="styles" :transfer="false" inner>
<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="visible2" title="抽屉标题" placement="right">
<p>一些内容</p>

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

@ -1,7 +1,7 @@
<template>
<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>
<div :class="maskClasses" :style="maskStyle" v-show="visible" v-if="mask" @click="handleMask"></div>
</transition>
<div :class="wrapClasses" @click="handleWrapClick">
<transition :name="'move-' + placement">
@ -86,6 +86,10 @@
},
className: {
type: String
},
inner: {
type: Boolean,
default: false
}
},
data () {
@ -103,7 +107,8 @@
{
[`${prefixCls}-hidden`]: !this.wrapShow,
[`${this.className}`]: !!this.className,
[`${prefixCls}-no-mask`]: !this.mask
[`${prefixCls}-no-mask`]: !this.mask,
[`${prefixCls}-wrap-inner`]: this.inner
}
];
},
@ -134,6 +139,15 @@
`${prefixCls}-${this.placement}`,
{
[`${prefixCls}-no-header`]: !this.showHead,
[`${prefixCls}-inner`]: this.inner
}
];
},
maskClasses () {
return [
`${prefixCls}-mask`,
{
[`${prefixCls}-mask-inner`]: this.inner
}
];
}

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

@ -6,6 +6,10 @@
position: fixed;
top: 0;
&-inner{
position: absolute;
}
&-left{
left: 0;
}
@ -27,6 +31,10 @@
z-index: @zindex-drawer;
-webkit-overflow-scrolling: touch;
outline: 0;
&-inner{
position: absolute;
}
}
&-wrap * {
@ -36,6 +44,9 @@
&-mask {
.mask;
&-inner{
position: absolute;
}
}
&-content {