Vuetify - 单击时显示工具提示

Question

我有一个按钮，当我的用户单击 Copy

时会触发工具提示

<v-btn @click="showCopiedText = !showCopiedText; copyHtmlText()">Copy</v-btn>

<v-tooltip v-model="showCopiedText" right>
    <span>Copied!</span>
</v-tooltip>

它有效，但我的工具提示一直显示 windows 左侧的提示，而不是按钮旁边的提示。

Answer 1

来自 VueJS docs 仍然需要定位工具提示。在此示例中，工具提示位于 vueJS 网格内并且位置正确。希望对您有所帮助。

Answer 2

v-btn 应该在 v-tooltip 的 activator 槽内，这样组件就可以将自己定位在内容周围：

将 v-btn 移动到 v-tooltip 的 activator 位置。
在v-btn的click-handler中，用slot的on属性模拟一个mouseenter 显示工具提示；并在超时后 mouseleave 隐藏它。确保在 beforeDestroy 中清除超时，以防组件在超时前卸载。

<v-tooltip bottom>
  <template v-slot:activator="{ on, attrs }">
    1️⃣
    <v-btn v-bind="attrs" @click="toClick(on, $event)">Copy</v-btn>
  </template>
  <span>Copied</span>
</v-tooltip>

export default {
  beforeDestroy() {
    clearTimeout(this._timerId)
  },
  methods: {
    2️⃣
    toClick({ mouseenter, mouseleave }, e) {
      clearTimeout(this._timerId)
      mouseenter(e)
      this._timerId = setTimeout(() => mouseleave(e), 1000)
    }
  }
}

demo 1

或者，您可以在 v-tooltip 到 show/hide 工具提示上使用 v-model 而不是 mouseenter/mouseleave 模拟：

声明一个 show 布尔属性，并将该属性用作 v-tooltip 的 v-model.
在 v-btn 的 click-handler 中，将 prop 设置为 true，并使用超时将其重置为 false。确保在 beforeDestroy 中清除超时，以防组件在超时前卸载。

<v-tooltip bottom v-model="show"> 1️⃣
  <template v-slot:activator="{ attrs }">
    <v-btn v-bind="attrs" @click="showTooltip">Copy</v-btn>
  </template>
  <span>Copied</span>
</v-tooltip>

export default {
  data() {
    return {
      show: false, 1️⃣
    }
  },
  beforeDestroy() {
    clearTimeout(this._timerId)
  },
  methods: {
    showTooltip() {
      2️⃣
      this.show = true;
      this._timerId = setTimeout(() => this.show = false, 1000)
    }
  }
}

demo 2

Answer 3

这是工作演示。试试这个：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data(){
    return {
      isShowTooltip: false
    }
  },
  methods:{
    hideToolTip(){
      setTimeout(()=>this.isShowTooltip = false, 2000);
    }
  }
})

<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container>
        <v-row>
          <v-col cols="4" sm="6" class="pl-0">
          <v-tooltip
            v-model="isShowTooltip"
            open-on-click
            :open-on-hover="false"
            close-delay='3000'
            right
          >
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                large outlined color="indigo"
                v-bind="attrs"
                v-on="on"
                @click="hideToolTip"
              >
              Copy
              </v-btn>
            </template>
            <span>Copied</span>
          </v-tooltip>
          </v-col>
        </v-row>
      </v-container>
    </v-form>
  </v-app>
</div>

Vuetify - 单击时显示工具提示

Vuetify - Show tooltip on click

vue.js

vue-component

vuejs2

vuetify.js