Fes Design

Tooltip 文字提示 ​

文字提示主要用于某个元素的辅助提示。 基于 Popper 组件做的封装。

组件注册 ​

js
import { FTooltip } from '@fesjs/fes-design';

app.use(FTooltip);

代码演示 ​

基础用法 ​

placement 设置弹出位置，分别是top top-start top-end bottom bottom-start bottom-end right right-start right-end left left-start left-end

play
<template>
    <div class="tooltip-wrapper">
        <FTooltip content="top-start" placement="top-start">
            <FButton class="w-100 ml-100">top-start</FButton>
        </FTooltip>
        <FTooltip content="top" placement="top">
            <FButton class="w-100 ml-20">top</FButton>
        </FTooltip>
        <FTooltip content="top-end" placement="top-end">
            <FButton class="w-100 ml-20">top-end</FButton>
        </FTooltip>
        <br>
        <FTooltip content="left-start" placement="left-start">
            <FButton class="w-100 mt-20">left-start</FButton>
        </FTooltip>
        <FTooltip content="right-start" placement="right-start">
            <FButton class="w-100 mt-20 ml-340">right-start</FButton>
        </FTooltip>
        <br>
        <FTooltip content="left" placement="left">
            <FButton class="w-100 mt-20">left</FButton>
        </FTooltip>
        <FTooltip content="right" placement="right">
            <FButton class="w-100 mt-20 ml-340">right</FButton>
        </FTooltip>
        <br>
        <FTooltip content="left-end" placement="left-end">
            <FButton class="w-100 mt-20">left-end</FButton>
        </FTooltip>
        <FTooltip content="right-end" placement="right-end">
            <FButton class="w-100 mt-20 ml-340">right-end</FButton>
        </FTooltip>
        <br>
        <FTooltip content="bottom-start" placement="bottom-start">
            <FButton class="w-100 mt-20 ml-100">bottom-start</FButton>
        </FTooltip>
        <FTooltip content="bottom" placement="bottom">
            <FButton class="w-100 mt-20 ml-20">bottom</FButton>
        </FTooltip>
        <FTooltip content="bottom-end" placement="bottom-end">
            <FButton class="w-100 mt-20 ml-20">bottom-end</FButton>
        </FTooltip>
    </div>
</template>

<style scoped>
.tooltip-wrapper {
    min-width: 560px;
}
.tooltip-wrapper .w-100 {
    width: 100px;
}
.tooltip-wrapper .ml-100 {
    margin-left: 100px;
}
.tooltip-wrapper .ml-20 {
    margin-left: 20px;
}
.tooltip-wrapper .ml-340 {
    margin-left: 340px;
}
.tooltip-wrapper .mt-20 {
    margin-top: 20px;
}
</style>

确认弹出框 ​

属性 mode="confirm"，点击时弹出确认框

play
<template>
    <FSpace>
        <FTooltip
            mode="confirm"
            :confirmOption="{ okText: 'OK' }"
            :content="0"
            @ok="() => handleConfirm('确定')"
            @cancel="() => handleConfirm('取消')"
        >
            <FButton type="link">删除</FButton>
            <template #title>
                <div style="width: 200px">是否删除当前内容</div>
            </template>
        </FTooltip>

        <FTooltip
            mode="confirm"
            :confirmOption="{ okText: 'OK' }"
            :content="0"
            @ok="() => handleConfirm('确定')"
            @cancel="() => handleConfirm('取消')"
        >
            <svg
                style="margin-top: 8px; cursor: pointer;"
                width="16"
                height="16"
                viewBox="0 0 1024 1024"
                xmlns="http://www.w3.org/2000/svg"
            >
                <path d="M704 96.768a21.333 21.333 0 0 1 21.333 21.333V251.18h181.334A21.333 21.333 0 0 1 928 272.512v21.333a21.333 21.333 0 0 1-21.333 21.334h-87.851l-23.381 612.778H227.54L204.46 315.18h-87.126A21.333 21.333 0 0 1 96 293.845v-21.333a21.333 21.333 0 0 1 21.333-21.333h181.334v-133.12A21.333 21.333 0 0 1 320 96.725h384zm29.824 767.147 20.992-548.736H268.544l20.65 548.778h444.63zM442.667 432.043A21.333 21.333 0 0 1 464 453.376v271.787a21.333 21.333 0 0 1-21.333 21.333h-21.334A21.333 21.333 0 0 1 400 725.163V453.376a21.333 21.333 0 0 1 21.333-21.333h21.334zm160 0A21.333 21.333 0 0 1 624 453.376v271.787a21.333 21.333 0 0 1-21.333 21.333h-21.334A21.333 21.333 0 0 1 560 725.163V453.376a21.333 21.333 0 0 1 21.333-21.333h21.334zm58.624-271.275H362.624v90.453h298.667v-90.453z" />
            </svg>
            <template #title>
                <div style="width: 200px">是否删除当前内容</div>
            </template>
        </FTooltip>
    </FSpace>
</template>

<script>
import { FMessage } from '@fesjs/fes-design';

export default {
    setup() {
        function handleConfirm(type) {
            FMessage.info(`点击了${type}`);
        }
        return {
            handleConfirm,
        };
    },
};
</script>

popover 弹出框 ​

属性 mode="popover"，可以展示一些复杂的内容

play
<template>
    <FSpace>
        <FTooltip mode="popover">
            <FButton>查看更多</FButton>
            <template #content>
                <div style="width: 300px">
                    <div v-for="i in 5" :key="i">我是内容{{ i }}</div>
                </div>
            </template>
            <template #title> 我是标题 </template>
        </FTooltip>
    </FSpace>
</template>

触发方式 ​

属性 trigger 设置触发方式，hover click focus

play
<template>
    <FSpace>
        <FTooltip content="hover">
            <FButton>hover</FButton>
        </FTooltip>
        <FTooltip content="click" trigger="click">
            <FButton class="ml-20">click</FButton>
        </FTooltip>
        <FTooltip content="focus" trigger="focus">
            <FButton class="ml-20">focus</FButton>
        </FTooltip>
    </FSpace>
</template>

Tooltip Props ​

属性说明类型默认值
v-model手动控制显示booleanfalse
mode主题模式，可选text confirm popoverstringtext
popperClass弹出框的样式类名string | object | Array-
popperStyle弹出框的样式object-
title标题(mode 为text不可用)string | number-
content显示的内容string | number-
placement出现的位置，可选值有top top-start top-end bottom bottom-start bottom-end right right-start right-end left left-start left-endstringauto
trigger触发类型hover click focus, confirm 模式下只能是clickstringhover
disabled是否可用booleanfalse
offset出现位置的偏移量number8
showAfter显示的延迟时间number0
hideAfter隐藏的延迟时间number0
arrow是否显示箭头booleantrue
confirmOptionmode 为confirm的配置object-
getContainer配置渲染节点的输出位置() => HTMLElement() => document.body

confirmOption 属性 ​

属性说明类型默认值
okText确认按钮文字string-
cancelText取消按钮文字string-
icon图标vNode<ExclamationCircleFilled/>

Tooltip Events ​

事件名称说明回调参数
ok点击确定按钮回调，confirm 模式下有效Function(visible) {}
cancel点击取消按钮回调，confirm 模式下有效Function(visible) {}

Tooltip Slots ​

名称说明
default触发提示包裹的内容
content提示的内容
title提示的标题(mode 为text不可用