欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-06 14:47:02
因为项目中用的是 element-ui 框架,而这个框架并没有抽屉组件,所以自己实现一个,具体代码如下: drawer.vue

因为项目中用的是 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 抽屉实现代码,希望对大家有所帮助