Vuetify中修改v-tooltip背景色应使用哪个prop属性
Vuetify v-tooltip 背景色自定义方案
修改v-tooltip的背景色不需要写额外自定义CSS,直接使用组件内置的color prop即可。
你需要设置的#E5E5E5色值可以直接传给该prop,参考示例:
<template> <v-tooltip color="#E5E5E5" text="自定义背景的提示文本"> <template v-slot:activator="{ props }"> <v-btn v-bind="props">悬停触发提示</v-btn> </template> </v-tooltip> </template>
注意:#E5E5E5是浅灰色,v-tooltip默认文字为白色,在浅背景上可读性较差,可以搭配
text-colorprop设置深色文字,比如text-color="#212121"即可显示深灰色文字。
color prop支持三类传值:
- 自定义色值:包括十六进制、RGB/RGBA、HSL/HSLA格式的合法CSS色值
- Vuetify主题内置色名:比如
primary、secondary、grey-lighten-4等预设色 - 自定义主题扩展色名:如果你在项目主题里扩展了自定义色,也可以直接传入对应色名
内容的提问来源于stack exchange,提问作者Maninder Kaur
相关产品推荐
相关产品推荐

