普通的div通常不能被聚焦，所以你永远不会通过键盘到达它，处理程序也不会被触发.
有几种方法可以绕过它:
- 将
tabindex="0"添加到div以使其成为可选项卡:
<template v-slot:activator="{ on, attrs }">
<div v-bind="attrs" v-on="on" tabindex="0">
<slot />
</div>
</template>
const tooltip = {
template: `
<v-tooltip
v-bind="$attrs"
:open-on-focus="true"
open-delay="250"
max-width="288px"
>
<template v-slot:activator="{ on, attrs }">
<div v-bind="attrs" v-on="on" tabindex="0">
<slot />
</div>
</template>
<span class="tooltip-text">getTooltipText()</span>
</v-tooltip>
`
}
new Vue({
el: '#app',
vuetify: new Vuetify(),
components: {tooltip},
template: `
<v-app>
<v-main>
<v-container>
<tooltip>
<div style="background: pink;">activator content</div>
</tooltip>
</v-container>
</v-main>
</v-app>
`,
setup(){
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
- 使用一个本身可选项卡的元素(如button)而不是div作为激活器:
<template v-slot:activator="{ on, attrs }">
<button v-bind="attrs" v-on="on">
<slot />
</button>
</template>
const tooltip = {
template: `
<v-tooltip
v-bind="$attrs"
:open-on-focus="true"
open-delay="250"
max-width="288px"
>
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on">
<slot />
</v-btn>
</template>
<span class="tooltip-text">getTooltipText()</span>
</v-tooltip>
`
}
new Vue({
el: '#app',
vuetify: new Vuetify(),
components: {tooltip},
template: `
<v-app>
<v-main>
<v-container>
<tooltip>
<div style="background: pink;">activator content</div>
</tooltip>
</v-container>
</v-main>
</v-app>
`,
setup(){
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
- 将与焦点相关的处理程序传递给槽内容，并在那里使用它:
<template v-slot:activator="{ attrs, on: {mouseenter, mouseleave, focus, blur, keydown} }">
<div v-bind="attrs" v-on="{mouseenter, mouseleave}">
<slot :on="{focus, blur, keydown}"/>
</div>
</template>
const tooltip = {
template: `
<v-tooltip
v-bind="$attrs"
:open-on-focus="true"
open-delay="250"
max-width="288px"
>
<template v-slot:activator="{ attrs, on: {mouseenter, mouseleave, focus, blur, keydown} }">
<div v-bind="attrs" v-on="{mouseenter, mouseleave}">
<slot :on="{focus, blur, keydown}"/>
</div>
</template>
<span class="tooltip-text">getTooltipText()</span>
</v-tooltip>
`
}
new Vue({
el: '#app',
vuetify: new Vuetify(),
components: {tooltip},
template: `
<v-app>
<v-main>
<v-container>
<tooltip v-slot="{on}">
<v-checkbox v-on="on"/>
</tooltip>
</v-container>
</v-main>
</v-app>
`,
setup(){
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>