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 | 手动控制显示 | boolean | false |
mode | 主题模式,可选text confirm popover | string | text |
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-end | string | auto |
trigger | 触发类型hover click focus , confirm 模式下只能是click | string | hover |
disabled | 是否可用 | boolean | false |
offset | 出现位置的偏移量 | number | 8 |
showAfter | 显示的延迟时间 | number | 0 |
hideAfter | 隐藏的延迟时间 | number | 0 |
arrow | 是否显示箭头 | boolean | true |
confirmOption | mode 为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 不可用 |