pdflib/src/components/outline.vue

<template>
  <div id="outline">
    <div class="outlineBox">
      <h4>目录</h4>
      <outlineItem :outlineData="outlineData" @outline_item="$emit('outline_item', $event)"></outlineItem>
    </div>
    <div class="Mask"></div>
  </div>
</template>
<script>
import outlineItem from './outlineItem.vue'
export default {
  name: 'outline',
  components: {
    outlineItem
  },
  props: {
    outlineData: { type: Array, default: () => [] }
  }
}
</script>
<style lang="less">
#outline {
  color: #fff;
}
.outlineBox {
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 2;
  top: 0;
  left: 0;
  position: absolute;
}
.Mask {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  background: #000;
  opacity: 0.8;
  top: 0;
  left: 0;

}
</style>