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

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

@ -1,7 +1,7 @@
<template> <template>
<div v-transfer-dom :data-transfer="transfer"> <div v-transfer-dom :data-transfer="transfer">
<transition name="fade"> <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> </transition>
<div :class="wrapClasses" @click="handleWrapClick"> <div :class="wrapClasses" @click="handleWrapClick">
<transition :name="'move-' + placement"> <transition :name="'move-' + placement">
@ -86,6 +86,10 @@
}, },
className: { className: {
type: String type: String
},
inner: {
type: Boolean,
default: false
} }
}, },
data () { data () {
@ -103,7 +107,8 @@
{ {
[`${prefixCls}-hidden`]: !this.wrapShow, [`${prefixCls}-hidden`]: !this.wrapShow,
[`${this.className}`]: !!this.className, [`${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}-${this.placement}`,
{ {
[`${prefixCls}-no-header`]: !this.showHead, [`${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; position: fixed;
top: 0; top: 0;
&-inner{
position: absolute;
}
&-left{ &-left{
left: 0; left: 0;
} }
@ -27,6 +31,10 @@
z-index: @zindex-drawer; z-index: @zindex-drawer;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
outline: 0; outline: 0;
&-inner{
position: absolute;
}
} }
&-wrap * { &-wrap * {
@ -36,6 +44,9 @@
&-mask { &-mask {
.mask; .mask;
&-inner{
position: absolute;
}
} }
&-content { &-content {