Vuetify - v-tooltip-不显示键盘点击按钮

我有一个使用Vuetify的v-tooltip的共享组件，当鼠标悬停时，它工作得很好。但是，当我使用点击按钮访问具有工具提示的按钮时，它不工作。有人可以帮助我解决这个问题吗？
下面是我的工具提示组件的代码：

<template>
  <v-tooltip
    v-bind="$attrs"
    :open-on-focus="true"
    :content-class="`${tooltipClass} custom-tooltip ${color} darken-2`"
    open-delay="250"
    max-width="288px"
  >
    <template v-slot:activator="{ on, attrs }">
      <div v-bind="attrs" v-on="on">
        <slot />
      </div>
    </template>
    <span class="tooltip-text">{{ getTooltipText() }}</span>
  </v-tooltip>
</template>

字符串
我是这么用的

<tooltip
  tooltip-text="edit metadata"
  bottom
  position="bottom"
>
  <EditExternalButton
    :external-link="item.editLink"
    :data-test="`result-list-item-edit-external-${i + 1}`"
    event-name-string="metadata_edit clicked"
  />
</tooltip>

型
我试着添加:open-on-focus="true"
但没有成功

一个普通的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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<div id="app"></div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<div id="app"></div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<div id="app"></div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

Vuetify - v-tooltip-不显示键盘点击按钮

1条答案

相关问题

热门标签

最新问答