From d13a2ea87095a803c7fb253ce33f46d1e4589b6a Mon Sep 17 00:00:00 2001 From: ElsaOOo Date: Mon, 8 Nov 2021 10:06:58 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20demo=E6=96=87=E6=A1=A3=E6=94=B9?= =?UTF-8?q?=E6=88=90=E5=B1=95=E5=BC=80/=E6=94=B6=E8=B5=B7=E7=9A=84?= =?UTF-8?q?=E6=A0=BC=E5=BC=8F,=E5=B1=95=E7=A4=BA=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=92=8Cng=E5=AE=98=E7=BD=91=E4=B8=80?= =?UTF-8?q?=E8=87=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../docs/components/tooltip/index.md | 115 ++++++++---------- 1 file changed, 48 insertions(+), 67 deletions(-) diff --git a/packages/devui-vue/docs/components/tooltip/index.md b/packages/devui-vue/docs/components/tooltip/index.md index 489df085..8ae9d482 100644 --- a/packages/devui-vue/docs/components/tooltip/index.md +++ b/packages/devui-vue/docs/components/tooltip/index.md @@ -8,93 +8,74 @@ ### 基本用法 -:::demo我们可以通过控制属性`position`来控制tooltip的显示位置，`position`取值有4个，分别是`top`、`right`、`bottom`、`left`。通过属性`content`控制tooltip提示框的内容。 - - - - - - - - +:::demo ```vue -``` - -```css -.example { - height: 50px; - width: 60px; - background: cornflowerblue; - margin-top: 30px; + ``` + ::: ### 延时触发 -鼠标移入的时长超过 [mouseEnterDelay] 毫秒之后才会触发，以防止用户无意划过导致的闪现，默认值是150毫秒；鼠标移出之后，再经过[mouseLeaveDelay]毫秒后，toolTip组件才会隐藏，默认值是100毫秒。 +鼠标移入的时长超过 [mouseEnterDelay] 毫秒之后才会触发，以防止用户无意划过导致的闪现，默认值是 150 毫秒；鼠标移出之后，再经过[mouseLeaveDelay]毫秒后，toolTip 组件才会隐藏，默认值是 100 毫秒。 -:::demo 通过`mouseEnterDelay`属性来控制tooltip提示框的`延迟显示`（默认是100ms），`mouseLeaveDelay`属性来控制tooltip提示框的`延迟消失`（默认是150ms） -
MouseEnter delay 500ms
 +:::demo -
MouseLeave delay 1000ms
 ```vue ``` -```css -.customCss { - width: fit-content; - height: 30px; - padding: 10px; - display: flex; - justify-content: center; - align-items: center; - color: #fff; - background: cornflowerblue; -} -.customCss-leave { - width: fit-content; - height: 30px; - padding: 10px; - display: flex; - justify-content: center; - align-items: center; - color: #252b3a; - background: #fff; -} -``` ::: ### Tooltip Api -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | -| :---------: | :------: | :-------: | :----------------------- | --------------------------------- | --------- | -| content | `string|DOMString` | -- | 必选，tooltip显示内容 | [基本用法](#基本用法) || -| position | `PositionType | PositionType[]` | ['top', 'right', 'bottom', 'left'] | 可选，tooltip显示位置 | [基本用法](#基本用法) || -| showAnimation | `boolean` | true | 可选，是否显示划出动画 | |✔| -| mouseEnterDelay | `number` | 150 | 可选，鼠标移入后延时多少才显示Tooltip，单位是ms | [基本用法](#延时触发) || -| mouseLeaveDelay | `number` | 100 | 可选，鼠标移出后延时多少才隐藏Tooltip，单位是ms | [基本用法](#延时触发) || +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | +| :-------------: | :----------------------------: | :--------------------------------: | :------------------------------------------------ | --------------------- | ---------- | +| content | `string\|DOMString` | -- | 必选，tooltip 显示内容 | [基本用法](#基本用法) | | +| position | `PositionType\|PositionType[]` | ['top', 'right', 'bottom', 'left'] | 可选，tooltip 显示位置 | [基本用法](#基本用法) | | +| showAnimation | `boolean` | true | 可选，是否显示划出动画 | | ✔ | +| mouseEnterDelay | `number` | 150 | 可选，鼠标移入后延时多少才显示 Tooltip，单位是 ms | [延时触发](#延时触发) | +| mouseLeaveDelay | `number` | 100 | 可选，鼠标移出后延时多少才隐藏 Tooltip，单位是 ms | [延时触发](#延时触发) | -- Gitee