VUE组件之 Drawer 抽屉

客官°小女子只卖身不卖艺 2021-08-13 12:21 1121阅读 0赞

**一、源码地址**

[https://github.com/imxiaoer/DrawerForVue][https_github.com_imxiaoer_DrawerForVue]

**二、效果图**

![aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNDY0NjM0LzIwMTkwOS80NjQ2MzQtMjAxOTA5MTEwMTAzMzcyNzEtNTkxMTQxODE4LmdpZg][]

**三、具体代码**

drawer.vue

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

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

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

组件具体使用如下：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

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

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

[https_github.com_imxiaoer_DrawerForVue]: https://github.com/imxiaoer/DrawerForVue
[aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNDY0NjM0LzIwMTkwOS80NjQ2MzQtMjAxOTA5MTEwMTAzMzcyNzEtNTkxMTQxODE4LmdpZg]: /images/20210813/74261b6a27b94f3287e1538718c13274.png
[aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]: /images/20210813/712e2089fa77468ebb93c1d87ea915ac.png