Files
workspace/code/g3soft-libs/docs/examples/tooltip/disabled.vue
T
2026-10-09 22:05:02 +08:00

27 lines
877 B
Vue

<script setup lang="ts">
// 受控与禁用:disabled 时不响应 hover;也可以用 open 手动控制
import { ref } from 'vue'
import { G3Button, G3Space, G3Switch, G3Tooltip } from '@g3soft/ui'
const enabled = ref(true)
const open = ref(false)
</script>
<template>
<G3Space vertical :size="16" style="display: flex">
<G3Space :size="8" align="center">
<G3Switch v-model="enabled">启用提示</G3Switch>
<G3Tooltip :disabled="!enabled" content="现在可以看到了">
<G3Button type="outline">悬停查看</G3Button>
</G3Tooltip>
</G3Space>
<G3Space :size="8" align="center">
<G3Switch v-model="open">受控显示</G3Switch>
<G3Tooltip :open="open" content="由 open 控制,不受 hover 影响">
<G3Button type="outline">受控提示</G3Button>
</G3Tooltip>
</G3Space>
</G3Space>
</template>