xiangan_pc/src/components/360View/drawer.vue

<template>
  <div class="drawer">
    <div :class="maskClass" @click="closeByMask" />
    <div :class="['mainClass',infoHidden?'mainShow':'main']" :style="mainStyle">
      <div class="drawer-body">
        <shrink ref="shrinkTwo" :cur-type="curType" :arrow-type="2" @changeType="selectType" @display="closeByButton" />
        <slot />
      </div>
    </div>
  </div>
</template>

<script>
import shrink from '@/components/360View/shrink'

export default {
  components: { shrink },
  props: {
    curType: {
      type: Number
    },

    // 隐藏侧边栏和导航栏
    infoHidden: {
      type: Boolean,
      default: false
    },

    // 是否打开
    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',
        display: !(this.mask && this.display) ? 'none' : ''
      }
    }
  },
  mounted() {
    if (this.inner) {
      const box = this.$el.parentNode
      box.style.position = 'relative'
    }
  },
  methods: {
    closeByMask() {
      this.maskClosable && this.$emit('update:display', false)
    },
    closeByButton(val) {
      this.$emit('display', val)
      this.$emit('update:display', false)
      document.getElementsByClassName('drawer')[0].style.display = 'none'
    },
    // 点击shark上模块展示对应模块
    selectType(type) {
      this.$parent.dataType = type
    },
    selectShrink() {
      this.$refs.shrinkTwo.active = 'imgOne'
    },
    init() {
    }
  }
}
</script>

<style lang="scss" scoped>
.drawer {
  width: auto;
  height: 100%;
  /* 遮罩 */
  .mask-show {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: rgba(0,0,0,.5);
    opacity: 1;
    transition: opacity .5s;
  }
  .mask-hide {
    opacity: 0;
    transition: opacity .5s;
  }

  /* 滑块 */
  .main {
    position: fixed;
    z-index: 999;
    top: 60px;
    height: calc(100% - 70px);
    background: #fff;
    transition: all 0.5s;
  }
  .mainShow{
    position: fixed;
    z-index: 999;
    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 {
    display: flex;
    height: 100%;
    font-size: 14px;
  }
}
</style>