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

因为项目中用的是element-ui框架，而这个框架并没有抽屉组件，所以自己实现一个，具体代

因为项目中用的是 element-ui 框架，而这个框架并没有抽屉组件，所以自己实现一个，具体代码如下：

drawer.vue

<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>

总结

以上所述是小编给大家介绍的VUE组件中的 Drawer 抽屉实现代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！ 如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

VUE组件 Drawer 抽屉