從零實現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>
複製程式碼

往期文章：

原創宣告：該文章為原創文章，轉載請註明出處。

從零實現Vue的元件庫（六）- Hover-Tip 實現

1. 例項

2. 原理

3. 使用

相關文章