Vuetify 按钮在被点击后保持活动状态。您需要单击屏幕上的其他地方才能将其删除。是否有一种简单的方法可以在返回继承状态时添加计时器。
最近几个月我开始编程，现在才开始在我的 vue 项目中使用 vuetify。这个问题我可以用不必要的代码量来解决，我想看看你可以如何改进这个问题。
<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>
我希望它在单击后返回继承状态。现在它在点击时保持活动状态。
事实证明，::before当按钮组件聚焦时，伪元素被设置为更高的不透明度......一个简单的解决方案是给按钮一个自定义类并强制伪不透明度......这是一个演示：
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>