一、源碼地址

https://github.com/imxiaoer/DrawerForVue

?

二、效果圖

?

三、具體代碼

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.parentNodebox.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 抽屉的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。