Answer a question

Vuetify buttons keep active state after being clicked. You need to click elsewhere on the screen to remove it. Is there a simple way of adding a timer on returning to inherit state.

I've recently gotten into programming these few last months and just now started using vuetify in my vue project. This issue is something I can solve with unnecessary amounts of code and I'de like to see how you could improve on this.

<v-app-bar app color="#44D0CD" dark>
   <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
   <v-toolbar-title>Application</v-toolbar-title>
   <v-btn @click="functionOne" light style="">
        <v-icon left>mdi-plus</v-icon>
        Do something
   </v-btn>
   <v-btn @click="functionTwo" light content="Save">
        Do something else
   </v-btn>
</v-app-bar>

I want it to return to the inherit state after a click. Now it stays active on click.

Answers

Turns out that the ::before pseudo element was being set to a higher opacity when the button component was focused ... a simple solution to this is to give the button a custom class and force the pseudo opacity ... here is a demo :

Vue.config.devtools = false
Vue.config.productionTip = false
new Vue({
    el: '#app',
    vuetify: new Vuetify(),
})

.myClass:focus::before {
  opacity: 0 !important;
}

<html>
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<body>
  <div id="app">
     <v-app>
     <v-content>
        <span>with the focus effect:</span> 
        <v-btn>Button</v-btn>
     </v-content>
     <v-content>
        <span>without the focus effect:</span> 
        <v-btn class="myClass">Button</v-btn>
     </v-content>
     </v-app>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
</body>
</html>
# vue.js
Logo
Vue

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐

具身智能测试题解析

问题1:具身智能（Embodied Intelligence）的核心观点强调智能的产生依赖于（ ） 正确答案：B. 智能体与环境的交互以及自身的物理形态 解析：具身智能的核心是 “智能离不开身体与环境的互动”，智能体的物理形态（如机械臂、人形机器人）和与外界的实时交互，是其产生认知、决策能力的基础，区别于纯软件的抽象智能模型。 问题2:以下哪一项是具身智能的典型应用场景？（ ） 正确答案：B.

avatar Vue

播客 | Fathym 关于 Vue 的观点

在科罗拉多州,我们有许多美景。从山顶到山谷和中间的山丘。 谈到 Vue.js,Fathym 是 JavaScript 框架的粉丝。 我们的工程总监 Jeremy Tomlinson 和品牌传播代表 Rich Kurtzman 很高兴成为 8 月中旬 Vue 播客观点的一部分。 在采访中,主持人史蒂夫爱德华兹向我们的团队询问了很多事情,包括: Fathym 是谁以及我们做什么 使用 Azure 和/

avatar Vue

带有浮动 Vue 和 Tailwind 的 Vue 下拉菜单

可用于在 Vue 应用程序中创建工具提示、弹出框和菜单的最流行的库之一是floating-vue。虽然floating-vue提供了一个Dropdown组件,但它的样式和添加其他功能(例如键盘导航)由用户决定。 我们将创建什么 我们将使用floating-vue的Dropdown组件作为基础,然后在顶部添加键盘功能。然后,我们将使用该组件使用 Tailwind 创建一个下拉菜单。 最终结果将类似于

avatar Vue