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

blmhpbnm  于 2023-11-21  发布在  Vue.js
关注(0)|答案(1)|浏览(148)

我有一个使用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"
但没有成功

eagi6jfj

eagi6jfj1#

一个普通的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>

相关问题