源代码代码
<template>
<div class="">
<div class="setbox" :class="isshow ? showClass : ''" :style="drawerStyle">
<div class="content">
<div class="close" :class="type=='left'?'left':'right'" @click="close">
<i v-if="type=='left'" :class="isshow?'el-icon-d-arrow-left':'el-icon-d-arrow-right'"></i>
<i v-else :class="isshow?'el-icon-d-arrow-right':'el-icon-d-arrow-left'"></i>
</div>
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: "demo",
props: {
isshow: {
type: Boolean,
default: false,
},
type: {
type: String,
default: "left",
},
width: {
type: Number,
default: 275,
},
},
computed: {
drawerStyle() {
return this.type == "left"
? {
width: `${this.width}px`,
left: `-${this.width-56}px`,
}
: {
width: `${this.width}px`,
right: `-${this.width}px`,
};
},
showClass() {
return this.type == "left" ? "show-left" : "show-right";
},
},
data() {
return {
};
},
methods: {
close() {
this.$emit("close");
},
},
};
</script>
<style lang="scss" scoped>
.setbox {
position: fixed;
z-index: 99;
top: 90px;
bottom: 0px;
width: 275px;
height: 100%;
background: #25262a;
border: 2px solid #010112;
box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.12);
border-top: none;
border-bottom: none;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
.content {
width: 100%;
height: 100%;
position: relative;
}
.close {
position: absolute;
top: 0;
width: 28px;
height: 30px;
background: #25262a;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid #010112;
&.left {
right: -30px;
border-radius: 0px 6px 6px 0px;
}
&.right {
border-radius: 6px 0px 0px 6px;
left: -30px;
}
i {
color: #9a9a9a;
}
}
}
.show-left {
left: 55px !important;
}
.show-right {
right: 0 !important;
}
</style>
使用
<drawer :isshow="isshow1" @close="close1" type="right">
<span style="color: #fff">123123</span>
</drawer>