效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190925155855633.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NDE5NjE3,size_16,color_FFFFFF,t_70)
代码
<template>
<div class="drawer">
<span class="field-label">Open Drawer : </span>
<el-switch v-model="isopen" />
<div :class="isopen?'mask':''" @click="close"/>
<div :class="isopen?'open':'close'">
<div class="header">
<p class="fl">标题</p>
</div>
<el-button class="fr mt-10" @click="close">关闭</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isopen: false
}
},
methods: {
close() {
this.isopen = false
}
}
}
</script>
<style lang="scss" scoped>
.drawer {
.mask {
position: fixed;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .1);
}
.close {
position: absolute;
z-index: 10;
left: -800px;
top: 0;
width: 800px;
height: 100%;
background: #fff;
transition: left linear 1s;
}
.open {
position: absolute;
z-index: 10;
right: 0;
top: 0;
width: 400px;
height: 100%;
background: #fff;
transition: left linear 1s;
.header {
margin: 0 20px;
height: 40px;
border-bottom: 1px solid #dddddd;
p {
margin-top: 30px;
}
}
}
}
</style>