Vuetify：为 v-btn 添加自定义悬停样式

Answer 1

您可以在

v-slot

上添加

v-hover

并在按钮的

style-binding

中使用它，如下所示：

new Vue({ el:"#app", vuetify: new Vuetify() });

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<v-app id="app">
   <v-hover v-slot="{ hover }">
     <v-btn 
       class="v-btn white--text mx-1 px-6"
       elevation="2" 
       x-small 
       rounded
       :style="{ 'background-color': hover ? 'red' : '#BB86FC' }"
     >text</v-btn>
   </v-hover>
</v-app>

Answer 2

此外，对于 v-btn，您只有指令颜色，因此您可以使用 Majed Badawi 编写的代码，但将样式更改为 :color="hover ? 'red' : 'blue'"

Answer 3

让我们更深入一点..

来自 Vuetify 3：

v-hover 组件提供了一个简单的界面，用于处理任何组件的悬停状态。它是一个无渲染组件，使用 default slot 提供对其内部模型的范围访问；以及用于修改它的鼠标事件侦听器。

来自 Vue.js 3：

正如渲染范围中所讨论的，插槽内容无权访问子组件中的状态。但是，在某些情况下，如果槽的内容可以使用来自父作用域和子作用域的数据，则可能会很有用。为了实现这一点，我们需要一种方法让子进程在渲染时将数据传递到槽。事实上，我们完全可以做到这一点 - 我们可以将属性传递到插槽出口，就像将 props 传递到组件一样。

使用 Vuetify 3 和 Vue.js 3 的一个实现示例如下：

<v-hover v-slot="{ isHovering, props }">
   <v-btn v-bing="props" :color="isHovering ? red : blue" text="cancel" />
</v-hover>

我们正在

v-hover

组件中重组变量，以便我们可以在父组件的槽中使用它们。 Vuetify 3 的工作方式是将 props 绑定到它需要监听的组件上，这样它就知道何时生成悬停效果。

v-slot

通过槽机制提供子组件和父组件之间的双向绑定。