Vue Tooltip封装全局问号提示组件

前言

• 我们经常在网站看到一个小问号鼠标放上去会出现一段文字，移开文字消失。起到一个提示功能。

• 它其实是Tooltip + icon 实现的，但是有一个小问题，就是修改背景颜色和文字颜色不生效。

• 其实是因为我们在项目中使用有scoped 来确保组件之间的样式不会互相影响，不建议删除。

• 我们可以把他封装成全局组件，封装时候不加scoped 这样就不会影响到全局的样式了。

• 先给了行内默认样式，在全局使用时可以在各组件更改颜色，用div嵌套就可以实现每个图标和位置不一样。

1.在src/components/ 新建UsageTooltip文件/index.vue

<template>
  <el-tooltip :placement="data" popper-class="atooltip">
    <i class="el-icon-question" style="color: #67c23a; font-size: 25px"></i>
    <!-- 利用自带插槽 把标签内的文字显示在提示框 -->
    <template #content>
      <slot></slot>
    </template>
  </el-tooltip>
</template>
​
<script>
export default {
  props: {
    // 接受传过来的位置参数
    data: {
      // 类型
      type: String,
      // 必填
      required: true
    },
  }
}
</script>
​
<style>
/* 更改背景色 */
/* 提示框在上面的时候  小三角边框颜色*/
.atooltip.el-tooltip__popper[x-placement^='top'] .popper__arrow {
  border-top-color: rgba(70, 76, 91, 0.9);
}
/* 提示框在上面时候 小三角颜色 */
.atooltip.el-tooltip__popper[x-placement^='top'] .popper__arrow:after {
  border-top-color: rgba(70, 76, 91, 0.9);
}
/* 提示框在下面的时候  小三角边框颜色*/
.atooltip.el-tooltip__popper[x-placement^='bottom'] .popper__arrow {
  border-top-color: rgba(70, 76, 91, 0.9);
}
/* 提示框在下面时候 小三角颜色 */
.atooltip.el-tooltip__popper[x-placement^='bottom'] .popper__arrow:after {
  border-top-color: rgba(70, 76, 91, 0.9);
}
/* 提示框在左面的时候  小三角边框颜色*/
.atooltip.el-tooltip__popper[x-placement^='left'] .popper__arrow {
  border-top-color: rgba(70, 76, 91, 0.9);
}
/* 提示框在左面时候 小三角颜色 */
.atooltip.el-tooltip__popper[x-placement^='left'] .popper__arrow:after {
  border-top-color: rgba(70, 76, 91, 0.9);
}
/* 提示框在右面的时候  小三角边框颜色*/
.atooltip.el-tooltip__popper[x-placement^='right'] .popper__arrow {
  border-top-color: rgba(70, 76, 91, 0.9);
}
/* 提示框在右面时候 小三角颜色 */
.atooltip.el-tooltip__popper[x-placement^='right'] .popper__arrow:after {
  border-top-color: rgba(70, 76, 91, 0.9);
}
/* 提示框颜色 字体颜色通用的不分上下左右情况*/
.atooltip {
  background-color: rgba(70, 76, 91, 0.9) !important;
  color: #fff !important;
}
</style>

​

2.统一注册全局组件在src/components/index.js

// 引入组件
import UsageTooltip from './UsageTooltip'
export default {
  install (Vue) {
    // 注册组件
    Vue.component('UsageTooltip', UsageTooltip)
  }
}

​

3.在main.js引入全局组件

// 导入全局组件
import coms from '@/components'
​
// 挂载全局组件
Vue.use(coms)

4.在页面使用

<template>
  <div class="xue">
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    // 把提示信息传回全局组件
    <UsageTooltip :data="name">
    // 利用插槽把提示信息显示到提示框
      <H1>手机客户端凯撒很多客户ask简单快捷</H1>
      <br />
      <p><span style="background-color: yellow">dosif</span>四大皆空把控</p>
      <p>sjbxdkjasbxdkjasbxdkasjbsk</p>
    </UsageTooltip>
   <div class="six">
    <UsageTooltip :data="names">
      <H1>手机客户端凯撒很多客户ask简单快捷</H1>
      <br />
      <p><span style="background-color: yellow">dosif</span>四大皆空把控</p>
      <p>sjbxdkjasbxdkjasbxdkasjbsk</p>
    </UsageTooltip>
   </div>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
    // 提示信息位置
      name: 'top',
      names: 'bottom'
    }
  }
}
</script>
<style lang="scss" scoped>
// 给icon图标(小问号)改颜色和大小 
::v-deep .el-tooltip {
  color: rgb(88, 87, 81) !important;
  font-size: 25px !important;
}
// 利用div 给每个提示图标icon 更改符合实际情况的颜色
.six {
::v-deep .el-tooltip {
  color: red !important;
  font-size: 25px !important;
}
}
</style>

​

注意：全局提示信息的背景颜色和字体颜色是公用的，小三角和小三角边框是区分方向的。在页面使用的时候可以使用div包裹，通过类名给每一个提示图标更改符合实际情况的颜色，位置是父组件传回子组件，内容是利用插槽，饿了吗官网有说

---

 

总结：

经过这一趟流程下来相信你也对 Vue Tooltip封装全局问号提示组件 有了初步的深刻印象，但在实际开发中我们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕