<!--
 * @Author:gjh
 * @Date: 2021-12-30 14:27:46
 * @LastEditTime: 2021-12-30 14:35:39
 * @LastEditors: Please set LastEditors
 * @Description: 基于bi项目表格图标提示的需求
 * @FilePath: \bi-element-ui\packages\TooltipIcon\src\index.vue
-->
<template>
  <span>
    <!-- 支持属性props的写法和插槽替换的写法 -->
    <slot name="tip-label">
      <span>{{ label }}</span>
    </slot>
    <el-tooltip class="tooltip-icon" :effect="effect" :placement="placement" v-bind="$attrs">
      <template slot="content">
        <slot name="tip-content">
          <div v-html="content"></div>
        </slot>
      </template>

      <slot name="tip-icon">
        <span style="margin-left: 5px">
          <!-- 这里默认采用的是el-icon的图标 -->
          <i :class="icon"></i>
        </span>
      </slot>
    </el-tooltip>
  </span>
</template>

<script>
export default {
  name: 'BiTooltipIcon',
  props: {
    label: {
      type: String,
      default: '头部标题'
    },
    icon: {
      type: String,
      default: 'el-icon-warning-outline'
    },
    content: {
      type: String,
      default: '提示内容'
    },
    placement: {
      type: String,
      default: 'bottom'
    },
    effect: {
      type: String,
      default: 'dark'
    }
  },
  data() {
    return {}
  }
}
</script>

<style></style>
