Vuetify 3中禁用v-text-field的文本如何设置为可选中复制？

问题现象 #

从Vuetify 2升级到3后，禁用状态的v-text-field无法通过拖拽光标选中文本，但v-autocomplete和v-select在禁用状态下仍支持文本选中。原生HTML禁用输入框默认允许选中文本，但Vuetify的实现存在差异：

• 使用v-model绑定值的禁用v-text-field：文本完全无法选中
• 通过插槽插入文本的写法：文本可选中，但会导致标签与值合并为占位符，UI体验不符合预期

不可选中的写法（v-model绑定） #

<v-text-field 
  :label="$t('softwareEditLabelKey')"
  v-model="software.key"
  :disabled="!isNewSoftware"
>
</v-text-field>

可选中但存在UI问题的写法（插槽文本） #

<v-text-field 
  :label="$t('softwareEditLabelKey')"
  :disabled="!isNewSoftware"
>
  {{software.key}}
</v-text-field>

解决方案 #

Vuetify 3默认通过CSS阻止了禁用状态v-text-field的文本选择，可通过自定义样式覆盖这一行为：

局部修改（针对单个输入框） #

1. 给目标v-text-field添加自定义类名：

<v-text-field 
  :label="$t('softwareEditLabelKey')"
  v-model="software.key"
  :disabled="!isNewSoftware"
  class="selectable-disabled-input"
>
</v-text-field>

2. 添加对应CSS规则：

.selectable-disabled-input .v-field__input {
  user-select: text;
  -webkit-user-select: text;
}

全局修改（所有禁用v-text-field） #

如果需要所有禁用状态的v-text-field都支持选中文本，可添加全局样式：

.v-field--disabled .v-field__input {
  user-select: text;
  -webkit-user-select: text;
}

原因说明 #

Vuetify 3为禁用状态的输入框组件添加了user-select: none的CSS属性，而原生<input disabled>元素默认并未限制文本选择。v-autocomplete和v-select的禁用实现逻辑与v-text-field不同，因此未受到该规则影响。

内容的提问来源于stack exchange，提问作者Yamini Gupta