在Vuetify中更改所有只读字段的背景色

import 'vuetify/dist/vuetify.min.css'

<template>
  <div>
    <input type="text" v-bind:class="{ 'readonly-field': isReadOnly }" readonly>
  </div>
</template>

<style>
.readonly-field {
  background-color: #f2f2f2; /* 设置只读字段的背景色 */
}
</style>

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    themes: {
      light: {
        readonlyField: '#f2f2f2' // 设置只读字段的背景色
      }
    }
  }
})

<template>
  <div>
    <input type="text" v-bind:class="{ 'readonly-field': isReadOnly }" readonly>
  </div>
</template>

<style>
.readonly-field {
  background-color: $readonlyField; /* 使用Vuetify主题配置中定义的只读字段背景色 */
}
</style>