Tooltip 文字提示
常用于展示提示信息。
基本用法
在这里我们提供 12 种不同方向的展示方式,可以通过以下完整示例来理解。
可以通过v-model
控制手动是否展示文字提示。
使用content
属性来决定显示时的提示信息。
由placement
属性决定展示效果:
placement
属性值为:方向-对齐位置
;- 四个方向:
top
、left
、right
、bottom
; - 三种对齐位置:
start
、''(默认空为居中)、end
;
如 placement="left-end"
,则提示信息出现在目标元素的左侧,且提示信息的底部与目标元素的底部对齐。
因为uni-app
组件无法监听点击自己以外的地方,为了在点击页面其他地方时,可以自动关闭 tooltip
,建议使用组件库的 useQueue
hook(会关闭所有 dropmenu、popover、toast、swipeAction、fab),在页面的根元素上监听点击事件的冒泡。
WARNING
如果存在用户手动点击 tooltip
以外某个地方如按钮滑出 tooltip
的场景,则需要在点击的元素(在这里上按钮)加上 click 阻止事件冒泡到根元素上,避免触发 closeOutside
把要手动打开的 tooltip
关闭了。
<view @click="closeOutside">
<wd-tooltip @change="handleChange" placement="top" content="top 提示文字">
<wd-button>top</wd-button>
</wd-tooltip>
</view>
import { useQueue } from '@/uni_modules/wot-design-uni'
const { closeOutside } = useQueue()
const show = ref<boolean>(false)
更多 Content
展示多行文本或者是设置文本内容的格式
用具名 slot 分发content
,替代 tooltip
中的 content
属性。
使用插槽时,请使用 useContentSlot
属性,确定 content
插槽开启。
注意
目前使用content
插槽时,组件内部无法正确获取气泡的宽高,此时设置偏移的placement
无法生效,例如bottom-end
。
<wd-tooltip placement="right" useContentSlot>
<wd-button>多行文本</wd-button>
<template #content>
<view style="color: red; padding: 5px; width: 90px">
<view>多行文本1</view>
<view>多行文本2</view>
<view>多行文本3</view>
</view>
</template>
</wd-tooltip>
import { useQueue } from '@/uni_modules/wot-design-uni'
const { closeOutside } = useQueue()
const show = ref<boolean>(false)
显示关闭按钮
Tooltip 组件通过属性show-close
控制是否显示关闭按钮。
<wd-tooltip content="显示关闭按钮" show-close>
<wd-button>显示关闭按钮</wd-button>
</wd-tooltip>
控制显隐
通过绑定v-model
控制 tooltip
的显隐。
<wd-button plain @click="control" size="small" class="button-control">
{{ show ? '关闭' : '打开' }}
</wd-button>
<wd-tooltip placement="top" content="控制显隐" v-model="show">
<wd-button :round="false">top</wd-button>
</wd-tooltip>
import { ref } from 'vue'
const show = ref<boolean>(false)
const control = () => {
show.value = !show.value
}
高级扩展
除了这些基本设置外,还有一些属性可以让使用者更好的定制自己的效果:
如果需要关闭 tooltip
功能,disabled
属性可以满足这个需求,它接受一个Boolean
,设置为true
即可。
<wd-tooltip placement="right-end" content="禁用" disabled>
<wd-button>禁用</wd-button>
</wd-tooltip>
控制位置
注意:由于小程序无法动态插入节点,因此文字气泡位置会根据传入定位的节点最外层位置对齐,如果文字提示位置不在您想要渲染的位置上,可以通过控制组件整体位置达到想要的效果。 错误用法示例:
<wd-tooltip placement="top" content="top 提示文字">
<wd-button custom-style="margin-left: 100px">top</wd-button>
</wd-tooltip>
<wd-tooltip placement="top" content="top 提示文字">
<wd-button custom-style="position: absolute; left: 100px;">top</wd-button>
</wd-tooltip>
正确用法:
<wd-tooltip placement="top" content="top 提示文字" custom-style="margin-left: 100px">
<wd-button>top</wd-button>
</wd-tooltip>
<wd-tooltip placement="top" content="top 提示文字" custom-style="position: absolute; left: 100px;">
<wd-button>top</wd-button>
</wd-tooltip>
Tooltip Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
---|---|---|---|---|---|
show | 状态是否可见 | boolean | - | false | - |
content | 显示的内容,也可以通过 slot#content 传入 | string / array | - | - | - |
placement | Tooltip 的出现位置 | string | top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end | bottom | - |
disabled | Tooltip 是否可用 | boolean | - | false | - |
visible-arrow | 是否显示 Tooltip 箭头 | boolean | - | true | - |
offset | 出现位置的偏移量 | number | - | 0 | - |
show-close | 是否显示 Tooltip 内部的关闭按钮 | boolean | - | false | - |
Events
事件名称 | 说明 | 回调参数 | 最低版本 |
---|---|---|---|
open | 显示时触发 | - | - |
close | 隐藏时触发 | - | - |
change | 显隐值变化时触发 | - | - |
Methods
方法名称 | 说明 | 参数 | 最低版本 |
---|---|---|---|
open | 打开文字提示弹框 | - | - |
close | 关闭文字提示弹框 | - | - |
Slot
name | 说明 | 最低版本 |
---|---|---|
content | 多行内容或用户自定义样式 | - |
Tooltip 外部样式类
类名 | 说明 | 最低版本 |
---|---|---|
custom-class | 根节点样式 | - |
custom-arrow | 尖角样式 | - |
custom-pop | 文字提示样式 | - |