VUE组件中的 Drawer 抽屉实现代码

<template>
 <div class="drawer">
 <div :class="maskClass" @click="closeByMask"></div>
 <div :class="mainClass" :style="mainStyle" class="main">
 <div class="drawer-head">
 <span>{{ title }}</span>
 <span class="close-btn" v-show="closable" @click="closeByButton">X</span>
 </div>
 <div class="drawer-body">
 <slot/>
 </div>
 </div>
 </div>
</template>
<script>
export default {
 props: {
 // 是否打开
 display: {
 type: Boolean
 },
 // 标题
 title: {
 type: String,
 default: '标题'
 },
 // 是否显示关闭按钮
 closable: {
 type: Boolean,
 default: true
 },
 // 是否显示遮罩
 mask: {
 type: Boolean,
 default: true
 },
 // 是否点击遮罩关闭
 maskClosable: {
 type: Boolean,
 default: true
 },
 // 宽度
 width: {
 type: String,
 default: '400px'
 },
 // 是否在父级元素中打开
 inner: {
 type: Boolean,
 default: false
 }
 },
 computed: {
 maskClass: function () {
 return {
 'mask-show': (this.mask && this.display),
 'mask-hide': !(this.mask && this.display),
 'inner': this.inner
 }
 },
 mainClass: function () {
 return {
 'main-show': this.display,
 'main-hide': !this.display,
 'inner': this.inner
 }
 },
 mainStyle: function () {
 return {
 width: this.width,
 right: this.display ? '0' : `-${this.width}`,
 borderLeft: this.mask ? 'none' : '1px solid #eee'
 }
 }
 },
 mounted () {
 if (this.inner) {
 let box = this.$el.parentNode
 box.style.position = 'relative'
 }
 },
 methods: {
 closeByMask () {
 this.maskClosable && this.$emit('update:display', false)
 },
 closeByButton () {
 this.$emit('update:display', false)
 }
 }
}
</script>
<style lang="scss" scoped>
.drawer {
 /* 遮罩 */
 .mask-show {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 10;
 background-color: rgba(0,0,0,.5);
 opacity: 1;
 transition: opacity .5s;
 }
 .mask-hide {
 opacity: 0;
 transition: opacity .5s;
 }
 /* 滑块 */
 .main {
 position: fixed;
 z-index: 10;
 top: 0;
 height: 100%;
 background: #fff;
 transition: all 0.5s;
 }
 .main-show {
 opacity: 1;
 }
 .main-hide {
 opacity: 0;
 }
 /* 某个元素内部显示 */
 .inner {
 position: absolute;
 }
 /* 其他样式 */
 .drawer-head {
 display: flex;
 justify-content: space-between;
 height: 45px;
 line-height: 45px;
 padding: 0 15px;
 font-size: 14px;
 font-weight: bold;
 border-bottom: 1px solid #eee;
 .close-btn {
 display: inline-block;
 cursor: pointer;
 height: 100%;
 padding-left: 20px;
 }
 }
 .drawer-body {
 font-size: 14px;
 padding: 15px;
 }
}
</style>

<template>
 <div class="box">
 <el-button type="primary" @click="display = true">打开抽屉</el-button>
 <drawer title="我是一个抽屉组件" :display.sync="display" :inner="true" :width="drawerWidth" :mask="false">
 1. Hello, world!
 2. Do you like it?
 </drawer>
 </div>
</template>
<script>
import drawer from '@/components/drawer/drawer'
export default {
 components: { drawer },
 data () {
 return {
 display: false,
 drawerWidth: '500px'
 } 
 }
}
</script>