阅读(2768) (0)

Vue EasyUI 提示框

2020-06-19 18:36:22 更新

当用户的鼠标指针停留在某个元素上时,该元素出现提示信息窗口用来显示额外的元素相关信息。

属性列表

名称 数据类型 作用描述 默认值
tooltipCls string 提示框样式类。 null
tooltipStyle Object 提示框的内联样式。 null
content string或TooltipContentComponent 提示框内容。 null
component string, Object, Function 显示提示框内容组件。 null
propsData Object 支持传递给组件。 null
position string 提示框的位置。可选值:'left', 'right', 'top', 'bottom'。 bottom
trackMouse boolean 为True时,使提示框同鼠标一起移动。 false
deltaX number 与提示框位置的水平距离。 0
deltaY number 与提示框位置的垂直距离。 0
showDelay number 显示提示框的时间延迟。 200
hideDelay number 隐藏提示框的时间延迟。 100
showEvent string 使提示框出现的事件。 mouseenter
hideEvent string 使提示框隐藏的事件。 mouseleave

事件列表

名称 参数 作用描述
tooltipShow none 显示提示框时触发。
tooltipHide none 隐藏提示框时触发。

注:
- 继承: None 。

使用方法

从 HTML 标记创建元素,使用 Vue.js 的 V-指令创建提示框( Tooltip )。

    <div style="background:red ;width:50px ;height:20px" v-Tooltip="'This is a tooltip.'">Hover Me</div>