docs(tooltip): Optimize Tooltip's docs and demos (#838)
* docs(tooltip): Optimize Tooltip's docs and demos * docs(tooltip): fix
This commit is contained in:
申君健
GitHub
parent
f593efca9b
commit
fec7dd71fa
|
|
@ -2,64 +2,57 @@
|
|||
<div class="box">
|
||||
<div class="top">
|
||||
<tiny-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
|
||||
<button>上左</button>
|
||||
<tiny-button>上左</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
|
||||
<button>上边</button>
|
||||
<tiny-button>上边</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">
|
||||
<button>上右</button>
|
||||
<tiny-button>上右</tiny-button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
<div class="left">
|
||||
<tiny-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
|
||||
<button>左上</button>
|
||||
<tiny-button>左上</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
|
||||
<button>左边</button>
|
||||
<tiny-button>左边</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
|
||||
<button>左下</button>
|
||||
<tiny-button>左下</tiny-button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
<div class="right">
|
||||
<tiny-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
|
||||
<button>右上</button>
|
||||
<tiny-button>右上</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
|
||||
<button>右边</button>
|
||||
<tiny-button>右边</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
|
||||
<button>右下</button>
|
||||
<tiny-button>右下</tiny-button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<tiny-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
|
||||
<button>下左</button>
|
||||
<tiny-button>下左</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
|
||||
<button>下边</button>
|
||||
<tiny-button>下边</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="Bottom Right 提示文字"
|
||||
placement="bottom-end"
|
||||
:append-to-body="false"
|
||||
>
|
||||
<button>下右</button>
|
||||
<tiny-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
|
||||
<tiny-button>下右</tiny-button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { Tooltip as TinyTooltip } from '@opentiny/vue'
|
||||
import { Tooltip as TinyTooltip, Button as TinyButton } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.box {
|
||||
width: 400px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
|
|
@ -69,12 +62,12 @@ import { Tooltip as TinyTooltip } from '@opentiny/vue'
|
|||
|
||||
.box .left {
|
||||
float: left;
|
||||
width: 60px;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.box .right {
|
||||
float: right;
|
||||
width: 60px;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.box .bottom {
|
||||
|
|
@ -86,9 +79,4 @@ import { Tooltip as TinyTooltip } from '@opentiny/vue'
|
|||
margin: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.box .left .hae-tooltip__popper,
|
||||
.box .right .hae-tooltip__popper {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,70 +2,64 @@
|
|||
<div class="box">
|
||||
<div class="top">
|
||||
<tiny-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
|
||||
<button>上左</button>
|
||||
<tiny-button>上左</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
|
||||
<button>上边</button>
|
||||
<tiny-button>上边</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">
|
||||
<button>上右</button>
|
||||
<tiny-button>上右</tiny-button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
<div class="left">
|
||||
<tiny-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
|
||||
<button>左上</button>
|
||||
<tiny-button>左上</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
|
||||
<button>左边</button>
|
||||
<tiny-button>左边</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
|
||||
<button>左下</button>
|
||||
<tiny-button>左下</tiny-button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
<div class="right">
|
||||
<tiny-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
|
||||
<button>右上</button>
|
||||
<tiny-button>右上</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
|
||||
<button>右边</button>
|
||||
<tiny-button>右边</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
|
||||
<button>右下</button>
|
||||
<tiny-button>右下</tiny-button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<tiny-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
|
||||
<button>下左</button>
|
||||
<tiny-button>下左</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
|
||||
<button>下边</button>
|
||||
<tiny-button>下边</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="Bottom Right 提示文字"
|
||||
placement="bottom-end"
|
||||
:append-to-body="false"
|
||||
>
|
||||
<button>下右</button>
|
||||
<tiny-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
|
||||
<tiny-button>下右</tiny-button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Tooltip } from '@opentiny/vue'
|
||||
import { Tooltip, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTooltip: Tooltip
|
||||
TinyTooltip: Tooltip,
|
||||
TinyButton: Button
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.box {
|
||||
width: 400px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
|
|
@ -75,12 +69,12 @@ export default {
|
|||
|
||||
.box .left {
|
||||
float: left;
|
||||
width: 60px;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.box .right {
|
||||
float: right;
|
||||
width: 60px;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.box .bottom {
|
||||
|
|
@ -92,9 +86,4 @@ export default {
|
|||
margin: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.box .left .hae-tooltip__popper,
|
||||
.box .right .hae-tooltip__popper {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="row">
|
||||
使用content属性：
|
||||
<tiny-tooltip content="这是提示内容" placement="top">
|
||||
<button class="tiny-button tiny-button--primary">鼠标悬浮到这里</button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
<div class="row">
|
||||
使用renderContent属性：
|
||||
<tiny-tooltip placement="top" content="提示内容" :render-content="renderContent">
|
||||
<button class="tiny-button tiny-button--primary">鼠标悬浮到这里</button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
<div class="row">
|
||||
使用content插槽：
|
||||
<tiny-tooltip placement="top" effect="light">
|
||||
<template #content>
|
||||
<div><Icon-operationfaild class="red" /> 该网段不可用！可用网段：163</div>
|
||||
</template>
|
||||
<button class="tiny-button tiny-button--primary">校验错误</button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { Tooltip as TinyTooltip } from '@opentiny/vue'
|
||||
import { iconOperationfaild } from '@opentiny/vue-icon'
|
||||
|
||||
const IconOperationfaild = iconOperationfaild()
|
||||
|
||||
function renderContent(h, content) {
|
||||
return (
|
||||
<div>
|
||||
<h1>1. {content}</h1>
|
||||
<h2>2. {content}</h2>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.row {
|
||||
margin: 16px 0;
|
||||
}
|
||||
.red {
|
||||
color: #f23030;
|
||||
fill: #f23030;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="row">
|
||||
使用content属性：
|
||||
<tiny-tooltip content="这是提示内容" placement="top">
|
||||
<button class="tiny-button tiny-button--primary">鼠标悬浮到这里</button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
<div class="row">
|
||||
使用renderContent属性：
|
||||
<tiny-tooltip placement="top" content="提示内容" :render-content="renderContent">
|
||||
<button class="tiny-button tiny-button--primary">鼠标悬浮到这里</button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
<div class="row">
|
||||
使用content插槽：
|
||||
<tiny-tooltip placement="top" effect="light">
|
||||
<template #content>
|
||||
<div><Icon-operationfaild class="red" /> 该网段不可用！可用网段：163</div>
|
||||
</template>
|
||||
<button class="tiny-button tiny-button--primary">校验错误</button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Tooltip } from '@opentiny/vue'
|
||||
import { iconOperationfaild } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTooltip: Tooltip,
|
||||
IconOperationfaild: iconOperationfaild()
|
||||
},
|
||||
methods: {
|
||||
renderContent(h, content) {
|
||||
return (
|
||||
<div>
|
||||
<h1>1. {content}</h1>
|
||||
<h2>2. {content}</h2>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.row {
|
||||
margin: 16px 0;
|
||||
}
|
||||
.red {
|
||||
color: #f23030;
|
||||
fill: #f23030;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="row">
|
||||
智能识别溢出：
|
||||
<tiny-switch v-model="visible" show-text style="width: 80px">
|
||||
<template #open>
|
||||
<span>auto</span>
|
||||
</template>
|
||||
<template #close>
|
||||
<span>always</span>
|
||||
</template>
|
||||
</tiny-switch>
|
||||
<div style="margin-top: 16px">
|
||||
<tiny-tooltip :visible="visible ? 'auto' : 'always'" content="智能提示的提示内容">
|
||||
<div class="ellipsis">我的内容很长很长。。。。</div>
|
||||
</tiny-tooltip>
|
||||
|
||||
<tiny-tooltip :visible="visible ? 'auto' : 'always'" content="智能提示的提示内容">
|
||||
<div class="ellipsis">内容不超长</div>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
手动控制模式：
|
||||
<tiny-switch v-model="manualShow" show-text style="width: 80px">
|
||||
<template #open>
|
||||
<span>显示</span>
|
||||
</template>
|
||||
<template #close>
|
||||
<span>隐藏</span>
|
||||
</template>
|
||||
</tiny-switch>
|
||||
<div style="margin-top: 16px">
|
||||
<tiny-tooltip v-model="manualShow" content="手动控制模式的提示内容" manual>
|
||||
<div class="ellipsis">我的内容很长很长。。。。</div>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
禁用控制模式：
|
||||
<tiny-switch v-model="disabled" show-text style="width: 80px">
|
||||
<template #open>
|
||||
<span>禁用</span>
|
||||
</template>
|
||||
<template #close>
|
||||
<span>正常</span>
|
||||
</template>
|
||||
</tiny-switch>
|
||||
<div style="margin-top: 16px">
|
||||
<tiny-tooltip content="禁用的提示内容" :disabled="disabled">
|
||||
<div class="ellipsis">我的内容很长很长。。。。</div>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { Tooltip as TinyTooltip, Switch as TinySwitch } from '@opentiny/vue'
|
||||
|
||||
const visible = ref(false)
|
||||
const manualShow = ref(false)
|
||||
const disabled = ref(false)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.ellipsis {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
margin: 0 20px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ellipsis:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="row">
|
||||
智能识别溢出：
|
||||
<tiny-switch v-model="visible" show-text style="width: 80px">
|
||||
<template #open>
|
||||
<span>auto</span>
|
||||
</template>
|
||||
<template #close>
|
||||
<span>always</span>
|
||||
</template>
|
||||
</tiny-switch>
|
||||
<div style="margin-top: 16px">
|
||||
<tiny-tooltip :visible="visible ? 'auto' : 'always'" content="智能提示的提示内容">
|
||||
<div class="ellipsis">我的内容很长很长。。。。</div>
|
||||
</tiny-tooltip>
|
||||
|
||||
<tiny-tooltip :visible="visible ? 'auto' : 'always'" content="智能提示的提示内容">
|
||||
<div class="ellipsis">内容不超长</div>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
手动控制模式：
|
||||
<tiny-switch v-model="manualShow" show-text style="width: 80px">
|
||||
<template #open>
|
||||
<span>显示</span>
|
||||
</template>
|
||||
<template #close>
|
||||
<span>隐藏</span>
|
||||
</template>
|
||||
</tiny-switch>
|
||||
<div style="margin-top: 16px">
|
||||
<tiny-tooltip v-model="manualShow" content="手动控制模式的提示内容" manual>
|
||||
<div class="ellipsis">我的内容很长很长。。。。</div>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
禁用控制模式：
|
||||
<tiny-switch v-model="disabled" show-text style="width: 80px">
|
||||
<template #open>
|
||||
<span>禁用</span>
|
||||
</template>
|
||||
<template #close>
|
||||
<span>正常</span>
|
||||
</template>
|
||||
</tiny-switch>
|
||||
<div style="margin-top: 16px">
|
||||
<tiny-tooltip content="禁用的提示内容" :disabled="disabled">
|
||||
<div class="ellipsis">我的内容很长很长。。。。</div>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Tooltip, Switch } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTooltip: Tooltip,
|
||||
TinySwitch: Switch
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
manualShow: false,
|
||||
disabled: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.ellipsis {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
margin: 0 20px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ellipsis:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="row">
|
||||
弹出小箭头：
|
||||
<tiny-switch v-model="visibleArrow" show-text style="width: 80px" @change="key++">
|
||||
<template #open>
|
||||
<span>显示</span>
|
||||
</template>
|
||||
<template #close>
|
||||
<span>隐藏</span>
|
||||
</template>
|
||||
</tiny-switch>
|
||||
</div>
|
||||
<div class="row">
|
||||
鼠标进入：
|
||||
<tiny-switch v-model="enterable" show-text style="width: 80px" @change="key++">
|
||||
<template #open>
|
||||
<span>可进入</span>
|
||||
</template>
|
||||
<template #close>
|
||||
<span>不可入</span>
|
||||
</template>
|
||||
</tiny-switch>
|
||||
</div>
|
||||
<div class="row">自定义类名popper1, 让字体变大</div>
|
||||
<div style="margin-top: 16px">
|
||||
<tiny-tooltip
|
||||
content="我是提示内容"
|
||||
:visible-arrow="visibleArrow"
|
||||
:enterable="enterable"
|
||||
popper-class="popper1"
|
||||
:key="key"
|
||||
>
|
||||
<div class="ellipsis">鼠标悬浮在这里</div>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Tooltip, Switch } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTooltip: Tooltip,
|
||||
TinySwitch: Switch
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visibleArrow: true,
|
||||
enterable: true,
|
||||
key: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.ellipsis {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
margin: 0 20px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ellipsis:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.popper1 {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,6 +3,9 @@
|
|||
<tiny-tooltip content="延迟 2000ms 出现" :open-delay="2000">
|
||||
<button class="tiny-button tiny-button--primary">延迟 2s 出现</button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip content="延迟 2000ms 关闭" :close-delay="2000">
|
||||
<button class="tiny-button tiny-button--primary">延迟 2s 关闭</button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip content="2000ms后自动隐藏" :hide-after="2000">
|
||||
<button class="tiny-button tiny-button--primary">2s 后自动隐藏</button>
|
||||
</tiny-tooltip>
|
||||
|
|
@ -1,8 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-tooltip content="延迟 2000ms 出现" :open-delay="2000">
|
||||
<tiny-tooltip content="延迟 2000ms 出现" :open-delay="2000" :boundaries-padding="30">
|
||||
<button class="tiny-button tiny-button--primary">延迟 2s 出现</button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip content="延迟 2000ms 关闭" :close-delay="2000">
|
||||
<button class="tiny-button tiny-button--primary">延迟 2s 关闭</button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip content="2000ms后自动隐藏" :hide-after="2000">
|
||||
<button class="tiny-button tiny-button--primary">2s 后自动隐藏</button>
|
||||
</tiny-tooltip>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<template>
|
||||
<tiny-tooltip effect="light" :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom">
|
||||
<button class="tiny-button tiny-button--primary" @click="disabled = !disabled">
|
||||
点击{{ disabled ? '开启' : '关闭' }} tooltip 功能
|
||||
</button>
|
||||
</tiny-tooltip>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { Tooltip as TinyTooltip } from '@opentiny/vue'
|
||||
|
||||
const disabled = ref(false)
|
||||
</script>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('测试动态禁用', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('tooltip#dynamic-disable')
|
||||
|
||||
const button = page.getByRole('button', { name: '点击关闭 tooltip 功能' })
|
||||
const button1 = page.getByRole('button', { name: '点击开启 tooltip 功能' })
|
||||
const tooltip = page.getByRole('tooltip', { name: '点击关闭 tooltip 功能', includeHidden: true })
|
||||
|
||||
// 不禁用时，悬浮
|
||||
await button.hover()
|
||||
await expect(tooltip).toBeVisible()
|
||||
await page.waitForTimeout(1000)
|
||||
|
||||
// 禁用后悬浮
|
||||
await button.click()
|
||||
await page.mouse.move(0, 0)
|
||||
await button1.hover()
|
||||
|
||||
await expect(tooltip).toBeHidden()
|
||||
await expect(tooltip).toHaveCSS('display', 'none')
|
||||
})
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<template>
|
||||
<tiny-tooltip effect="light" :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom">
|
||||
<button class="tiny-button tiny-button--primary" @click="disabled = !disabled">
|
||||
点击{{ disabled ? '开启' : '关闭' }} tooltip 功能
|
||||
</button>
|
||||
</tiny-tooltip>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Tooltip } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTooltip: Tooltip
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
disabled: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<template>
|
||||
<tiny-tooltip content="鼠标不能进入到 tooltip 中" :enterable="false" placement="bottom">
|
||||
<button class="tiny-button tiny-button--primary">鼠标不能进入到 tooltip 中</button>
|
||||
</tiny-tooltip>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { Tooltip as TinyTooltip } from '@opentiny/vue'
|
||||
|
||||
const disabled = ref(false)
|
||||
</script>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('测试鼠标不可进入', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('tooltip#enterable')
|
||||
|
||||
const button = page.getByRole('button', { name: '鼠标不能进入到 tooltip 中' })
|
||||
const tip = page.getByRole('tooltip', { name: '鼠标不能进入到 tooltip 中', includeHidden: true })
|
||||
|
||||
await button.hover()
|
||||
await page.waitForTimeout(100)
|
||||
|
||||
const box = await tip.boundingBox()
|
||||
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2)
|
||||
await expect(tip).toBeHidden()
|
||||
})
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<template>
|
||||
<tiny-tooltip content="鼠标不能进入到 tooltip 中" :enterable="false" placement="bottom">
|
||||
<button class="tiny-button tiny-button--primary">鼠标不能进入到 tooltip 中</button>
|
||||
</tiny-tooltip>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Tooltip } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTooltip: Tooltip
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
disabled: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<button class="tiny-button tiny-button--default" @click="showTip">手动控制tooltip的显示和隐藏</button>
|
||||
<tiny-tooltip v-model="showTooltip" content="手动控制模式" :manual="true">
|
||||
<button class="tiny-button tiny-button--primary">手动控制模式</button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { Tooltip as TinyTooltip } from '@opentiny/vue'
|
||||
|
||||
const showTooltip = ref(false)
|
||||
|
||||
function showTip() {
|
||||
showTooltip.value = !showTooltip.value
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<button class="tiny-button tiny-button--default" @click="showTip">手动控制tooltip的显示和隐藏</button>
|
||||
<tiny-tooltip v-model="showTooltip" content="手动控制模式" :manual="true">
|
||||
<button class="tiny-button tiny-button--primary">手动控制模式</button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Tooltip } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTooltip: Tooltip
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showTooltip: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTip() {
|
||||
this.showTooltip = !this.showTooltip
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-slider v-model="offset" :min="-200" :max="200"></tiny-slider>
|
||||
<tiny-tooltip content="出现位置的偏移量" :offset="offset" manual v-model="show" :key="offset">
|
||||
<button class="tiny-button tiny-button--primary">出现位置的偏移量</button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { Tooltip as TinyTooltip, Slider as TinySlider } from '@opentiny/vue'
|
||||
|
||||
const offset = ref(10)
|
||||
const show = ref(true)
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-slider v-model="offset" :min="-200" :max="200"></tiny-slider>
|
||||
<tiny-tooltip content="出现位置的偏移量" :offset="offset" manual v-model="show" :key="offset">
|
||||
<button class="tiny-button tiny-button--primary">出现位置的偏移量</button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Tooltip, Slider } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTooltip: Tooltip,
|
||||
TinySlider: Slider
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
offset: 10,
|
||||
show: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<template>
|
||||
<tiny-tooltip
|
||||
v-model="showTooltip"
|
||||
popper-class="tippoper"
|
||||
:append-to-body="false"
|
||||
content="popper 添加类名"
|
||||
:manual="false"
|
||||
>
|
||||
<button class="tiny-button tiny-button--primary">添加类名</button>
|
||||
</tiny-tooltip>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { Tooltip as TinyTooltip } from '@opentiny/vue'
|
||||
|
||||
const showTooltip = ref(true)
|
||||
</script>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('测试自定义类名', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('tooltip#popper-class')
|
||||
|
||||
const button = page.getByRole('button', { name: '添加类名' })
|
||||
const tip = button.locator('div.tiny-tooltip')
|
||||
|
||||
await button.hover()
|
||||
await page.waitForTimeout(500)
|
||||
await expect(tip).toHaveClass(/tippoper/)
|
||||
})
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<template>
|
||||
<tiny-tooltip
|
||||
v-model="showTooltip"
|
||||
popper-class="tippoper"
|
||||
:append-to-body="false"
|
||||
content="popper 添加类名"
|
||||
:manual="false"
|
||||
>
|
||||
<button class="tiny-button tiny-button--primary">添加类名</button>
|
||||
</tiny-tooltip>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Tooltip } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTooltip: Tooltip
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showTooltip: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
<template>
|
||||
<tiny-tooltip content="popper-options配置" :popper-options="options">
|
||||
<button class="tiny-button tiny-button--primary">popper-options配置</button>
|
||||
</tiny-tooltip>
|
||||
<div>
|
||||
<tiny-tooltip content="提示内容" :popper-options="options">
|
||||
<button class="tiny-button tiny-button--primary">鼠标悬浮到这里</button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
|
|
@ -9,7 +11,7 @@ import { ref } from 'vue'
|
|||
import { Tooltip as TinyTooltip } from '@opentiny/vue'
|
||||
|
||||
const options = ref({
|
||||
gpuAcceleration: true, // 当这一属性被设置为 true 时，popper 的位置将通过 CSS3 的 translate3d 来改变
|
||||
removeOnDestroy: false // 当你想要在调用 `destroy` 方法时不自动移除 popper 时，应当将此项设置为 false
|
||||
bubbling: true, // 监听元素所有上级有滚动元素的scroll事件,防止弹出层与页面分离
|
||||
removeOnDestroy: true // 弹出层消失后，自动从页面上移除相应的DOM元素
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
<template>
|
||||
<tiny-tooltip content="popper-options配置" :popper-options="options">
|
||||
<button class="tiny-button tiny-button--primary">popper-options配置</button>
|
||||
</tiny-tooltip>
|
||||
<div>
|
||||
<tiny-tooltip content="提示内容" :popper-options="options">
|
||||
<button class="tiny-button tiny-button--primary">鼠标悬浮到这里</button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
|
|
@ -14,8 +16,8 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
options: {
|
||||
gpuAcceleration: true, // 当这一属性被设置为 true 时，popper 的位置将通过 CSS3 的 translate3d 来改变
|
||||
removeOnDestroy: false // 当你想要在调用 `destroy` 方法时不自动移除 popper 时，应当将此项设置为 false
|
||||
bubbling: true, // 监听元素所有上级有滚动元素的scroll事件,防止弹出层与页面分离
|
||||
removeOnDestroy: true // 当你想要在调用 `destroy` 方法时不自动移除 popper 时，应当将此项设置为 false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
<template>
|
||||
<tiny-tooltip :tabindex="1" content="Tooltip 组件的 tabindex 为1">
|
||||
<button>Tooltip 组件的 tabindex 为1</button>
|
||||
</tiny-tooltip>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { Tooltip as TinyTooltip } from '@opentiny/vue'
|
||||
</script>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('测试 tabindex 配置', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('tooltip#tabindex')
|
||||
|
||||
const button = page.getByRole('button', { name: 'Tooltip 组件的 tabindex 为1' })
|
||||
await expect(button).toHaveAttribute('tabindex', '1')
|
||||
})
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<template>
|
||||
<tiny-tooltip :tabindex="1" content="Tooltip 组件的 tabindex 为1">
|
||||
<button>Tooltip 组件的 tabindex 为1</button>
|
||||
</tiny-tooltip>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Tooltip } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTooltip: Tooltip
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,35 +1,40 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
Effects示例：
|
||||
<tiny-tooltip content="dark 提示文字" placement="top">
|
||||
<button>Dark</button>
|
||||
<tiny-button>Dark</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip effect="light" content="light 提示文字" placement="top">
|
||||
<button>Light</button>
|
||||
<tiny-button>Light</tiny-button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
<div class="box">
|
||||
Types示例：
|
||||
<tiny-tooltip type="normal" content="normal 提示文字" placement="top">
|
||||
<button>normal</button>
|
||||
<tiny-button>normal</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip type="warning" content="warning 提示文字" placement="top">
|
||||
<button>warning</button>
|
||||
<tiny-button>warning</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip type="error" content="error 提示文字" placement="top">
|
||||
<button>error</button>
|
||||
<tiny-button>error</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip type="info" content="info 提示文字" placement="top">
|
||||
<button>info</button>
|
||||
<tiny-button>info</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip type="success" content="success 提示文字" placement="top">
|
||||
<button>success</button>
|
||||
<tiny-button>success</tiny-button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { Tooltip as TinyTooltip } from '@opentiny/vue'
|
||||
import { Tooltip as TinyTooltip, Button as TinyButton } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-tooltip {
|
||||
margin-right: 16px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,41 +1,47 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
Effects示例：
|
||||
<tiny-tooltip content="dark 提示文字" placement="top">
|
||||
<button>Dark</button>
|
||||
<tiny-button>Dark</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip effect="light" content="light 提示文字" placement="top">
|
||||
<button>Light</button>
|
||||
<tiny-button>Light</tiny-button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
<div class="box">
|
||||
Types示例：
|
||||
<tiny-tooltip type="normal" content="normal 提示文字" placement="top">
|
||||
<button>normal</button>
|
||||
<tiny-button>normal</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip type="warning" content="warning 提示文字" placement="top">
|
||||
<button>warning</button>
|
||||
<tiny-button>warning</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip type="error" content="error 提示文字" placement="top">
|
||||
<button>error</button>
|
||||
<tiny-button>error</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip type="info" content="info 提示文字" placement="top">
|
||||
<button>info</button>
|
||||
<tiny-button>info</tiny-button>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip type="success" content="success 提示文字" placement="top">
|
||||
<button>success</button>
|
||||
<tiny-button>success</tiny-button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Tooltip } from '@opentiny/vue'
|
||||
import { Tooltip, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTooltip: Tooltip
|
||||
TinyTooltip: Tooltip,
|
||||
TinyButton: Button
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-tooltip {
|
||||
margin-right: 16px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-tooltip placement="top">
|
||||
<template #content>
|
||||
<div class="h50">通过 <span class="red">slot = "content" </span>自定义提示内容</div>
|
||||
</template>
|
||||
<button class="tiny-button tiny-button--primary">插槽的使用</button>
|
||||
</tiny-tooltip>
|
||||
|
||||
<tiny-tooltip placement="top" effect="light">
|
||||
<template #content>
|
||||
<div><Icon-operationfaild class="red" /> 该网段不可用！可用网段：163</div>
|
||||
</template>
|
||||
<button class="tiny-button tiny-button--primary">校验错误</button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { Tooltip as TinyTooltip } from '@opentiny/vue'
|
||||
import { iconOperationfaild } from '@opentiny/vue-icon'
|
||||
|
||||
const IconOperationfaild = iconOperationfaild()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.h50 {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.mr9 {
|
||||
margin-right: 9px;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: #f23030;
|
||||
fill: #f23030;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-tooltip placement="top">
|
||||
<template #content>
|
||||
<div class="h50">通过 <span class="red">slot = "content" </span>自定义提示内容</div>
|
||||
</template>
|
||||
<button class="tiny-button tiny-button--primary">插槽的使用</button>
|
||||
</tiny-tooltip>
|
||||
|
||||
<tiny-tooltip placement="top" effect="light">
|
||||
<template #content>
|
||||
<div><Icon-operationfaild class="red" /> 该网段不可用！可用网段：163</div>
|
||||
</template>
|
||||
<button class="tiny-button tiny-button--primary">校验错误</button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Tooltip } from '@opentiny/vue'
|
||||
import { iconOperationfaild } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTooltip: Tooltip,
|
||||
IconOperationfaild: iconOperationfaild()
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.h50 {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.mr9 {
|
||||
margin-right: 9px;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: #f23030;
|
||||
fill: #f23030;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<template>
|
||||
<tiny-tooltip content="出现位置的偏移量" :offset="20">
|
||||
<button class="tiny-button tiny-button--primary">出现位置的偏移量</button>
|
||||
</tiny-tooltip>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { Tooltip as TinyTooltip } from '@opentiny/vue'
|
||||
</script>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<template>
|
||||
<tiny-tooltip content="出现位置的偏移量" :offset="20">
|
||||
<button class="tiny-button tiny-button--primary">出现位置的偏移量</button>
|
||||
</tiny-tooltip>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Tooltip } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTooltip: Tooltip
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-tooltip content="提示内容" :render-content="renderContent" placement="bottom">
|
||||
<button class="tiny-button tiny-button--primary">自定义渲染函数的使用</button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { Tooltip as TinyTooltip } from '@opentiny/vue'
|
||||
|
||||
function renderContent(h, content) {
|
||||
return (
|
||||
<div>
|
||||
<h1>{content}</h1>
|
||||
<h2>{content}</h2>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('测试自定义渲染函数', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('tooltip#tooltip-render-content')
|
||||
|
||||
const button = page.getByRole('button', { name: '自定义渲染函数的使用' })
|
||||
const tip = page.getByRole('tooltip', { name: '提示内容 提示内容' })
|
||||
|
||||
await button.hover()
|
||||
await expect(tip).toBeVisible()
|
||||
})
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-tooltip content="提示内容" :render-content="renderContent" placement="bottom">
|
||||
<button class="tiny-button tiny-button--primary">自定义渲染函数的使用</button>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Tooltip } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTooltip: Tooltip
|
||||
},
|
||||
methods: {
|
||||
renderContent(h, content) {
|
||||
return (
|
||||
<div>
|
||||
<h1>{content}</h1>
|
||||
<h2>{content}</h2>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<tiny-tooltip content="定义渐变动画" transition="custom-transition" placement="bottom">
|
||||
<button class="tiny-button tiny-button--primary">定义渐变动画</button>
|
||||
<tiny-tooltip content="渐隐动画" transition="custom-transition" placement="bottom">
|
||||
<button class="tiny-button tiny-button--primary">鼠标悬浮到这里</button>
|
||||
</tiny-tooltip>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,14 +13,12 @@ import { Tooltip as TinyTooltip } from '@opentiny/vue'
|
|||
.tiny-tooltip.custom-transition-enter-from,
|
||||
.tiny-tooltip.custom-transition-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-999px);
|
||||
transform-origin: center top;
|
||||
}
|
||||
|
||||
.custom-transition-enter-active,
|
||||
.custom-transition-leave-active {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
transition: opacity 1.5s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<tiny-tooltip content="定义渐变动画" transition="custom-transition" placement="bottom">
|
||||
<button class="tiny-button tiny-button--primary">定义渐变动画</button>
|
||||
<tiny-tooltip content="渐隐动画" transition="custom-transition" placement="bottom">
|
||||
<button class="tiny-button tiny-button--primary">鼠标悬浮到这里</button>
|
||||
</tiny-tooltip>
|
||||
</template>
|
||||
|
||||
|
|
@ -10,9 +10,6 @@ import { Tooltip } from '@opentiny/vue'
|
|||
export default {
|
||||
components: {
|
||||
TinyTooltip: Tooltip
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -22,14 +19,12 @@ export default {
|
|||
.tiny-tooltip.custom-transition-enter-from,
|
||||
.tiny-tooltip.custom-transition-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-999px);
|
||||
transform-origin: center top;
|
||||
}
|
||||
|
||||
.custom-transition-enter-active,
|
||||
.custom-transition-leave-active {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
transition: opacity 1.5s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<template>
|
||||
<tiny-tooltip content="不显示 Tooltip 箭头" :visible-arrow="false">
|
||||
<button class="tiny-button tiny-button--primary">不显示 Tooltip 箭头</button>
|
||||
</tiny-tooltip>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Tooltip } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTooltip: Tooltip
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
disabled: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<button class="tiny-button tiny-button--default" @click="showTip">切换visible</button>
|
||||
<span> 当前visible={{ visibleVal }} </span>
|
||||
</div>
|
||||
|
||||
<tiny-tooltip :visible="visibleVal" content="我会显示这个提示">
|
||||
<div class="ellipsis">我的内容很长很长。。。。</div>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip :visible="visibleVal" content="visibleVal为auto时，我不会显示这个提示">
|
||||
<div class="normal">内容不超长</div>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { Tooltip as TinyTooltip } from '@opentiny/vue'
|
||||
|
||||
const visibleVal = ref('always')
|
||||
|
||||
function showTip() {
|
||||
visibleVal.value = visibleVal.value === 'always' ? 'auto' : 'always'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ellipsis {
|
||||
width: 100px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.normal {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('测试智能出现', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('tooltip#visible-show')
|
||||
|
||||
const button = page.getByRole('button', { name: '切换visible' })
|
||||
const textLong = page.getByText('我的内容很长很长。。。。')
|
||||
const textShort = page.getByText('内容不超长')
|
||||
const tipLong = page.getByRole('tooltip', { name: '我会显示这个提示', includeHidden: true })
|
||||
const tipShort = page.getByRole('tooltip', { name: 'visibleVal为auto时，我不会显示这个提示', includeHidden: true })
|
||||
|
||||
// 测试always
|
||||
await textLong.hover()
|
||||
await expect(tipLong).toBeVisible()
|
||||
await page.waitForTimeout(300)
|
||||
|
||||
await textShort.hover()
|
||||
await expect(tipShort).toBeVisible()
|
||||
await page.waitForTimeout(300)
|
||||
|
||||
// 测试auto
|
||||
await button.click()
|
||||
await textLong.hover()
|
||||
await expect(tipLong).toBeVisible()
|
||||
await page.waitForTimeout(300)
|
||||
|
||||
await textShort.hover()
|
||||
await expect(tipShort).toBeHidden()
|
||||
})
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<button class="tiny-button tiny-button--default" @click="showTip">切换visible</button>
|
||||
<span> 当前visible={{ visibleVal }} </span>
|
||||
</div>
|
||||
|
||||
<tiny-tooltip :visible="visibleVal" content="我会显示这个提示">
|
||||
<div class="ellipsis">我的内容很长很长。。。。</div>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip :visible="visibleVal" content="visibleVal为auto时，我不会显示这个提示">
|
||||
<div class="normal">内容不超长</div>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Tooltip } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTooltip: Tooltip
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visibleVal: 'always'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTip() {
|
||||
this.visibleVal = this.visibleVal === 'always' ? 'auto' : 'always'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ellipsis {
|
||||
width: 100px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.normal {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,4 +4,4 @@ title: ToolTip 文字提示
|
|||
|
||||
# ToolTip 文字提示
|
||||
|
||||
<div>动态显示提示信息，一般通过鼠标事件进行响应。</div>
|
||||
<div>动态悬浮在元素上的提示信息，一般通过鼠标事件进行响应。</div>
|
||||
|
|
|
|||
|
|
@ -4,4 +4,4 @@ title: ToolTip text prompt
|
|||
|
||||
# ToolTip text prompt
|
||||
|
||||
<div>Dynamic display of prompt information, which is generally responded through mouse events.</div>
|
||||
<div>A prompt that is dynamically suspended on an element, usually in response to a mouse event</div>
|
||||
|
|
|
|||
|
|
@ -5,145 +5,136 @@ export default {
|
|||
{
|
||||
'demoId': 'basic-usage',
|
||||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': `<p>
|
||||
通过 <code>content</code> 属性指定提示的内容<br>
|
||||
通过 <code>placement</code> 属性指定提示的显示位置，支持12个显示位置<br>
|
||||
通过 <code>effect</code> 属性指定提示的效果<br>
|
||||
</p>`,
|
||||
'en-US': `<p>
|
||||
Specify the content of the prompt via the <code>content</code> attribute <br>
|
||||
Use the <code>placement</code> property to specify the display location of the prompt. 12 display locations are supported <br>
|
||||
Specify the effect of the prompt with the <code>effect</code> property <br>
|
||||
</p>`
|
||||
},
|
||||
'codeFiles': ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'custom-transition',
|
||||
'name': { 'zh-CN': '自定义渐变动画', 'en-US': 'Customized Gradient Animation' },
|
||||
'demoId': 'theme',
|
||||
'name': { 'zh-CN': '主题', 'en-US': 'Theme' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>transition</code> 定义渐变动画,默认选值为 <code>tiny-fade-in-linear</code></p>\n',
|
||||
'zh-CN': `<p>
|
||||
通过 <code>effect</code> 属性设置明暗效果,可选值 dark/light 两种效果,默认值为 dark，通常使用<code>effect</code>设置效果<br>
|
||||
通过 <code>type</code> 属性设置主题,它的优先级大于 <code>effect</code>; 可选值 'normal', 'warning', 'error', 'info', 'success', 。
|
||||
</p>
|
||||
`,
|
||||
'en-US': `<p>
|
||||
The <code>effect</code> property is used to set the light and dark effect. The optional dark/light effect is dark by default. The effect< br> is usually set by <code>effect</code>.
|
||||
Set the theme with the <code>type</code> property, which has a higher priority than the <code>effect</code>; Optional values 'normal', 'warning', 'error', 'info', 'success',.
|
||||
</p>`
|
||||
},
|
||||
'codeFiles': ['theme.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'control',
|
||||
'name': { 'zh-CN': '控制/禁用提示', 'en-US': 'Control/disable' },
|
||||
'desc': {
|
||||
'zh-CN': `<p>
|
||||
提示组件默认是监听鼠标移入/移出事件来触发，手动控制提示的出现，有以下方法：<br>
|
||||
1.通过 <code>visible</code> 属性设置是否智能识别溢出后提示,属性取值为 <code> always / auto </code>。当取值为<code>auto</code>时，智能提示是自动识别文字是否有长度溢出，动态的显示提示。<br>
|
||||
2.通过 <code>manual</code> 属性为 true 后,就可以通过设置 <code>v-model</code> 属性，动态控制显示和隐藏<br>
|
||||
3.通过 <code>diabled</code> 属性，直接禁用提示。<br>
|
||||
</p>`,
|
||||
'en-US': `<p>
|
||||
The Tooltip component is triggered by listening for mouse move in/out events by default, and manually controls the appearance of the prompt in the following ways: <br>
|
||||
1. Use the <code>visible</code> property to set whether the overflow prompt is intelligently recognized. The property value is <code> always/auto </code>. If the value is <code>auto</code>, the smart prompt automatically identifies whether the text length overruns and dynamically displays the prompt. <br>
|
||||
2. After the <code>manual</code> property is true, you can dynamically control the display and hiding of <br> by setting the <code>v-model</code> property.
|
||||
3. Use the <code>diabled</code> property to disable the tooltip. <br>
|
||||
</p>`
|
||||
},
|
||||
'codeFiles': ['control.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'content',
|
||||
'name': { 'zh-CN': '弹出层内容', 'en-US': 'Tooltip content' },
|
||||
'desc': {
|
||||
'zh-CN': `<p>
|
||||
通过 <code>content</code> 属性指定弹出的文本。<br>
|
||||
通过 <code>renderContent</code> 自定义渲染函数,返回需要渲染的节点内容，函数声明为： (h, content)=>vnode。<br>
|
||||
通过 <code>content</code> 插槽，自定义内容，当弹出复杂的内容结构时，推荐使用插槽的方式。<br>
|
||||
</p>`,
|
||||
'en-US': `<p>
|
||||
Specify the pop-up text via the <code>content</code> property. <br>
|
||||
A custom rendering function with <code>renderContent</code> returns the node content to be rendered. The function is declared as (h, content)=>vnode. <br>
|
||||
The <code>content</code> slot is used to customize content. It is recommended to use the slot when a complex content structure pops up. <br>
|
||||
</p>`
|
||||
},
|
||||
'codeFiles': ['content.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'offset',
|
||||
'name': { 'zh-CN': '弹出层的偏移', 'en-US': 'Offset' },
|
||||
'desc': {
|
||||
'zh-CN': `<p>通过 <code>offset</code> 属性设置 Tooltip 组件出现位置的偏移量。</p>`,
|
||||
'en-US':
|
||||
'<p>Defines the gradient animation through <code>transition</code>. The default value is <code>tiny-fade-in-linear</code></p>\n'
|
||||
'<p>Use the <code>offset</code> property to set the offset of the position where the Tooltip component appears. </p>\n'
|
||||
},
|
||||
'codeFiles': ['custom-transition.vue']
|
||||
'codeFiles': ['offset.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'dynamic-disable',
|
||||
'name': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
|
||||
'desc': { 'zh-CN': '<p>通过 <code>diabled</code> 设置禁用</p>\n', 'en-US': '<p>Disabled</code></p>\n' },
|
||||
'codeFiles': ['dynamic-disable.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'manual-control-tip',
|
||||
'name': { 'zh-CN': '手动控制', 'en-US': 'Manual Control' },
|
||||
'demoId': 'custom-popper',
|
||||
'name': { 'zh-CN': '弹出层的特性', 'en-US': 'Features of the popper layer' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>手动控制模式，通过设置 <code>manual</code> 属性为 true 后，mouseenter 和 mouseleave 事件将不会生效,然后可以通过设置 <code>v-model</code> 动态控制显示和隐藏</p>\n',
|
||||
'en-US':
|
||||
'<p>Manual control mode. After the <code>manual</code> attribute is set to true, the mouseenter and mouseleave events do not take effect. You can then dynamically display and hide </p>\n by setting <code>v-model</code>'
|
||||
'zh-CN': `<p>
|
||||
通过 <code> visible-arrow </code> 属性设置是否显示小箭头。<br>
|
||||
通过 <code> enterable </code> 属性设置鼠标是否可进入到 tooltip 中。<br>
|
||||
通过 <code> popper-class </code> 属性设置弹出dom的类名，便于用户定制弹出层的样式。<br>
|
||||
</p>`,
|
||||
'en-US': `<p>
|
||||
The <code> visible-arrow </code> property sets whether the small arrow is displayed. <br>
|
||||
Use the <code> enterable </code> property to set whether the mouse can enter the tooltip. <br>
|
||||
You can use the <code> popper-class </code> property to set the class name of the eject dom to customize the style of the eject layer. <br>
|
||||
</p>`
|
||||
},
|
||||
'codeFiles': ['manual-control-tip.vue']
|
||||
'codeFiles': ['custom-popper.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'visible-show',
|
||||
'name': { 'zh-CN': '智能出现控制', 'en-US': 'Intelligent Appearance Control' },
|
||||
'demoId': 'delay',
|
||||
'name': { 'zh-CN': '延迟控制', 'en-US': 'Delay control' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>提示的智能出现的模式，设置为 <code>auto</code> 时，tooltip只有在文本超长时，才显示出来。</p>\n',
|
||||
'en-US':
|
||||
'<p>Smart display mode of the prompt. When this parameter is set to <code>auto</code>, the tooltip is displayed only when the text is too long. </p>\n'
|
||||
'zh-CN': `<p>
|
||||
通过 <code>open-delay</code> 属性设置 Tooltip 组件延迟出现的时间，单位毫秒,默认值为 0。<br>
|
||||
通过 <code>close-delay</code> 属性设置 Tooltip 组件延迟关闭的时间，单位毫秒,默认值为 300。<br>
|
||||
通过 <code>hide-after</code> 属性设置 Tooltip 组件出现后自动隐藏的时间，单位毫秒，为 0 则不会自动隐藏,默认值为 0。<br>
|
||||
</p>`,
|
||||
'en-US': `<p>
|
||||
Use the <code>open-delay</code> property to set the delay in milliseconds for the Tooltip component to appear. The default value is 0. <br>
|
||||
Use the <code>close-delay</code> property to set the delay in closing the Tooltip component, in milliseconds. The default value is 300. <br>
|
||||
Run the <code>hide-after</code> property to set the time for the Tooltip component to be automatically hidden after it appears, in milliseconds. If it is 0, it will not be automatically hidden. The default value is 0. <br>
|
||||
</p>`
|
||||
},
|
||||
'codeFiles': ['visible-show.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'tooltip-theme',
|
||||
'name': { 'zh-CN': '主题', 'en-US': 'Subject' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>effect</code> 属性设置主题,可选值 dark/light 两种主题,默认值为 dark</p>\n',
|
||||
'en-US': '<p>Use the <code>effect</code> attribute to set the theme. The options are dark and light. </p>\n'
|
||||
},
|
||||
'codeFiles': ['tooltip-theme.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'open-delay',
|
||||
'name': { 'zh-CN': '自动隐藏和延迟时间', 'en-US': 'Auto hide and delay time' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>hide-after</code> 属性设置 Tooltip 组件出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏。通过 <code>open-delay</code> 属性设置 Tooltip 组件延迟出现的时间，单位毫秒。</p>\n',
|
||||
'en-US':
|
||||
'<p>Use the <code>hide-after</code> attribute to set the automatic hiding delay after the Tooltip component appears, in milliseconds. If the value is 0, the Tooltip component is not automatically hidden. The <code>open-delay</code> attribute is used to set the delay for the Tooltip component to appear, in milliseconds. </p>\n'
|
||||
},
|
||||
'codeFiles': ['open-delay.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'tooltip-offset',
|
||||
'name': { 'zh-CN': '偏移量', 'en-US': 'Offset' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>offset</code> 属性设置 Tooltip 组件出现位置的偏移量。</p>\n',
|
||||
'en-US':
|
||||
'<p>Use the <code>offset</code> attribute to set the offset of the position where the Tooltip component appears. </p>\n'
|
||||
},
|
||||
'codeFiles': ['tooltip-offset.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'enterable',
|
||||
'name': { 'zh-CN': '鼠标是否可进入', 'en-US': 'Whether the mouse can be accessed' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>enterable</code> 属性设置鼠标是否可进入到 tooltip 中。</p>\n',
|
||||
'en-US':
|
||||
'<p>The <code>enterable</code> attribute is used to set whether the mouse can access the tooltip. </p>\n'
|
||||
},
|
||||
'codeFiles': ['enterable.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'visible-arrow',
|
||||
'name': { 'zh-CN': '是否显示箭头', 'en-US': 'Display arrow' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>visible-arrow</code> 属性设置是否显示 Tooltip 箭头。</p>\n',
|
||||
'en-US':
|
||||
'<p>The <code>visible-arrow</code> attribute is used to set whether to display the Tooltip arrow. </p>\n'
|
||||
},
|
||||
'codeFiles': ['visible-arrow.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'popper-class',
|
||||
'name': { 'zh-CN': '添加样式类名', 'en-US': 'Add Style Class Name' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>popper-class</code> 属性为 Tooltip 的 popper 添加类名。</p>\n',
|
||||
'en-US':
|
||||
'<p>Add the class name for the popper of the Tooltip using the <code>popper-class</code> attribute. </p>\n'
|
||||
},
|
||||
'codeFiles': ['popper-class.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'tooltip-render-content',
|
||||
'name': { 'zh-CN': '自定义渲染函数', 'en-US': 'Slot' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>renderContent</code> 自定义渲染函数,返回需要渲染的节点内容 arg1:Vue的渲染函数h arg2:传递给组件的content文本。</p>\n',
|
||||
'en-US': '<p>Add custom content through the <code>content</code> slot. </p>\n'
|
||||
},
|
||||
'codeFiles': ['tooltip-render-content.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'tooltip-content',
|
||||
'name': { 'zh-CN': '插槽', 'en-US': 'popper configuration' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>content</code> 插槽添加自定义内容。</p>\n',
|
||||
'en-US':
|
||||
'<p> uses the <code>popper-options</code> attribute to configure the popper parameter of the Tooltip. For details, see <a href="https://popper.js.org/">popper.js</a></p>\n'
|
||||
},
|
||||
'codeFiles': ['tooltip-content.vue']
|
||||
'codeFiles': ['delay.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'popper-options',
|
||||
'name': { 'zh-CN': 'popper配置', 'en-US': 'tabindex configuration' },
|
||||
'name': { 'zh-CN': '高级配置', 'en-US': 'Advanced configuration' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>popper-options</code> 属性为 Tooltip 的 popper 配置参数,具体可参考<a href="https://popper.js.org/">popper.js</a></p>\n',
|
||||
'<p>通过 <code>popper-options</code> 属性为 Tooltip 的 popper 配置参数,请参考下面的PopperOption文档</p>',
|
||||
'en-US':
|
||||
'<p>By configuring <code>tabindex</code>, the configured attributes are automatically added to the trigger source of the component. </p>\n'
|
||||
'<p>Use the <code>popper-options</code> property to configure popper parameters for Tooltip. Refer to the PopperOption documentation below </p>\n'
|
||||
},
|
||||
'codeFiles': ['popper-options.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'tabindex',
|
||||
'name': { 'zh-CN': 'tabindex 配置', 'en-US': '' },
|
||||
'demoId': 'transition',
|
||||
'name': { 'zh-CN': '自定义渐变动画', 'en-US': 'Customized Animation' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过配置 <code>tabindex</code>， 配置的属性会自动添加到该组件的触发原上。</p>\n',
|
||||
'en-US': ''
|
||||
'zh-CN': '<p>通过 <code>transition</code> 定义渐变动画,默认选值为 <code>tiny-fade-in-linear</code></p>\n',
|
||||
'en-US':
|
||||
'<p>Define a gradient animation using <code>transition</code>. The default value is <code>tiny-fade-in-linear</code></p>'
|
||||
},
|
||||
'codeFiles': ['tabindex.vue']
|
||||
'codeFiles': ['transition.vue']
|
||||
}
|
||||
],
|
||||
apis: [
|
||||
|
|
@ -154,12 +145,12 @@ export default {
|
|||
{
|
||||
'name': 'effect',
|
||||
'type': 'string',
|
||||
'defaultValue': '该属性的默认值为 dark',
|
||||
'defaultValue': 'dark',
|
||||
'desc': {
|
||||
'zh-CN': '默认提供的主题;该属性的可选值为 dark/light',
|
||||
'en-US': 'Default theme; The value of this attribute can be dark or light'
|
||||
},
|
||||
'demoId': 'tooltip-theme'
|
||||
'demoId': 'theme'
|
||||
},
|
||||
{
|
||||
'name': 'type',
|
||||
|
|
@ -170,29 +161,22 @@ export default {
|
|||
'en-US':
|
||||
'The default type is provided. The options for this attribute are normal, warning, error, information, and success. The priority of type is higher than that of effect.'
|
||||
},
|
||||
'demoId': 'tooltip-theme'
|
||||
'demoId': 'theme'
|
||||
},
|
||||
{
|
||||
'name': 'content',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '显示的内容，也可以通过 slot#content 传入 DOM',
|
||||
'en-US': 'Displayed content. You can also use slot#content to transfer the content to the DOM.'
|
||||
'zh-CN': '显示的内容',
|
||||
'en-US': 'Displayed content.'
|
||||
},
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'append-to-body',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为 true',
|
||||
'desc': { 'zh-CN': '是否添加到body上', 'en-US': 'Whether to add to body' },
|
||||
'demoId': ''
|
||||
'demoId': 'content'
|
||||
},
|
||||
{
|
||||
'name': 'placement',
|
||||
'type': 'string',
|
||||
'defaultValue': '该属性的默认值为 bottom',
|
||||
'defaultValue': ' bottom',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'Tooltip 的出现位置;该属性的可选值为 top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end',
|
||||
|
|
@ -201,145 +185,203 @@ export default {
|
|||
},
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'modelValue / v-model',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为 false',
|
||||
'desc': { 'zh-CN': '状态是否可见', 'en-US': 'Whether the status is visible' },
|
||||
'demoId': 'manual-control-tip'
|
||||
},
|
||||
|
||||
{
|
||||
'name': 'disabled',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为 false',
|
||||
'desc': { 'zh-CN': 'Tooltip 是否可用', 'en-US': 'Whether Tooltip is available' },
|
||||
'demoId': 'dynamic-disable'
|
||||
},
|
||||
{
|
||||
'name': 'offset',
|
||||
'type': 'number',
|
||||
'defaultValue': '该属性的默认值为 0',
|
||||
'desc': { 'zh-CN': '出现位置的偏移量', 'en-US': 'Offset of the occurrence position' },
|
||||
'demoId': 'tooltip-offset'
|
||||
},
|
||||
{
|
||||
'name': 'transition',
|
||||
'type': 'string',
|
||||
'defaultValue': '该属性的默认值为 tiny-fade-in-linear',
|
||||
'desc': { 'zh-CN': '定义渐变动画', 'en-US': 'Define gradient animation' },
|
||||
'demoId': 'custom-transition'
|
||||
},
|
||||
{
|
||||
'name': 'visible-arrow',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为 true',
|
||||
'desc': {
|
||||
'zh-CN': '是否显示 Tooltip 箭头，popper.js 的参数',
|
||||
'en-US': 'Indicates whether to display the tooltip arrow. This parameter is a parameter in popper.js.'
|
||||
},
|
||||
'demoId': 'visible-arrow'
|
||||
},
|
||||
{
|
||||
'name': 'popper-options',
|
||||
'type': 'object',
|
||||
'defaultValue': "该属性的默认值为 { boundariesCBG XUI: 'body', gpuAcceleration: false }",
|
||||
'desc': {
|
||||
'zh-CN': 'popper.js 的参数;该属性的可选值为 参考 popper.js 文档',
|
||||
'en-US':
|
||||
'Parameters of popper.js; The optional value of this property is a reference to the popper.js document'
|
||||
},
|
||||
'demoId': 'popper-options'
|
||||
},
|
||||
{
|
||||
'name': 'open-delay',
|
||||
'type': 'number',
|
||||
'defaultValue': '该属性的默认值为 0',
|
||||
'desc': { 'zh-CN': '延迟出现，单位毫秒', 'en-US': 'Delay, in milliseconds.' },
|
||||
'demoId': 'open-delay'
|
||||
'defaultValue': 'false',
|
||||
'desc': { 'zh-CN': 'Tooltip 是否禁用', 'en-US': 'Whether Tooltip is disable' },
|
||||
'demoId': 'control'
|
||||
},
|
||||
{
|
||||
'name': 'manual',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为 false',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN': '手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效',
|
||||
'en-US':
|
||||
'Manual control mode. If this parameter is set to true, the mouseenter and mouseleave events do not take effect.'
|
||||
},
|
||||
'demoId': 'manual-control-tip'
|
||||
'demoId': 'control'
|
||||
},
|
||||
{
|
||||
'name': 'modelValue / v-model',
|
||||
'type': 'boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN': '配置 manual = true时，控制弹出状态',
|
||||
'en-US': 'If manual is set to true, the pop-up status is controlled'
|
||||
},
|
||||
'demoId': 'control'
|
||||
},
|
||||
{
|
||||
'name': 'offset',
|
||||
'type': 'number',
|
||||
'defaultValue': '0',
|
||||
'desc': { 'zh-CN': '弹出层出现位置的偏移量', 'en-US': 'Offset of the occurrence position' },
|
||||
'demoId': 'offset'
|
||||
},
|
||||
|
||||
{
|
||||
'name': 'visible-arrow',
|
||||
'type': 'boolean',
|
||||
'defaultValue': 'true',
|
||||
'desc': {
|
||||
'zh-CN': '是否显示箭头',
|
||||
'en-US': 'Indicates whether to display the tooltip arrow.'
|
||||
},
|
||||
'demoId': 'custom-popper'
|
||||
},
|
||||
{
|
||||
'name': 'open-delay',
|
||||
'type': 'number',
|
||||
'defaultValue': '0',
|
||||
'desc': { 'zh-CN': '延迟出现的时长，单位毫秒', 'en-US': 'Open delay time, in milliseconds.' },
|
||||
'demoId': 'delay'
|
||||
},
|
||||
{
|
||||
'name': 'close-delay',
|
||||
'type': 'number',
|
||||
'defaultValue': '300',
|
||||
'desc': { 'zh-CN': '延迟关闭的时长，单位毫秒', 'en-US': 'Close Delay time, in milliseconds.' },
|
||||
'demoId': 'delay'
|
||||
},
|
||||
{
|
||||
'name': 'hide-after',
|
||||
'type': 'number',
|
||||
'defaultValue': ' 0',
|
||||
'desc': {
|
||||
'zh-CN': '出现后自动隐藏的时长，单位毫秒，为 0 则不会自动隐藏',
|
||||
'en-US':
|
||||
'Duration of automatic hiding after appearing, in milliseconds. If 0, it will not be automatically hidden'
|
||||
},
|
||||
'demoId': 'delay'
|
||||
},
|
||||
|
||||
{
|
||||
'name': 'visible',
|
||||
'type': 'string',
|
||||
'defaultValue': '该属性的默认值为 always',
|
||||
'defaultValue': 'always',
|
||||
'desc': {
|
||||
'zh-CN': '提示的智能出现的模式；该属性的可选值为 auto/always',
|
||||
'en-US': 'Indicated intelligent display mode; The value of this attribute can be auto or always'
|
||||
'en-US':
|
||||
'The pattern of intelligent emergence of hints; The optional value for this property is auto/always'
|
||||
},
|
||||
'demoId': 'visible-show'
|
||||
'demoId': 'control'
|
||||
},
|
||||
{
|
||||
'name': 'enterable',
|
||||
'type': 'boolean',
|
||||
'defaultValue': ' true',
|
||||
'desc': {
|
||||
'zh-CN': '鼠标是否可进入到 tooltip 的弹出层中',
|
||||
'en-US': 'Whether the mouse can enter the pop-up layer of the tooltip'
|
||||
},
|
||||
'demoId': 'custom-popper'
|
||||
},
|
||||
{
|
||||
'name': 'popper-options',
|
||||
'type': 'object',
|
||||
'defaultValue': ' { }',
|
||||
'desc': {
|
||||
'zh-CN': '高级参数;请参考PopperOption的说明',
|
||||
'en-US': 'Advanced parameters; Refer to the description of PopperOption'
|
||||
},
|
||||
'demoId': 'popper-options'
|
||||
},
|
||||
{
|
||||
'name': 'popper-class',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '为 Tooltip 的 popper 添加类名', 'en-US': 'Add a class name for the tooltip popper.' },
|
||||
'demoId': 'popper-class'
|
||||
},
|
||||
{
|
||||
'name': 'enterable',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为 true',
|
||||
'desc': { 'zh-CN': '鼠标是否可进入到 tooltip 中', 'en-US': 'Whether the mouse can go to the tooltip' },
|
||||
'demoId': 'enterable'
|
||||
},
|
||||
{
|
||||
'name': 'hide-after',
|
||||
'type': 'number',
|
||||
'defaultValue': '该属性的默认值为 0',
|
||||
'desc': {
|
||||
'zh-CN': 'Tooltip 出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏',
|
||||
'en-US':
|
||||
'Delay for automatically hiding the tooltip, in milliseconds. If the value is 0, the tooltip is not automatically hidden.'
|
||||
'zh-CN': '为 Tooltip 的弹出层添加类名',
|
||||
'en-US': 'Add a class name to the pop-up layer of Tooltip'
|
||||
},
|
||||
'demoId': 'open-delay'
|
||||
'demoId': 'custom-popper'
|
||||
},
|
||||
{
|
||||
'name': 'append-to-body',
|
||||
'type': 'boolean',
|
||||
'defaultValue': ' true',
|
||||
'desc': { 'zh-CN': '是否将弹出层的元素添加到body上', 'en-US': 'Whether to append to body' },
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'transition',
|
||||
'type': 'string',
|
||||
'defaultValue': 'tiny-fade-in-linear',
|
||||
'desc': { 'zh-CN': '定义渐变动画的类名', 'en-US': 'Define the class name of the gradient animation' },
|
||||
'demoId': 'transition'
|
||||
},
|
||||
{
|
||||
'name': 'tabindex',
|
||||
'type': 'number',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '配置该元素，配置的属性会自动添加到该组件的触发原上',
|
||||
'en-US':
|
||||
'Configure this element. The configured attributes will be automatically added to the trigger source of this component.'
|
||||
'zh-CN': '设置组件的触发原的tabindex',
|
||||
'en-US': 'Sets the trigger original tabindex of the component'
|
||||
},
|
||||
'demoId': 'tabindex'
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'renderContent',
|
||||
'type': 'Function(arg1,arg2)',
|
||||
'type': '(h, content)=> vnode',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '自定义渲染函数,返回需要渲染的节点内容 arg1:Vue的渲染函数h arg2:传递给组件的content文本',
|
||||
'en-US': ''
|
||||
'zh-CN': '自定义渲染函数,返回需要渲染的节点内容',
|
||||
'en-US': 'A custom rendering function that returns the contents of the node to be rendered'
|
||||
},
|
||||
'demoId': 'tooltip-render-content'
|
||||
'demoId': 'content'
|
||||
}
|
||||
],
|
||||
'events': [],
|
||||
'slots': [
|
||||
{
|
||||
'name': 'default',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' },
|
||||
'demoId': 'tooltip-content'
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'content',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '内容', 'en-US': 'Content' },
|
||||
'demoId': 'tooltip-content'
|
||||
'desc': { 'zh-CN': '内容插槽', 'en-US': 'Content Slot' },
|
||||
'demoId': 'content'
|
||||
}
|
||||
],
|
||||
'PopperOption': [
|
||||
{
|
||||
'name': 'bubbling',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'是否监听元素所有上级有滚动元素的scroll事件，监听到则更新popper的位置。用于解决某些弹出层位置在页面滚动时，位置不正确的场景！',
|
||||
'en-US':
|
||||
'Whether to monitor the scroll event of all elements with a scroll element in the upper level, and update the popper location if the scroll event is detected. Used to solve some pop-up layer position when the page scroll, the position is not correct scenario!'
|
||||
},
|
||||
'demoId': 'popper-options'
|
||||
},
|
||||
{
|
||||
'name': 'followReferenceHide',
|
||||
'type': '',
|
||||
'defaultValue': 'true',
|
||||
'desc': {
|
||||
'zh-CN': '当提示目标隐藏时，自动隐藏弹出层',
|
||||
'en-US': 'Automatically hides the pop-up layer when the target is prompted to hide'
|
||||
},
|
||||
'demoId': 'popper-options'
|
||||
},
|
||||
{
|
||||
'name': 'removeOnDestroy',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN': '弹出层消失后，是否移除弹出层的DOM元素',
|
||||
'en-US': 'Whether to remove DOM elements from the pop-up layer after the pop-up layer disappears'
|
||||
},
|
||||
'demoId': 'popper-options'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ export default (options: IPopperInputParams) => {
|
|||
|
||||
// 如果触发源是隐藏的，其弹出层也设置为隐藏。组件可以通过 props.popperOptions.followReferenceHide = true/false来控制
|
||||
const followHide = (popperInstance: PopperJS) => {
|
||||
const followReferenceHide = props?.popperOptions?.followReferenceHide || true
|
||||
const { followReferenceHide = true } = props?.popperOptions
|
||||
const { _popper: popper, _reference: reference } = popperInstance
|
||||
|
||||
if (followReferenceHide && getComputedStyle(reference).position !== 'fixed' && reference.offsetParent === null) {
|
||||
|
|
@ -100,7 +100,7 @@ export default (options: IPopperInputParams) => {
|
|||
return
|
||||
}
|
||||
|
||||
const options = props.popperOptions || { gpuAcceleration: false }
|
||||
const options = props.popperOptions || {}
|
||||
state.popperElm = state.popperElm || props.popper || refs.popper
|
||||
const popper = state.popperElm
|
||||
let reference = getReference({ state, props, refs, slots })
|
||||
|
|
|
|||
|
|
@ -22,10 +22,6 @@ export const tooltipProps = {
|
|||
type: Number,
|
||||
default: () => 0
|
||||
},
|
||||
boundariesPadding: {
|
||||
type: Number,
|
||||
default: () => 5
|
||||
},
|
||||
content: { type: [String, Object] },
|
||||
disabled: { type: Boolean },
|
||||
enterable: {
|
||||
|
|
@ -60,7 +56,7 @@ export const tooltipProps = {
|
|||
popper: {},
|
||||
popperClass: { type: String },
|
||||
popperOptions: {
|
||||
default: () => ({ gpuAcceleration: false, boundariesPadding: 10 })
|
||||
default: () => ({})
|
||||
},
|
||||
pre: { type: Boolean },
|
||||
reference: {},
|
||||
|
|
|
|||
Loading…
Reference in New Issue