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封装全局问号提示组件有了初步的深刻印象，但在实际开发中我们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

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

Vue Tooltip封装全局问号提示组件相关推荐

VUE做一个公共的提示组件，显示两秒自动隐藏，显示的值父组件传递给子组件
需求:VUE做一个公共的提示组件,显示两秒自动隐藏,显示的值由父组件动态传给子组件. 效果图: 实现步骤: 1.创建一个子组件 Toptips.vue (它就是公共提示组件), optips.vue代 ...
Tooltip是一个消息提示组件
Tooltip是一个消息提示组件,当用户点击或者长按时显示提示,在屏幕阅读器能够使它语音化,这有助于视力障碍人士阅读,用法如下: Tooltip(message: '这是提示',child: Icon ...
初探 amaze-vue（基于vue.js封装的Amaze UI 组件库）
Amaze UI 是以移动优先(Mobile first)为理念,面向 HTML5 开发的国产优秀组件库.因官方未提供vue.js版本,而且民间一直对vue.js版本的 Amaze UI 组件库呼声很 ...
微信js扫一扫，扫条形码去掉code_128。在vue中封装全局对象的方法，封装微信js-sdk权限验证的方法
微信公众号在调用扫一扫功能时,一维码(条形码)在直接返回结果时会在结果前带上EAN_8, EAN_13, CODE_25, CODE_39, CODE_128, UPC_A, UPC_E wx.sca ...
笔记三 vue中封装复用过滤器自定义组件 vue中component选项
题外话: npm install -g express-generator npm安装express框架封装复用 Vue中关于封装复用的内容,属于Vue中的进阶知识,在实战中对开发者的抽象和泛化能力 ...
Vue 自定义一个全局弹框组件
前文:其实element ui有提供this.$mesage和this.$notify弹框组件可供使用,但是我们的ui设计的样式以及布局还是不完全一样的,为了达到100%的呈现效果,所以自己写了一个全 ...
vue+element ui 小问号提示
效果: 代码: <el-form-item label="域类型"><el-select v-model="temp.fieldType" c ...
element-ui——element-ui 问号提示组件的使用
<el-tooltip placement="right"><div slot="content">我是内容</div>&l ...
基于vue element 封装上传组件
基于vue element封装的上传组件使用方法: 1.首先引入该组件 2.注册组件 3.页面使用 4.回调函数(如需其他回调自行封装因为我暂时没用到其他的哈哈哈) <template& ...

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

前言

Vue Tooltip封装全局问号提示组件相关推荐

最新文章

热门文章