feat: add tooltip aim-center and refine position demo
This commit is contained in:
Justineo
parent
5a45ce11aa
commit
87e976bb7e
@ -30,6 +30,7 @@
|
||||
| `open` | `boolean` | `false` | [^open] |
|
||||
| `target` | `string | Vue | Node` | - | 参考 [`Overlay`](./overlay) 组件的 `target` 属性。 |
|
||||
| `position` | `string` | `'top'` | [^position] |
|
||||
| `aim-center` | `boolean` | `false` | 指定浮层提示箭头是否始终指向目标元素中心。 |
|
||||
| `trigger` | `string` | `'hover'` | [^trigger] |
|
||||
| `interactive` | `boolean` | `true` | 浮层内容是否允许交互。如果为 `false` 则在 `target` 外满足 `trigger` 指定的条件浮层即自动关闭。 |
|
||||
| `hide-delay` | `number` | `tooltip.hideDelays` | 触发关闭条件满足后延迟关闭等待时间的毫秒数。可以用来防止光标移出 `target` 后移入浮层进行交互前已经自动关闭。 |
|
||||
|
||||
@ -1,224 +1,151 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-grid-container :columns="5">
|
||||
<veui-grid-row>
|
||||
<veui-grid-column
|
||||
:span="1"
|
||||
:offset="1"
|
||||
<section>
|
||||
<veui-checkbox
|
||||
v-model="aimCenter"
|
||||
ui="s"
|
||||
>
|
||||
<span
|
||||
ref="ts"
|
||||
class="target"
|
||||
>top-start</span>
|
||||
Aim center
|
||||
</veui-checkbox>
|
||||
</section>
|
||||
<section class="grid">
|
||||
<veui-popover
|
||||
target="ts"
|
||||
position="top-start"
|
||||
:open.sync="open"
|
||||
:target="target"
|
||||
:position="position"
|
||||
:aim-center="aimCenter"
|
||||
>
|
||||
Hello.
|
||||
</veui-popover>
|
||||
</veui-grid-column>
|
||||
<veui-grid-column :span="1">
|
||||
<span
|
||||
ref="t"
|
||||
class="target"
|
||||
>top</span>
|
||||
<veui-popover
|
||||
target="t"
|
||||
position="top"
|
||||
<veui-button
|
||||
ref="top-start"
|
||||
style="grid-area: 1 / 2"
|
||||
@mouseenter="show('top-start')"
|
||||
>
|
||||
Hello.
|
||||
</veui-popover>
|
||||
</veui-grid-column>
|
||||
<veui-grid-column :span="1">
|
||||
<span
|
||||
ref="te"
|
||||
class="target"
|
||||
>top-end</span>
|
||||
<veui-popover
|
||||
target="te"
|
||||
position="top-end"
|
||||
top-start
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ref="top"
|
||||
style="grid-area: 1 / 3"
|
||||
@mouseenter="show('top')"
|
||||
>
|
||||
Hello.
|
||||
</veui-popover>
|
||||
</veui-grid-column>
|
||||
</veui-grid-row>
|
||||
<veui-grid-row>
|
||||
<veui-grid-column :span="1">
|
||||
<span
|
||||
ref="ls"
|
||||
class="target"
|
||||
>left-start</span>
|
||||
<veui-popover
|
||||
target="ls"
|
||||
position="left-start"
|
||||
top
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ref="top-end"
|
||||
style="grid-area: 1 / 4"
|
||||
@mouseenter="show('top-end')"
|
||||
>
|
||||
Hello.
|
||||
</veui-popover>
|
||||
</veui-grid-column>
|
||||
<veui-grid-column
|
||||
:span="1"
|
||||
:offset="3"
|
||||
top-end
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ref="right-start"
|
||||
style="grid-area: 2 / 5"
|
||||
@mouseenter="show('right-start')"
|
||||
>
|
||||
<span
|
||||
ref="rs"
|
||||
class="target"
|
||||
>right-start</span>
|
||||
<veui-popover
|
||||
target="rs"
|
||||
position="right-start"
|
||||
right-start
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ref="right"
|
||||
style="grid-area: 3 / 5"
|
||||
@mouseenter="show('right')"
|
||||
>
|
||||
Hello.
|
||||
</veui-popover>
|
||||
</veui-grid-column>
|
||||
</veui-grid-row>
|
||||
<veui-grid-row>
|
||||
<veui-grid-column :span="1">
|
||||
<span
|
||||
ref="l"
|
||||
class="target"
|
||||
>left</span>
|
||||
<veui-popover
|
||||
target="l"
|
||||
position="left"
|
||||
right
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ref="right-end"
|
||||
style="grid-area: 4 / 5"
|
||||
@mouseenter="show('right-end')"
|
||||
>
|
||||
Hello.
|
||||
</veui-popover>
|
||||
</veui-grid-column>
|
||||
<veui-grid-column
|
||||
:span="1"
|
||||
:offset="3"
|
||||
right-end
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ref="bottom-start"
|
||||
style="grid-area: 5 / 2"
|
||||
@mouseenter="show('bottom-start')"
|
||||
>
|
||||
<span
|
||||
ref="r"
|
||||
class="target"
|
||||
>right</span>
|
||||
<veui-popover
|
||||
target="r"
|
||||
position="right"
|
||||
bottom-start
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ref="bottom"
|
||||
style="grid-area: 5 / 3"
|
||||
@mouseenter="show('bottom')"
|
||||
>
|
||||
Hello.
|
||||
</veui-popover>
|
||||
</veui-grid-column>
|
||||
</veui-grid-row>
|
||||
<veui-grid-row>
|
||||
<veui-grid-column :span="1">
|
||||
<span
|
||||
ref="le"
|
||||
class="target"
|
||||
>left-end</span>
|
||||
<veui-popover
|
||||
target="le"
|
||||
position="left-end"
|
||||
bottom
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ref="bottom-end"
|
||||
style="grid-area: 5 / 4"
|
||||
@mouseenter="show('bottom-end')"
|
||||
>
|
||||
Hello.
|
||||
</veui-popover>
|
||||
</veui-grid-column>
|
||||
<veui-grid-column
|
||||
:span="1"
|
||||
:offset="3"
|
||||
bottom-end
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ref="left-start"
|
||||
style="grid-area: 2 / 1"
|
||||
@mouseenter="show('left-start')"
|
||||
>
|
||||
<span
|
||||
ref="re"
|
||||
class="target"
|
||||
>right-end</span>
|
||||
<veui-popover
|
||||
target="re"
|
||||
position="right-end"
|
||||
left-start
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ref="left"
|
||||
style="grid-area: 3 / 1"
|
||||
@mouseenter="show('left')"
|
||||
>
|
||||
Hello.
|
||||
</veui-popover>
|
||||
</veui-grid-column>
|
||||
</veui-grid-row>
|
||||
<veui-grid-row>
|
||||
<veui-grid-column
|
||||
:span="1"
|
||||
:offset="1"
|
||||
left
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ref="left-end"
|
||||
style="grid-area: 4 / 1"
|
||||
@mouseenter="show('left-end')"
|
||||
>
|
||||
<span
|
||||
ref="bs"
|
||||
class="target"
|
||||
>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>
|
||||
left-end
|
||||
</veui-button>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GridContainer, GridRow, GridColumn, Popover } from 'veui'
|
||||
import { Popover, Button, Checkbox } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-grid-container': GridContainer,
|
||||
'veui-grid-row': GridRow,
|
||||
'veui-grid-column': GridColumn,
|
||||
'veui-popover': Popover
|
||||
'veui-popover': Popover,
|
||||
'veui-button': Button,
|
||||
'veui-checkbox': Checkbox
|
||||
},
|
||||
data () {
|
||||
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>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-grid-container {
|
||||
width: 80%;
|
||||
min-width: 600px;
|
||||
section + section {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.veui-grid-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.veui-grid-column {
|
||||
text-align: 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;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto auto auto;
|
||||
grid-gap: 12px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
使用 `aim-center` 属性来设置浮层提示箭头始终对准目标元素中心，适合用于目标元素较小的场景。
|
||||
</docs>
|
||||
|
||||
@ -1,224 +1,151 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-grid-container :columns="5">
|
||||
<veui-grid-row>
|
||||
<veui-grid-column
|
||||
:span="1"
|
||||
:offset="1"
|
||||
<section>
|
||||
<veui-checkbox
|
||||
v-model="aimCenter"
|
||||
ui="s"
|
||||
>
|
||||
<span
|
||||
ref="ts"
|
||||
class="target"
|
||||
>top-start</span>
|
||||
Aim center
|
||||
</veui-checkbox>
|
||||
</section>
|
||||
<section class="grid">
|
||||
<veui-tooltip
|
||||
target="ts"
|
||||
position="top-start"
|
||||
:open.sync="open"
|
||||
:target="target"
|
||||
:position="position"
|
||||
:aim-center="aimCenter"
|
||||
>
|
||||
Hello.
|
||||
</veui-tooltip>
|
||||
</veui-grid-column>
|
||||
<veui-grid-column :span="1">
|
||||
<span
|
||||
ref="t"
|
||||
class="target"
|
||||
>top</span>
|
||||
<veui-tooltip
|
||||
target="t"
|
||||
position="top"
|
||||
<veui-button
|
||||
ref="top-start"
|
||||
style="grid-area: 1 / 2"
|
||||
@mouseenter="show('top-start')"
|
||||
>
|
||||
Hello.
|
||||
</veui-tooltip>
|
||||
</veui-grid-column>
|
||||
<veui-grid-column :span="1">
|
||||
<span
|
||||
ref="te"
|
||||
class="target"
|
||||
>top-end</span>
|
||||
<veui-tooltip
|
||||
target="te"
|
||||
position="top-end"
|
||||
top-start
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ref="top"
|
||||
style="grid-area: 1 / 3"
|
||||
@mouseenter="show('top')"
|
||||
>
|
||||
Hello.
|
||||
</veui-tooltip>
|
||||
</veui-grid-column>
|
||||
</veui-grid-row>
|
||||
<veui-grid-row>
|
||||
<veui-grid-column :span="1">
|
||||
<span
|
||||
ref="ls"
|
||||
class="target"
|
||||
>left-start</span>
|
||||
<veui-tooltip
|
||||
target="ls"
|
||||
position="left-start"
|
||||
top
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ref="top-end"
|
||||
style="grid-area: 1 / 4"
|
||||
@mouseenter="show('top-end')"
|
||||
>
|
||||
Hello.
|
||||
</veui-tooltip>
|
||||
</veui-grid-column>
|
||||
<veui-grid-column
|
||||
:span="1"
|
||||
:offset="3"
|
||||
top-end
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ref="right-start"
|
||||
style="grid-area: 2 / 5"
|
||||
@mouseenter="show('right-start')"
|
||||
>
|
||||
<span
|
||||
ref="rs"
|
||||
class="target"
|
||||
>right-start</span>
|
||||
<veui-tooltip
|
||||
target="rs"
|
||||
position="right-start"
|
||||
right-start
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ref="right"
|
||||
style="grid-area: 3 / 5"
|
||||
@mouseenter="show('right')"
|
||||
>
|
||||
Hello.
|
||||
</veui-tooltip>
|
||||
</veui-grid-column>
|
||||
</veui-grid-row>
|
||||
<veui-grid-row>
|
||||
<veui-grid-column :span="1">
|
||||
<span
|
||||
ref="l"
|
||||
class="target"
|
||||
>left</span>
|
||||
<veui-tooltip
|
||||
target="l"
|
||||
position="left"
|
||||
right
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ref="right-end"
|
||||
style="grid-area: 4 / 5"
|
||||
@mouseenter="show('right-end')"
|
||||
>
|
||||
Hello.
|
||||
</veui-tooltip>
|
||||
</veui-grid-column>
|
||||
<veui-grid-column
|
||||
:span="1"
|
||||
:offset="3"
|
||||
right-end
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ref="bottom-start"
|
||||
style="grid-area: 5 / 2"
|
||||
@mouseenter="show('bottom-start')"
|
||||
>
|
||||
<span
|
||||
ref="r"
|
||||
class="target"
|
||||
>right</span>
|
||||
<veui-tooltip
|
||||
target="r"
|
||||
position="right"
|
||||
bottom-start
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ref="bottom"
|
||||
style="grid-area: 5 / 3"
|
||||
@mouseenter="show('bottom')"
|
||||
>
|
||||
Hello.
|
||||
</veui-tooltip>
|
||||
</veui-grid-column>
|
||||
</veui-grid-row>
|
||||
<veui-grid-row>
|
||||
<veui-grid-column :span="1">
|
||||
<span
|
||||
ref="le"
|
||||
class="target"
|
||||
>left-end</span>
|
||||
<veui-tooltip
|
||||
target="le"
|
||||
position="left-end"
|
||||
bottom
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ref="bottom-end"
|
||||
style="grid-area: 5 / 4"
|
||||
@mouseenter="show('bottom-end')"
|
||||
>
|
||||
Hello.
|
||||
</veui-tooltip>
|
||||
</veui-grid-column>
|
||||
<veui-grid-column
|
||||
:span="1"
|
||||
:offset="3"
|
||||
bottom-end
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ref="left-start"
|
||||
style="grid-area: 2 / 1"
|
||||
@mouseenter="show('left-start')"
|
||||
>
|
||||
<span
|
||||
ref="re"
|
||||
class="target"
|
||||
>right-end</span>
|
||||
<veui-tooltip
|
||||
target="re"
|
||||
position="right-end"
|
||||
left-start
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ref="left"
|
||||
style="grid-area: 3 / 1"
|
||||
@mouseenter="show('left')"
|
||||
>
|
||||
Hello.
|
||||
</veui-tooltip>
|
||||
</veui-grid-column>
|
||||
</veui-grid-row>
|
||||
<veui-grid-row>
|
||||
<veui-grid-column
|
||||
:span="1"
|
||||
:offset="1"
|
||||
left
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ref="left-end"
|
||||
style="grid-area: 4 / 1"
|
||||
@mouseenter="show('left-end')"
|
||||
>
|
||||
<span
|
||||
ref="bs"
|
||||
class="target"
|
||||
>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>
|
||||
left-end
|
||||
</veui-button>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GridContainer, GridRow, GridColumn, Tooltip } from 'veui'
|
||||
import { Tooltip, Button, Checkbox } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-grid-container': GridContainer,
|
||||
'veui-grid-row': GridRow,
|
||||
'veui-grid-column': GridColumn,
|
||||
'veui-tooltip': Tooltip
|
||||
'veui-tooltip': Tooltip,
|
||||
'veui-button': Button,
|
||||
'veui-checkbox': Checkbox
|
||||
},
|
||||
data () {
|
||||
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>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-grid-container {
|
||||
width: 80%;
|
||||
min-width: 600px;
|
||||
section + section {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.veui-grid-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.veui-grid-column {
|
||||
text-align: 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;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto auto auto;
|
||||
grid-gap: 12px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
使用 `aim-center` 属性来设置浮层提示箭头始终对准目标元素中心，适合用于目标元素较小的场景。
|
||||
</docs>
|
||||
|
||||
@ -30,6 +30,7 @@ Use the `trigger` prop to specify when to show/hide the tooltip.
|
||||
| `open` | `boolean` | `false` | [^open] |
|
||||
| `target` | `string|Vue|Node` | - | See the [`target` prop](./overlay#props) of thh [`Overlay`](./overlay) component. |
|
||||
| `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] |
|
||||
| `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. |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user