问题标签 [v-btn]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
115 浏览

vue.js - 如何更改 v-btn 的状态(视觉上)以便在模板中选择/取消选择它?

默认情况下,Vuetify 的 v-btn 具有“选定状态”,据我所知,这只是一个变暗的背景。我在 v-app-bar 中使用了一些 v-btns。这些按钮之一是主页按钮。当启动 vue 应用程序(即主路由)时,我想将 Home 按钮设置为选中,以便用户知道这是主页。有没有一种简单的方法可以从我有我的 v-app-bar 的模板中做到这一点?

因此,鉴于上面的标记,当页面以默认路线打开时,如何将主页按钮设置为“活动”或“选定”?

在 v-btn 文档中,有一个名为“input-value”的道具,它表示它控制按钮的活动状态。问题是它的类型是“Any”,所以我不确定如何使用它(并且文档没有显示任何关于它的信息)。我尝试设置为真/假,没有任何变化。

另外,如果我只想摆脱所有按钮的活动状态,我该怎么做?

为什么没有像focused="true|false"这样的简单解决方案?

0 投票
2 回答
3866 浏览

vue.js - 如何在 Vuetify 中覆盖 v-btn 活动类?

我正在使用带有 Vuetify 2.1.0 和 vue-router 3.1.3 的 Vue.js 2.6.10n 开发一个网站。

我有一个带有 v-btns 的 v-app-bar 来链接到我的不同伪页面,并且希望在按钮处于活动状态时拥有一个自定义类,即它链接到当前显示的页面。使用active-classv-btn,我可以在 Vuetify 默认值的“顶部”添加样式,但不能完全覆盖它。

我怎样才能完全摆脱默认的活动类?

我的目标只是在 btn 文本处于活动状态时为其添加下划线,并摆脱默认的“按下按钮”样式。

这是我的代码示例:

0 投票
2 回答
8688 浏览

css - 无法在 Vuetify v-btn-toggle 中为选定按钮设置活动类

我正在使用 Vuetifyv-button-toggle在如下三个按钮之间切换。每个按钮都有不同的活动类。但是单击按钮不会设置活动的相应活动类。我错过了什么?

CSS 类

更新:正如预期的那样,单击时将类添加到按钮中

更新:下面的默认 Vuetify 类覆盖了自定义样式

如何覆盖这个默认样式类?

0 投票
1 回答
967 浏览

vue.js - 如何在 vuetify 中使用 v-btn 过滤产品列表?

我目前正在尝试使用按钮过滤对象列表。

我知道 v-btn 和 v-card 循环当前都不是相互依赖的,但是我无法弄清楚如何链接这两个部分以在按下其各自的按钮时仅正确显示正确的类别。

谢谢您的帮助!

0 投票
2 回答
1629 浏览

javascript - 如何在左下和右下vue js vutify中设置v-btn?

我正在尝试这样做,但无法在两个底角设置两个按钮。以下代码并排保持两个按钮。但我需要一个按钮在左边,另一个在右边。

在此处输入图像描述]

0 投票
1 回答
723 浏览

vue.js - 扩展 vuetify v-btn 组件,添加自定义点击事件

我正在尝试创建扩展 v-btn 的组件,每次单击按钮时,它都会发出短促的哔声,并禁用按钮 5 秒。

按钮在禁用时更改颜色是理想的选择。

这是一个问题,因为颜色是一个属性,我不能覆盖它的值......

此外,当我尝试调用 super.click(e) 时,我得到一个错误。

您可以在此处查看示例:https ://codesandbox.io/s/elegant-glade-pnhqx

0 投票
0 回答
287 浏览

vuetify.js - Vuetify v-model 和 v-btn 点击事件

当我单击测试 btn 时,它不起作用。也没有显示文本值。我该如何解决?

我使用 create-nuxt-app 构建 nuxt 项目。我的节点版本是 v10.15.0

0 投票
1 回答
19 浏览

vuetify.js - 如何确保子元素不会在 vuetify 中使用 v-btn 对父元素的事件做出反应?

我动态创建了 4 个按钮并向按钮添加了自定义属性。每当我按下按钮时,我都会检查事件并尝试使用添加的属性值。如果我查看浏览器开发者工具,在按钮标签下有一个 SPAN 标签,所以当我点击 SPAN 标签部分时,会读取 SPAN 标签的属性。在 SPAN 标签之外单击是可以的。我怎样才能只获得 btn 点击事件?

下面是开发者工具中转换后的 html 标签。

0 投票
2 回答
1039 浏览

vue.js - v-btn(浮动操作按钮)定位绝对顶部不会从 v-card 溢出(Vue2,Vuetify)

当它溢出组件时,如何使它不隐藏?谢谢您的帮助。

浮动按钮

0 投票
1 回答
389 浏览

vuetify.js - vuetify v-btn with text-truncate

任何人都知道如何使用带有 v 按钮的文本截断。我目前的尝试是这样的:

在此处输入图像描述