在Vue中创建一个自定义的工具提示组件

工具提示是一个提供关于一个元素的提示、描述性信息或信息的功能。当用户在该元素上悬停、聚焦或点击时，工具提示就会以小标签的形式出现在该元素附近。工具提示对于为用户提供澄清、定义或下一步行动特别有帮助，而不会使你的用户界面杂乱无章。

在这篇文章中，我们将回顾目前在Vue应用程序中创建工具提示的可用选项。然后，我们将使用所提供的信息从头开始创建我们自己的Vue工具提示组件。对于我们的例子，我们将使用Vuetify和BootstrapVue库。

开始吧

首先，确保你的机器上安装了Vue CLI 4.X。要创建一个新的Vue项目，在你的终端运行以下命令。

vue create tooltips

让我们删除新项目中的默认组件，并确保没有任何东西在浏览器中呈现。我们的App.vue 文件应该看起来像下面的代码块。

<template>

</template>

<script>

export default {
  name: 'App',

  components: {
  },

  data: () => ({
    //
  }),
};
</script>

在Vuetify中创建一个工具提示

要安装Vuetify，请在终端运行以下命令。

vue add vuetify

现在，Vue CLI将为我们安装Vuetify。要创建一个工具提示，请将以下代码添加到app.vue ，并再次为该项目服务。

<template>
<div>


<v-app>
  <div class="text-center d-flex align-center justify-space-around">
    <v-tooltip bottom>
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          color="primary"
          dark
          v-bind="attrs"
          v-on="on"
        >
          Hover on me
        </v-btn>
      </template>
      <span>Bottom tooltip</span>
    </v-tooltip>




  </div>
</v-app>

</div>
</template>

<script>

export default {
  name: 'App',

  components: {
  },

  data: () => ({
    //
  }),
};
</script>
<style>
.container{
margin-top:50px
}
</style>

Vuetify的每个组件都必须在<v-app> 组件内呈现，而<v-tooltip> 可以包裹任何组件。

在上面的代码中，我们有两个主要的元素，<template> ，它被渲染成一个简单的文本，和<span> 。当我们在按钮上悬停时，v-slot 属性会激活工具提示，<span> 的内容会显示在屏幕上。

你也可以用下面的代码动态地触发工具提示的行为。

<template>
<div>
<v-app>
  <div class="text-center d-flex align-center justify-space-around">
<v-btn @click="show = !show">
          toggle
        </v-btn>
</div>
  <div class="text-center d-flex align-center justify-space-around">
    <v-tooltip v-model="show"
 bottom>
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          color="primary"
          dark
          v-bind="attrs"
          v-on="on"
        >
          Hover on me
        </v-btn>
      </template>
      <span >Bottom tooltip</span>
    </v-tooltip>
  </div>
</v-app>

</div>
</template>

<script>

export default {
  name: 'App',
  components: {
  },
   data () {
      return {
        show: false,
      }
    },
};
</script>
<style>
.container{
  margin-top:50px
}
</style>

在上面的代码块中，我们创建了一个新的按钮，并在该组件内部添加了一个状态。

最初，tooltip被设置为false。v-modal ，让我们选择是否显示tooltip。状态随着按钮的点击而改变，如下图所示。

在BootstrapVue中创建一个工具提示

要安装BootstrapVue，在终端运行以下命令。

npm install vue bootstrap bootstrap-vue

现在，我们必须在我们应用程序的主入口点中注册BootstrapVue。导航到main.js ，添加下面的代码。

import Vue from "vue";
import App from "./App.vue";
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

import vuetify from "./plugins/vuetify";

Vue.config.productionTip = false;
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
new Vue({
  vuetify,
  render: (h) => h(App),
}).$mount("#app");

我们有两种不同的方法在BootstrapVue中创建工具提示，即组件方法和指令方法。虽然组件方法很适合简单、标准的使用，但指令方法提供了更多的潜力来定制工具提示的行为。

请记住，我们可以通过悬停、聚焦或点击一个元素来触发一个工具提示。

我们也有12种选择来定位我们的工具提示，top 是默认的：top,topleft,topright,right,righttop,rightbottom,bottom,bottomleft,bottomright,left,lefttop, 和leftbottom 。

组件方法

在BootstrapVue中，工具提示以组件的形式出现，通过组件的ID附加到目标元素上。要使用组件的方法创建一个工具提示，我们可以简单地创建一个按钮，并将ID放在目标属性中。

添加以下代码到App.vue 。

<template>
  <div class='main'>
  <b-button id="tooltip-target-1">
    Hover Me
  </b-button>
  <b-tooltip target="tooltip-target-1" triggers="hover"   placement="bottom"
>
    I am tooltip <b>component</b> content!
  </b-tooltip>
  </div>
</template>

<script>
export default {
  name: "App",

  components: {},
};
</script>
<style>
.main{
display:flex;
justify-content:space-around;
}
</style>

在上面的代码中，我们创建了一个名为b-button 的按钮，并给它一个特定的ID，tooltip-target-1 。要在hover 上触发工具提示，我们可以简单地使用b-tooltip 组件，并将我们的按钮的ID放在目标属性中。

触发属性负责工具提示的行为。默认情况下，我们有hover 、focus 、click 、hover+focus 的触发器。我们可以使用placement 来定义工具提示的位置。

指令方法

指令方法允许我们使用自定义指令来指定我们的工具提示组件的行为。要使用指令方法创建一个工具提示，只需在组件中使用v-b-tooltip 。

例如，我们可以将下面的代码块添加到App.vue 。

<template>
  <div>
         <b-button v-b-tooltip.hover.right="'Tooltip!'" variant="primary">Right</b-button>

  </div>
</template>

<script>
export default {
  name: "App",

  components: {},


};
</script>
<style></style>

为项目服务并导航到浏览器。你的tooltip应该看起来像下面的图片。

我们可以使用指令来改变工具提示在鼠标操作上的行为。让我们在App.vue 中添加更多的按钮。

<template>
  <div class='main'>
    <b-button v-b-tooltip.hover.right="'Tooltip!'" variant="primary"
      >hover</b-button
    >
    <b-button v-b-tooltip.focus.right="'Tooltip!'" variant="primary"
      >focus</b-button
    >
    <b-button v-b-tooltip.click.left="'Tooltip!'" variant="primary"
      >click</b-button
    >
  </div>
</template>

<script>
export default {
  name: "App",

  components: {},
};
</script>
<style>
.main{
display:flex;
justify-content:space-around;
}
</style>

从头开始创建一个工具提示

通过我们到目前为止所回顾的方法，我们必须安装外部包来创建一个工具提示，从而导致依赖性的增加。我们的依赖关系的变化可能会导致我们的应用程序崩溃。然而，如果你使用的是单一的工具提示，你可以在短短几分钟内从头开始创建一个，而不是安装一个库。

在你的component 文件夹中，创建一个名为Tooltip.vue 的新文件并添加以下代码。

<template>
  <div class="tooltip-container">
    <slot />
    <div
      class="tooltip"
    >
      <span
        class="text"
      >{{ text }}</span>
    </div>
  </div>
</template>

在上面的代码块中，我们已经创建了主要的工具提示容器，它将容纳整个组件。slot 标签注入了将启用工具提示的子组件。最后，一个简单的<span> ，用于存放我们的工具提示的文本。

<script>
export default {
  props: { 
    text: {
      type: String,
      required: true
    }
  },
}
</script>

最后，我们将以字符串的形式为我们的文本添加一个道具。

<style scoped>
.tooltip-container { 
  position: relative;
  display: inline-block;
  margin:100px;
}

.tooltip-container:hover .tooltip{
  opacity: 1;

}

.tooltip { 
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 2px;

  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;

  opacity: 0;
  transition: opacity 1s;

  position: absolute;
  z-index: 1;

  background: #000000;
}

.text::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #000000 transparent transparent transparent;

}
</style>

主容器的位置是相对的。对于工具提示，我们将z-index 设置为1 ，将工具提示显示在元素的上方。

接下来，我们渲染了一个小的、简单的箭头提示。默认情况下，不透明度被设置为0 。当用户将鼠标悬停在我们的工具提示组件内的一个组件上时，不透明度被设置为1 ，将我们的工具提示显示在该元素上方。

要使用我们的自定义工具提示，在App.vue 中导入并注册工具提示。

<template>
  <div >

<Tooltip
  text="I am  button"
 &gt;
   <button> hover over me </button>
 </Tooltip>

  </div>
</template>

<script>
  import Tooltip from './components/Tooltip';

export default {

  name: "App",

  components: {
    Tooltip
  },
};
</script>

让我们为我们的项目服务，在浏览器中看到结果。

结论

工具提示是对你的应用程序的一个有用的和直观的补充，它通过引导用户和提前回答问题来改善你的用户体验。现在，你知道了在Vue中创建工具提示的几种不同方法，从使用BootstrapVue和Vuetify等库到从头开始。

使用一个库来创建一个工具提示是相当容易的，然而，如果你担心你的依赖树的大小，创建你自己的工具提示也是同样直接的。

虽然我们的例子以一个简单的工具提示组件为特色，但你可以用不同的颜色、图标、动作等来定制你的工具提示。我希望你喜欢这个教程!

The postCreate a custom tooltip component in Vueappeared first onLogRocket Blog.