前言
- 我们经常在网站看到一个小问号鼠标放上去会出现一段文字,移开文字消失。起到一个提示功能。
- 它其实是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包裹,通过类名给每一个提示图标更改符合实际情况的颜色,位置是父组件传回子组件,内容是利用插槽,饿了吗官网有说