Because the project uses the element-ui framework, and this framework does not have a drawer component, I implement one by myself, and the specific code is as follows:
<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: {
// Whether to open display: {
type: Boolean
},
// Title title: {
type: String,
default: 'title'
},
// Whether to display the close button closable: {
type: Boolean,
default: true
},
// Whether to display mask mask: {
type: Boolean,
default: true
},
// Whether to click the mask to close maskClosable: {
type: Boolean,
default: true
},
// Width width: {
type: String,
default: '400px'
},
// Whether to open in parent element inner: {
type: Boolean,
default: false
}
},
computed: {
maskClass: function () {
return {
'mask-show': ( && ),
'mask-hide': !( && ),
'inner':
}
},
mainClass: function () {
return {
'main-show': ,
'main-hide': !,
'inner':
}
},
mainStyle: function () {
return {
width: ,
right: ? '0' : `-${}`,
borderLeft: ? 'none' : '1px solid #eee'
}
}
},
mounted () {
if () {
let box = this.$
= 'relative'
}
},
methods: {
closeByMask () {
&& this.$emit('update:display', false)
},
closeByButton () {
this.$emit('update:display', false)
}
}
}
</script>
<style lang="scss" scoped>
.drawer {
/* Mask */
.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;
}
/* slider */
.main {
position: fixed;
z-index: 10;
top: 0;
height: 100%;
background: #fff;
transition: all 0.5s;
}
.main-show {
opacity: 1;
}
.main-hide {
opacity: 0;
}
/* Display internally for an element */
.inner {
position: absolute;
}
/* Other styles */
.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>
The specific use of components is as follows:
<template>
<div class="box">
<el-button type="primary" @click="display = true">Open the drawer</el-button>
<drawer title="I'm a drawer component" :="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>
Summarize
The above is the Drawer drawer implementation code in the VUE component introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!