自定义简易vue抽屉组件
<template><div class="drawer"><div :class="open?'mask':''" @click=&am
·
<template>
<div class="drawer">
<div :class="open?'mask':''" @click="close"/>
<div :class="open?'open':'close'">
<div class="header">
<p class="fl">标题</p>
<el-button class="fr mt-10" @click="close">关闭</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
open: false
}
},
methods: {
close() {
this.open = 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;
left: 0;
top: 0;
width: 800px;
height: 100%;
background: #fff;
transition: left linear 1s;
.header {
margin: 0 20px;
height: 56px;
border-bottom: 1px solid #dddddd;
p {
margin-top: 18px;
}
}
}
}
</style>
更多推荐
已为社区贡献4条内容
所有评论(0)