Vuetify中为solo样式文本框添加标签的方法求助

我完全懂你碰到的这个坑——Vuetify的solo样式文本框默认设计就是隐藏浮动标签的，目的是打造更极简的输入框外观，所以直接加label属性确实不会显示。不过有两个靠谱的办法能解决这个问题：

方法1：使用官方的persistent-label属性 #

这是最推荐的官方解决方案，只要给solo样式的输入框加上persistent-label，标签就会一直固定显示在输入框上方，不会随输入状态隐藏：

<template>
  <v-container grid-list-md>
    <v-layout row wrap>
      <v-flex xs12 sm6>
        <v-text-field 
          solo 
          label="First Name" 
          persistent-label 
          v-model="first"
        ></v-text-field>
      </v-flex>
      <v-flex xs12 sm6>
        <v-text-field 
          solo-inverted 
          label="Last Name" 
          persistent-label 
          v-model="last"
        ></v-text-field>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      first: '',
      last: ''
    }
  }
}
</script>

这个属性在Vuetify 2.x及以上版本都支持，如果你的版本太旧可能会无效，记得检查一下项目里的Vuetify版本哦。

方法2：自定义CSS强制显示标签 #

如果persistent-label的样式不符合你的需求，也可以通过自定义CSS来覆盖默认的隐藏规则，灵活调整标签的位置和显示状态：

/* 针对solo样式输入框的标签 */
.v-text-field--solo .v-label {
  opacity: 1 !important;
  transform: translateY(-20px) scale(0.75) !important;
  /* 可以根据自己的布局需求调整translateY和scale的数值 */
}

这样就能强制让标签保持显示，还能自己微调标签的位置大小。

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