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

代码

<!-- 基础用法 -->
<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>
复制代码

往期文章：