从零实现Vue的组件库（六）- Hover-Tip 实现

常用于展示鼠标 hover 时的提示信息。

该组件的痛点在于：

纯CSS实现；
如何利用slot使组件易扩展，能够适应多种场景。

1. 实例

代码

<!-- 基础用法 -->
<fat-hovertip>
    <template slot="hover-part">
        <fat-button>组件</fat-button>
    </template>
    <template slot="tip-part">向下</template>
</fat-hovertip>
复制代码

实例地址：Hover-Tip 实例

代码地址：Github UI-Library

2. 原理

由于需要Hover-tip组件具备良好的扩展性较好，所以采用具名插槽来完成。

将该组件分为两个部分：

hover-part：鼠标hover区域；
tip-part：展示提示框的内容，具体如下图。

template的基本结构为

 <div :class="['hover-tip', customClass]">
    <div class="hover-part">
        <slot name="hover-part">
            <!-- slot 的默认节点 -->
            <fat-icon name="help" size="18" />
        </slot>
    </div>
    <div :class="[type, 'tip-part']">
        <slot name="tip-part"></slot>
        <div class="arrow"></div>
        <div class="block"></div>
    </div>
</div>
复制代码

template中具有两个具名插槽，其中<slot name="hover-part">为鼠标hover区域，可以为它设定默认值，以减少项目中代码的冗余。 <slot name="tip-part>代表提示框的内容区域，完全自定义。

相关样式：tip-part的显示、tip-part的相对位置。

鼠标hover的时候，显示tip-part

.hover-tip {
    position: relative;
    display: inline-flex;
    .hover-part {
        display: flex;
        align-items: center;
    }
    // 初始的tip-part的display为none
    .tip-part {
        display: none;
        ...
    }
    // 当鼠标hover的时候hover-part区域的时候，显示tip-part
    .hover-part:hover + .tip-part {
        display: block;
    }
}
复制代码

tip-part的位置，以及上方居中为例top-center

$base-offset: 8px;

.top-center {
    margin-bottom: $base-offset;
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
}
复制代码

tip-part为绝对定位，其最近的非 static 定位祖先元素为hover-tip，相对于它偏移

/* <percentage>s of the width of the containing block */
left:50%;
/* <percentage>s of the height of the containing block */
bottom:100%
复制代码

left，bottom偏移的单位分别为包含块的宽和高，之后tip-part还需要向左偏移自己的50%，所以添加transform: translateX(-50%);，此时tip-part位于hover-tip上方的正中间，如示意图。

同样可以开发bottom-center，left-center，right-center。由于bottom-center，top-center有公共部分，可进一步聚合

.top-center,
.bottom-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
  .bottom-center {
    margin-top: $base-offset;
    top: 100%;
}
.top-center {
    margin-bottom: $base-offset;
    bottom: 100%;
}
复制代码

3. 使用

使用时，主要注意点是Hover-tip组件的两个具名插槽的使用。

<fat-hovertip>
    <!-- 对应slot name="hover-part" -->
    <template slot="hover-part">
        <fat-button>组件</fat-button>
    </template>
    <!-- 对应slot name="tip-part" -->
    <template slot="tip-part">向下</template>
</fat-hovertip>
复制代码

往期文章：

原创声明：该文章为原创文章，转载请注明出处。