Drawer assembly of drawer VUE

As used in the project is element-ui frame, and this frame is not the drawer assembly, is achieved own, specific code as follows:

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>title//
    },
      of the type: Boolean    Run the display: {whether to open the//
  props: {{default
Export
    


    
    title: {
      type: String, 
      default : 'title' 
    }, 

    // if the close button is displayed 
    the closable: { 
      type: Boolean, 
      default : to true 
    }, 

    // whether mask 
    mask: { 
      type: Boolean, 
      default : to true 
    }, 

    // if Close click mask 
    maskClosable: { 
      type: Boolean, 
      default : to true 
    }, 

    // width 
    width: { 
      type: String, 
      default : '400px' 
    }, 

    // is open in the parent element 
    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 ; 
  } 

  / * inside a display element * / 
  .inner { 
    position: Absolute; 
  } 

  / * other patterns * / 
  .drawer - head { 
    the display: Flex; 
    The 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>

 

Specific use of the following components:

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