web/apps/bigmember_pc/src/components/time-line/PoverTimeLine.vue

<template>
  <div
    class="j-pover-step"
    @mouseenter="isHover = true"
    @mouseleave="isHover = false"
  >
    <el-popover
      :popper-class="poperClass"
      :placement="poperPlacement"
      :open-delay="300"
      :append-to-body="false"
      :width="poperWidth"
      @show="show"
      :trigger="trigger"
      v-model="popoverShow"
    >
      <slot name="content" slot="reference"></slot>
      <slot name="main">
        <el-card class="project-content" v-show="stepList.length !== 0">
          <div slot="header" class="p-h-title">{{ title }}</div>
          <div class="p-c-main">
            <TimeLine
              poverType="card"
              :custom-event="customEvent"
              :stepList="stepList"
              @open="$emit('open', $event)"
            />
          </div>
        </el-card>
      </slot>
    </el-popover>
  </div>
</template>

<script>
import { Button, Popover, Card } from 'element-ui'
import TimeLine from '@/components/time-line/TimeLine.vue'
export default {
  name: 'pover-time-line',
  components: {
    [Button.name]: Button,
    [Popover.name]: Popover,
    [Card.name]: Card,
    TimeLine
  },
  props: {
    trigger: {
      type: String,
      default: 'hover'
    },
    title: {
      type: String,
      default: '项目公告'
    },
    stepList: {
      type: Array,
      default() {
        return []
      }
    },
    poperWidth: {
      type: String,
      default() {
        return '720'
      }
    },
    poperClass: {
      type: String,
      default() {
        return 'poverStep fixed-left'
      }
    },
    poperPlacement: {
      type: String,
      default() {
        return 'bottom-start'
      }
    },
    customEvent: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      popoverShow: false,
      isHover: false
    }
  },
  methods: {
    show() {
      this.$emit('show')
    },
    doChangePopover(state) {
      if (this.isHover) {
        return
      }
      this.popoverShow = state
    }
  }
}
</script>

<style lang="scss">
.el-popover.poverStep {
  padding: 0;
  border: 0;
  &.fixed-left {
    .popper__arrow {
      left: 100px !important;
    }
  }
}
</style>
<style lang="scss" scoped>
.project-content {
  max-height: 516px;
  overflow-y: auto;
  width: 100%;
  padding: 0 20px;
  .p-h-title {
    color: #1d1d1d;
    font-size: 18px;
    line-height: 28px;
  }
  ::v-deep {
    .el-card__header {
      padding: 12px 0 0;
      border: 0;
    }
    .el-card__body {
      padding: 0 20px 20px;
    }
  }
}
</style>