blackteay/vue-antd-admin
1
0
Fork 0
mirror of https://github.com/iczer/vue-antd-admin synced 2025-04-06 04:00:06 +08:00
Code Issues Projects Releases Wiki Activity

feat: add right side support

Browse Source
This commit is contained in:
chenghx 2018-08-21 17:51:47 +08:00
parent 6b2688a840
commit cb90759253
1 changed files with 57 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/tool/Drawer.vue
View File

@ -2,11 +2,14 @@
<div > <div >
<div :class="['mask', openDrawer ? 'open' : 'close']" @click="close"></div> <div :class="['mask', openDrawer ? 'open' : 'close']" @click="close"></div>
<div :class="['drawer', placement, openDrawer ? 'open' : 'close']"> <div :class="['drawer', placement, openDrawer ? 'open' : 'close']">
<div style="position: relative; height: 100%"> <div ref="drawer" style="position: relative; height: 100%;">
<slot></slot> <slot></slot>
</div> </div>
<div class="button" @click="handle"> <div v-if="showHandler" :class="['handler-container', placement]" ref="handler" @click="handle">
<a-icon type="bars" /> <slot v-if="$slots.handler" name="handler"></slot>
<div v-else class="handler">
<a-icon :type="openDrawer ? 'close' : 'bars'" />
</div>
</div> </div>
</div> </div>
</div> </div>
@ -17,6 +20,11 @@ import AIcon from 'ant-design-vue/es/icon/icon'
export default { export default {
name: 'Drawer', name: 'Drawer',
components: {AIcon}, components: {AIcon},
data () {
return {
drawerWidth: 0
}
},
props: { props: {
openDrawer: { openDrawer: {
type: Boolean, type: Boolean,
@ -27,6 +35,23 @@ export default {
type: String, type: String,
required: false, required: false,
default: 'left' default: 'left'
},
showHandler: {
type: Boolean,
required: false,
default: true
}
},
mounted () {
this.drawerWidth = this.getDrawerWidth()
},
watch: {
'drawerWidth': function (val) {
if (this.placement === 'left') {
this.$refs.handler.style.left = val + 'px'
} else {
this.$refs.handler.style.right = val + 'px'
}
} }
}, },
methods: { methods: {
@ -38,6 +63,9 @@ export default {
}, },
handle () { handle () {
this.$emit('change', !this.openDrawer) this.$emit('change', !this.openDrawer)
},
getDrawerWidth () {
return this.$refs.drawer.clientWidth
} }
} }
} }
@ -64,36 +92,50 @@ export default {
transition: all 0.5s; transition: all 0.5s;
z-index: 100; z-index: 100;
&.left{ &.left{
left: 0px;
&.open{ &.open{
box-shadow: 2px 0 8px rgba(0,0,0,.15);
} }
&.close{ &.close{
transform: translateX(-100%); transform: translateX(-100%);
} }
} }
&.right{ &.right{
right: 0px;
&.open{ &.open{
right: 0; box-shadow: -2px 0 8px rgba(0,0,0,.15);
} }
&.close{ &.close{
right: -100%; transform: translateX(100%);
} }
} }
.sider{ .sider{
height: 100%; height: 100%;
} }
} }
.button{ .handler-container{
height: 40px;
width: 40px;
background-color: #fff;
border-radius: 0 5px 5px 0;
position: fixed; position: fixed;
left: 256px;
top: 200px; top: 200px;
z-index: 100;
font-size: 26px;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
text-align: center; text-align: center;
line-height: 40px; transition: all 0.5s;
.handler{
height: 40px;
width: 40px;
background-color: #fff;
z-index: 100;
font-size: 26px;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
line-height: 40px;
}
&.left{
.handler{
border-radius: 0 5px 5px 0;
}
}
&.right{
.handler{
border-radius: 5px 0 0 5px;
}
}
} }
</style> </style>