Vuetify 默认为所有 v-text-field 设置概述

Question

是否有简单的方法来更改输入项目中所有 "v-text-field" 的属性 "outlined" 的默认值？

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

Answer 1

您可以创建一个包装器组件和 extends from VTextField (see treeshaking) 并自定义默认值。

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，扩展一个组件意味着所有基础组件的道具都被传递，因此同样可用。

Answer 2

无需自定义组件

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

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

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

<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；

Vuetify 默认为所有 v-text-field 设置概述

Vuetify set outlined for all v-text-field by default

javascript

settings

default

vue.js

vuetify.js

无需自定义组件

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

更改应用的主要颜色

更改所有 v-text-field 的颜色（聚焦或不聚焦）