image.png

组件Tooltip.vue

<template>
  <el-tooltip :effect="config.effect || 'light'" :content="content || ''" :placement="config.placement || 'bottom'">
    <!-- $slots是组件插槽集，是组件所有默认插槽、具名插槽的集合，可以用来获取当前组件的插槽集。 -->
    <div v-if="$slots.content" slot="content"><slot name="content"></slot></div>
    <slot />
  </el-tooltip>
</template>

<script>
export default {
  name: 'ss-tooltip',
  data() {
    return {}
  },
  props: {
    config: {
      type: Object,
      default: () => ({})
    },
    content: {
      type: String,
      default: ''
    }
  }

}
</script>

<style lang="scss">
$placement-list: "top" "top-start" "top-end" "bottom" "bottom-start" "bottom-end" "left" "left-start" "left-end" "right" "right-start" "right-end";

.el-tooltip__popper.is-light {
  border: none !important;
  box-shadow:
    0px 1px 10px 0px rgba(0, 0, 0, 0.05),
    0px 3px 5px 0px rgba(0, 0, 0, 0.08),
    0px 2px 4px -1px rgba(0, 0, 0, 0.1) !important;
}

@each $placement in $placement-list {
  .el-tooltip__popper.is-light[x-placement^=#{$placement}] .popper__arrow {
    @if $placement=="top" or $placement=="top-start" or $placement=="top-end" {
      border-top-color: #eaeaea !important;
    }

    @else if $placement=="bottom" or $placement=="bottom-start" or $placement=="bottom-end" {
      border-bottom-color: #eaeaea !important;
    }

    @else if $placement=="left" or $placement=="left-start" or $placement=="left-end" {
      border-left-color: #eaeaea !important;
    }

    @else {
      border-right-color: #eaeaea !important;
    }
  }

  .el-tooltip__popper[x-placement^=#{$placement}] .popper__arrow {

    @if $placement=="top" or $placement=="top-start" or $placement=="top-end" {
      border-top-color: #eaeaea !important;
    }

    @else if $placement=="bottom" or $placement=="bottom-start" or $placement=="bottom-end" {
      border-bottom-color: #eaeaea !important;
    }

    @else if $placement=="left" or $placement=="left-start" or $placement=="left-end" {
      border-left-color: #eaeaea !important;
    }

    @else {
      border-right-color: #eaeaea !important;
    }
  }
}
</style>

父组件中使用：

     <ss-tooltip :config="{ placement: 'right' }">
          <div slot="content">多行信息<br/>第二行信息</div>
          <span class="icon-sca-tips iconfont-sca"></span>
     </ss-tooltip>