默认为所有 v-text-field 列出的 Vuetify 集

Posted 2023-02-25

【中文标题】默认为所有 v-text-field 列出的 Vuetify 集

【英文标题】：Vuetify set outlined for all v-text-field by default

【发布时间】：2020-05-10 15:46:58

【问题描述】：

是否有简单的方法来更改输入项目中所有“v-text-field”的道具“概述”的默认值？

https://vuetifyjs.com/en/components/text-fields

【参考方案1】：

您可以从VTextField（参见treeshaking）创建一个包装器组件和extends，并自定义默认值。

import Vue from 'vue';
import  VTextField  from 'vuetify/lib';

Vue.component('TextFieldOutlined', 
  extends: VTextField,
  props: 
    outlined: 
      type: Boolean,
      default: true
    
  
)

像这样使用它：

<text-field-outlined
  label="Some label"
  clearable
  dense>
</text-field-outlined>

FWIW，扩展一个组件意味着所有基础组件的道具都被传递，因此同样可用。

【讨论】：

完美。正在寻找有关 VBtn 组件的类似内容。这是一个伟大而简单的解决方案。

绝对应该标记为解决方案。这很干净，仍然允许在需要时覆盖特定位置的道具，并且可以应用于除“轮廓”之外的任何道具。

【参考方案2】：

无需自定义组件

默认情况下，v-text-field 使用应用程序的原色。

更改单个 v-text-field 的轮廓颜色

如果你想改变单个v-text-field的轮廓颜色当它被聚焦时，你可以简单地使用color prop。

<v-text-field
  outlined
  color="red"
/>

更改应用的原色

这将改变所有v-text-field的颜色当他们被聚焦时：

import Vue from 'vue'
import Vuetify from 'vuetify/lib/framework'

Vue.use(Vuetify)

export default new Vuetify(
  theme: 
    options: 
      customProperties: true
    ,
    themes: 
      light: 
        primary: '#5E72E4'
      
    
  
)

更改所有 v-text-field 的颜色（是否聚焦）

现在，如果你想在元素没有聚焦的情况下改变轮廓的颜色，你可以使用SASS variable API。

如果您通过 Vue CLI 安装了 Vuetify，请创建一个 src/scss/variables.scss 文件：

$material-light: ( 'text-fields': (
  'filled': rgba(0, 0, 0, 0.06),
  'filled-hover': rgba(0, 0, 0, 0.12),
  'outlined': rgba(0, 0, 0, 0.2),
  'outlined-disabled': rgba(0, 0, 0, 0.1),
  'outlined-hover': rgba(0, 0, 0, 0.4)
));

$text-field-outlined-fieldset-border: 1px solid currentColor;

这样您就可以完全控制集中状态和初始状态。上面的例子使轮廓更轻，焦点轮廓宽度减小到 1px；

【讨论】：

我不确定这如何解决了 OP 默认为所有 v-text-field 设置概述属性的问题。这不是简单地改变轮廓颜色吗？默认情况下列出所有字段怎么样？此外，通过设置原色，您实际上会影响依赖原色的所有其他组件。例如，仅仅因为您想将文本字段的默认轮廓颜色设置为#5E72E4，并不一定意味着您希望所有“活动”v-tabs 都使用相同的颜色，对吧？那么，为什么不直接使用 $text-field-outlined-fieldset-border 变量呢？

另外，这实际上是在“模拟”outlined 文本字段的外观。这并不完全是设置或使用该属性。而且您基本上是在强制 filled 和 outlined 文本字段看起来相似，因为显然 v-text-field--outlined 不会使用这种方法设置。

嗨，@YomT。你说得对。我在寻找如何更改输入的默认轮廓颜色时回答了这个问题。不确定我是否快速阅读问题或什么。另外，不确定为什么答案被标记为正确答案。真的很奇怪......我可以发誓我在某个地方读到过这种颜色......