如何使禁用<v-text-field>内的文本可选择（只需复制并粘贴到其他地方）？

Question

我最近从 Vuetify 2 升级到 Vuetify 3。所有禁用的 v-text-field 都无法通过拖动光标来选择。但是，我注意到 v-autocomplete 和 v-select 即使禁用，也可以选择文本。有谁知道这个问题的解决办法吗？

我尝试在常规 html 元素上测试它，而不使用 Vuetify。禁用时的 HTML 输入元素可以选择文本，但不能 vuetify 禁用的输入字段

编辑：我再次测试了一下，发现当元素有v-model时，文本是不可选的。

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

但是通过以下方式输入时可以选择：

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

但是当使用第二种方式时，标签也会作为占位符与值合并。

Answer 1

禁用文本选择是通过字段

pointer-events: none

上的 CSS 属性实现的。您需要应用自己的 CSS 来覆盖它。

<style>
.v-field--disabled {
  pointer-events: auto;
}
</style>