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

Question

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

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

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

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