gpt4 book ai didi

vue.js - 单击后,vuetify 是否默认在按钮上保持事件状态?你如何删除这个?

转载 作者:行者123 更新时间:2023-12-03 06:40:06 27 4
gpt4 key购买 nike

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>

关于vue.js - 单击后,vuetify 是否默认在按钮上保持事件状态?你如何删除这个?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57830767/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com