feat: add tooltip aim-center and refine position demo

This commit is contained in:
Justineo 2021-10-18 16:51:32 +08:00
parent 5a45ce11aa
commit 87e976bb7e
No known key found for this signature in database
GPG Key ID: B73F0979CF18A0EA
4 changed files with 263 additions and 407 deletions

View File

@ -30,6 +30,7 @@
| `open` | `boolean` | `false` | [^open] | | `open` | `boolean` | `false` | [^open] |
| `target` | `string | Vue | Node` | - | 参考 [`Overlay`](./overlay) 组件的 `target` 属性。 | | `target` | `string | Vue | Node` | - | 参考 [`Overlay`](./overlay) 组件的 `target` 属性。 |
| `position` | `string` | `'top'` | [^position] | | `position` | `string` | `'top'` | [^position] |
| `aim-center` | `boolean` | `false` | 指定浮层提示箭头是否始终指向目标元素中心。 |
| `trigger` | `string` | `'hover'` | [^trigger] | | `trigger` | `string` | `'hover'` | [^trigger] |
| `interactive` | `boolean` | `true` | 浮层内容是否允许交互。如果为 `false` 则在 `target` 外满足 `trigger` 指定的条件浮层即自动关闭。 | | `interactive` | `boolean` | `true` | 浮层内容是否允许交互。如果为 `false` 则在 `target` 外满足 `trigger` 指定的条件浮层即自动关闭。 |
| `hide-delay` | `number` | `tooltip.hideDelays` | 触发关闭条件满足后延迟关闭等待时间的毫秒数。可以用来防止光标移出 `target` 后移入浮层进行交互前已经自动关闭。 | | `hide-delay` | `number` | `tooltip.hideDelays` | 触发关闭条件满足后延迟关闭等待时间的毫秒数。可以用来防止光标移出 `target` 后移入浮层进行交互前已经自动关闭。 |

View File

@ -1,224 +1,151 @@
<template> <template>
<article> <article>
<veui-grid-container :columns="5"> <section>
<veui-grid-row> <veui-checkbox
<veui-grid-column v-model="aimCenter"
:span="1" ui="s"
:offset="1"
> >
<span Aim center
ref="ts" </veui-checkbox>
class="target" </section>
>top-start</span> <section class="grid">
<veui-popover <veui-popover
target="ts" :open.sync="open"
position="top-start" :target="target"
:position="position"
:aim-center="aimCenter"
> >
Hello. Hello.
</veui-popover> </veui-popover>
</veui-grid-column> <veui-button
<veui-grid-column :span="1"> ref="top-start"
<span style="grid-area: 1 / 2"
ref="t" @mouseenter="show('top-start')"
class="target"
>top</span>
<veui-popover
target="t"
position="top"
> >
Hello. top-start
</veui-popover> </veui-button>
</veui-grid-column> <veui-button
<veui-grid-column :span="1"> ref="top"
<span style="grid-area: 1 / 3"
ref="te" @mouseenter="show('top')"
class="target"
>top-end</span>
<veui-popover
target="te"
position="top-end"
> >
Hello. top
</veui-popover> </veui-button>
</veui-grid-column> <veui-button
</veui-grid-row> ref="top-end"
<veui-grid-row> style="grid-area: 1 / 4"
<veui-grid-column :span="1"> @mouseenter="show('top-end')"
<span
ref="ls"
class="target"
>left-start</span>
<veui-popover
target="ls"
position="left-start"
> >
Hello. top-end
</veui-popover> </veui-button>
</veui-grid-column> <veui-button
<veui-grid-column ref="right-start"
:span="1" style="grid-area: 2 / 5"
:offset="3" @mouseenter="show('right-start')"
> >
<span right-start
ref="rs" </veui-button>
class="target" <veui-button
>right-start</span> ref="right"
<veui-popover style="grid-area: 3 / 5"
target="rs" @mouseenter="show('right')"
position="right-start"
> >
Hello. right
</veui-popover> </veui-button>
</veui-grid-column> <veui-button
</veui-grid-row> ref="right-end"
<veui-grid-row> style="grid-area: 4 / 5"
<veui-grid-column :span="1"> @mouseenter="show('right-end')"
<span
ref="l"
class="target"
>left</span>
<veui-popover
target="l"
position="left"
> >
Hello. right-end
</veui-popover> </veui-button>
</veui-grid-column> <veui-button
<veui-grid-column ref="bottom-start"
:span="1" style="grid-area: 5 / 2"
:offset="3" @mouseenter="show('bottom-start')"
> >
<span bottom-start
ref="r" </veui-button>
class="target" <veui-button
>right</span> ref="bottom"
<veui-popover style="grid-area: 5 / 3"
target="r" @mouseenter="show('bottom')"
position="right"
> >
Hello. bottom
</veui-popover> </veui-button>
</veui-grid-column> <veui-button
</veui-grid-row> ref="bottom-end"
<veui-grid-row> style="grid-area: 5 / 4"
<veui-grid-column :span="1"> @mouseenter="show('bottom-end')"
<span
ref="le"
class="target"
>left-end</span>
<veui-popover
target="le"
position="left-end"
> >
Hello. bottom-end
</veui-popover> </veui-button>
</veui-grid-column> <veui-button
<veui-grid-column ref="left-start"
:span="1" style="grid-area: 2 / 1"
:offset="3" @mouseenter="show('left-start')"
> >
<span left-start
ref="re" </veui-button>
class="target" <veui-button
>right-end</span> ref="left"
<veui-popover style="grid-area: 3 / 1"
target="re" @mouseenter="show('left')"
position="right-end"
> >
Hello. left
</veui-popover> </veui-button>
</veui-grid-column> <veui-button
</veui-grid-row> ref="left-end"
<veui-grid-row> style="grid-area: 4 / 1"
<veui-grid-column @mouseenter="show('left-end')"
:span="1"
:offset="1"
> >
<span left-end
ref="bs" </veui-button>
class="target" </section>
>bottom-start</span>
<veui-popover
target="bs"
position="bottom-start"
>
Hello.
</veui-popover>
</veui-grid-column>
<veui-grid-column :span="1">
<span
ref="b"
class="target"
>bottom</span>
<veui-popover
target="b"
position="bottom"
>
Hello.
</veui-popover>
</veui-grid-column>
<veui-grid-column :span="1">
<span
ref="be"
class="target"
>bottom-end</span>
<veui-popover
target="be"
position="bottom-end"
>
Hello.
</veui-popover>
</veui-grid-column>
</veui-grid-row>
</veui-grid-container>
</article> </article>
</template> </template>
<script> <script>
import { GridContainer, GridRow, GridColumn, Popover } from 'veui' import { Popover, Button, Checkbox } from 'veui'
export default { export default {
components: { components: {
'veui-grid-container': GridContainer, 'veui-popover': Popover,
'veui-grid-row': GridRow, 'veui-button': Button,
'veui-grid-column': GridColumn, 'veui-checkbox': Checkbox
'veui-popover': Popover
}, },
data () { data () {
return { return {
ui: null target: null,
position: null,
open: false,
aimCenter: false
}
},
methods: {
show (position) {
this.target = this.$refs[position]
this.position = position
this.open = true
} }
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.veui-grid-container { section + section {
width: 80%; margin-top: 20px;
min-width: 600px;
} }
.veui-grid-row { .grid {
margin-bottom: 20px; display: grid;
} grid-template-columns: auto auto auto auto auto;
grid-gap: 12px;
.veui-grid-column { justify-content: center;
text-align: center; align-items: center;
vertical-align: middle;
line-height: 2;
}
.target {
display: inline-block;
width: 100%;
padding: 0.5em 0;
border: 1px solid #999;
border-radius: 2px;
transition: background-color 0.3s;
cursor: pointer;
&:hover {
background-color: #f7f7f7;
}
} }
</style> </style>
<docs>
使用 `aim-center` 属性来设置浮层提示箭头始终对准目标元素中心适合用于目标元素较小的场景
</docs>

View File

@ -1,224 +1,151 @@
<template> <template>
<article> <article>
<veui-grid-container :columns="5"> <section>
<veui-grid-row> <veui-checkbox
<veui-grid-column v-model="aimCenter"
:span="1" ui="s"
:offset="1"
> >
<span Aim center
ref="ts" </veui-checkbox>
class="target" </section>
>top-start</span> <section class="grid">
<veui-tooltip <veui-tooltip
target="ts" :open.sync="open"
position="top-start" :target="target"
:position="position"
:aim-center="aimCenter"
> >
Hello. Hello.
</veui-tooltip> </veui-tooltip>
</veui-grid-column> <veui-button
<veui-grid-column :span="1"> ref="top-start"
<span style="grid-area: 1 / 2"
ref="t" @mouseenter="show('top-start')"
class="target"
>top</span>
<veui-tooltip
target="t"
position="top"
> >
Hello. top-start
</veui-tooltip> </veui-button>
</veui-grid-column> <veui-button
<veui-grid-column :span="1"> ref="top"
<span style="grid-area: 1 / 3"
ref="te" @mouseenter="show('top')"
class="target"
>top-end</span>
<veui-tooltip
target="te"
position="top-end"
> >
Hello. top
</veui-tooltip> </veui-button>
</veui-grid-column> <veui-button
</veui-grid-row> ref="top-end"
<veui-grid-row> style="grid-area: 1 / 4"
<veui-grid-column :span="1"> @mouseenter="show('top-end')"
<span
ref="ls"
class="target"
>left-start</span>
<veui-tooltip
target="ls"
position="left-start"
> >
Hello. top-end
</veui-tooltip> </veui-button>
</veui-grid-column> <veui-button
<veui-grid-column ref="right-start"
:span="1" style="grid-area: 2 / 5"
:offset="3" @mouseenter="show('right-start')"
> >
<span right-start
ref="rs" </veui-button>
class="target" <veui-button
>right-start</span> ref="right"
<veui-tooltip style="grid-area: 3 / 5"
target="rs" @mouseenter="show('right')"
position="right-start"
> >
Hello. right
</veui-tooltip> </veui-button>
</veui-grid-column> <veui-button
</veui-grid-row> ref="right-end"
<veui-grid-row> style="grid-area: 4 / 5"
<veui-grid-column :span="1"> @mouseenter="show('right-end')"
<span
ref="l"
class="target"
>left</span>
<veui-tooltip
target="l"
position="left"
> >
Hello. right-end
</veui-tooltip> </veui-button>
</veui-grid-column> <veui-button
<veui-grid-column ref="bottom-start"
:span="1" style="grid-area: 5 / 2"
:offset="3" @mouseenter="show('bottom-start')"
> >
<span bottom-start
ref="r" </veui-button>
class="target" <veui-button
>right</span> ref="bottom"
<veui-tooltip style="grid-area: 5 / 3"
target="r" @mouseenter="show('bottom')"
position="right"
> >
Hello. bottom
</veui-tooltip> </veui-button>
</veui-grid-column> <veui-button
</veui-grid-row> ref="bottom-end"
<veui-grid-row> style="grid-area: 5 / 4"
<veui-grid-column :span="1"> @mouseenter="show('bottom-end')"
<span
ref="le"
class="target"
>left-end</span>
<veui-tooltip
target="le"
position="left-end"
> >
Hello. bottom-end
</veui-tooltip> </veui-button>
</veui-grid-column> <veui-button
<veui-grid-column ref="left-start"
:span="1" style="grid-area: 2 / 1"
:offset="3" @mouseenter="show('left-start')"
> >
<span left-start
ref="re" </veui-button>
class="target" <veui-button
>right-end</span> ref="left"
<veui-tooltip style="grid-area: 3 / 1"
target="re" @mouseenter="show('left')"
position="right-end"
> >
Hello. left
</veui-tooltip> </veui-button>
</veui-grid-column> <veui-button
</veui-grid-row> ref="left-end"
<veui-grid-row> style="grid-area: 4 / 1"
<veui-grid-column @mouseenter="show('left-end')"
:span="1"
:offset="1"
> >
<span left-end
ref="bs" </veui-button>
class="target" </section>
>bottom-start</span>
<veui-tooltip
target="bs"
position="bottom-start"
>
Hello.
</veui-tooltip>
</veui-grid-column>
<veui-grid-column :span="1">
<span
ref="b"
class="target"
>bottom</span>
<veui-tooltip
target="b"
position="bottom"
>
Hello.
</veui-tooltip>
</veui-grid-column>
<veui-grid-column :span="1">
<span
ref="be"
class="target"
>bottom-end</span>
<veui-tooltip
target="be"
position="bottom-end"
>
Hello.
</veui-tooltip>
</veui-grid-column>
</veui-grid-row>
</veui-grid-container>
</article> </article>
</template> </template>
<script> <script>
import { GridContainer, GridRow, GridColumn, Tooltip } from 'veui' import { Tooltip, Button, Checkbox } from 'veui'
export default { export default {
components: { components: {
'veui-grid-container': GridContainer, 'veui-tooltip': Tooltip,
'veui-grid-row': GridRow, 'veui-button': Button,
'veui-grid-column': GridColumn, 'veui-checkbox': Checkbox
'veui-tooltip': Tooltip
}, },
data () { data () {
return { return {
ui: null target: null,
position: null,
open: false,
aimCenter: false
}
},
methods: {
show (position) {
this.target = this.$refs[position]
this.position = position
this.open = true
} }
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.veui-grid-container { section + section {
width: 80%; margin-top: 20px;
min-width: 600px;
} }
.veui-grid-row { .grid {
margin-bottom: 20px; display: grid;
} grid-template-columns: auto auto auto auto auto;
grid-gap: 12px;
.veui-grid-column { justify-content: center;
text-align: center; align-items: center;
vertical-align: middle;
line-height: 2;
}
.target {
display: inline-block;
width: 100%;
padding: 0.5em 0;
border: 1px solid #999;
border-radius: 2px;
transition: background-color 0.3s;
cursor: pointer;
&:hover {
background-color: #f7f7f7;
}
} }
</style> </style>
<docs>
使用 `aim-center` 属性来设置浮层提示箭头始终对准目标元素中心适合用于目标元素较小的场景
</docs>

View File

@ -30,6 +30,7 @@ Use the `trigger` prop to specify when to show/hide the tooltip.
| `open` | `boolean` | `false` | [^open] | | `open` | `boolean` | `false` | [^open] |
| `target` | `string|Vue|Node` | - | See the [`target` prop](./overlay#props) of thh [`Overlay`](./overlay) component. | | `target` | `string|Vue|Node` | - | See the [`target` prop](./overlay#props) of thh [`Overlay`](./overlay) component. |
| `position` | `string` | `'top'` | [^position] | | `position` | `string` | `'top'` | [^position] |
| `aim-center` | `boolean` | `false` | Whether the tooltip arrow always points to the center of the target element. |
| `trigger` | `string` | `'hover'` | [^trigger] | | `trigger` | `string` | `'hover'` | [^trigger] |
| `interactive` | `boolean` | `true` | Whether the tooltip content is interactive. When set to `false`, the tooltip will be automatically hidden after the event specified by `trigger` is triggered outside the `target`. | | `interactive` | `boolean` | `true` | Whether the tooltip content is interactive. When set to `false`, the tooltip will be automatically hidden after the event specified by `trigger` is triggered outside the `target`. |
| `hide-delay` | `number` | `tooltip.hideDelays` | Time (in milliseconds) to wait before hiding the tooltip after the close trigger is triggered. Can be used to prevent the tooltip being immediately closed after pointer leaves the `target` element and before it enters the tooltip itself. | | `hide-delay` | `number` | `tooltip.hideDelays` | Time (in milliseconds) to wait before hiding the tooltip after the close trigger is triggered. Can be used to prevent the tooltip being immediately closed after pointer leaves the `target` element and before it enters the tooltip itself. |