站长资源网络编程
VUE组件中的 Drawer 抽屉实现代码
简介因为项目中用的是 element-ui 框架，而这个框架并没有抽屉组件，所以自己实现一个，具体代码如下：drawer.vue
因为项目中用的是 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 "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"color: #ff0000">总结
以上所述是小编给大家介绍的VUE组件中的 Drawer 抽屉实现代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
下一篇：浅入深出Vue之自动化路由