Javascript 如何在Vue.js中制作背景模糊的工具提示?
Javascript 如何在Vue.js中制作背景模糊的工具提示?,javascript,vuejs2,vuetify.js,v-tooltip,Javascript,Vuejs2,Vuetify.js,V Tooltip,怎么做这样的东西?我尝试过使用v-tooltip和Vuetify,但没有成功。如果没有其他解决方案,那么将“body grey”的背景色设置为灰色是最好的选择吗?我认为您需要类似于z索引覆盖的颜色 您可以使用它高亮显示按钮,然后同时触发工具提示 <template> <v-row justify="center"> <v-btn class="white--text" color=&quo
怎么做这样的东西?我尝试过使用v-tooltip和Vuetify,但没有成功。如果没有其他解决方案,那么将“body grey”的背景色设置为灰色是最好的选择吗?我认为您需要类似于z索引覆盖的颜色 您可以使用它高亮显示按钮,然后同时触发工具提示
<template>
<v-row justify="center">
<v-btn
class="white--text"
color="teal"
@click="overlay = !overlay"
>
Show Overlay
</v-btn>
<v-overlay
:z-index="zIndex"
:value="overlay"
>
<v-btn
class="white--text"
color="teal"
@click="overlay = false"
>
Hide Overlay
</v-btn>
</v-overlay>
</v-row>
</template>
显示覆盖图
隐藏覆盖
导出默认值{
数据:()=>({
覆盖:假,
zIndex:0,
}),
}
<script>
export default {
data: () => ({
overlay: false,
zIndex: 0,
}),
}
</script>