您的位置：首页 > Web前端 > Vue.js

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

2019-11-01 07:06 1851 查看

因为项目中用的是 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 抽屉

相关文章推荐

新的分享

章节导航