Vue.js2.5/Vuetify超小设备双列布局技术问询

嘿，我看你这段Vue.js 2.5 + Vuetify的布局代码，原本是想实现超小设备（xs断点）上的双列布局，但目前的设置其实是xs屏下单列、sm及以上屏双列哦。咱们来调整和优化一下，精准实现你想要的效果：

现有代码逻辑分析 #

先拆解下你当前代码的断点行为：

• <v-flex xs12 sm6>：表示在xs（超小屏，比如手机竖屏）时占满整行12列，到sm（小屏，比如平板竖屏）及以上才变成半行6列（双列布局）
• 第二个v-flex的pl-4类在双列时能拉开输入框间距，但xs屏下单列时这个左内边距会显得多余，还浪费空间

修改为xs屏双列的方案 #

要在超小设备上也实现双列，只需要把xs12改成xs6，让所有断点下都占6列。同时可以微调内边距，适配超小屏的紧凑空间：

<v-flex xs6 sm6>
  <v-text-field 
    label="Created at" 
    v-model="artist_created_at_label" 
    readonly 
    disabled 
    v-show="!is_insert" 
  ></v-text-field>
</v-flex>
<v-flex xs6 sm6 class="pl-2"> <!-- 把pl-4改为pl-2，超小屏间距更协调 -->
  <v-text-field 
    label="Updated at" 
    v-model="artist_updated_at_label" 
    readonly 
    disabled 
    v-show="!is_insert && artist_updated_at_label" 
  ></v-text-field>
</v-flex>

额外的超小屏适配优化建议 #

考虑到超小屏空间有限，再给你两个实用的优化点：

• 给输入框添加hide-details="auto"，让输入框的辅助细节（比如下划线、提示文本）在小屏自动隐藏，节省垂直空间：

  <v-text-field 
    label="Created at" 
    v-model="artist_created_at_label" 
    readonly 
    disabled 
    v-show="!is_insert"
    hide-details="auto"
  ></v-text-field>
  

• 如果label文字过长导致布局拥挤，可以给输入框添加text-xs类，缩小字体尺寸，适配超小屏：

  <v-text-field 
    label="Updated at" 
    v-model="artist_updated_at_label" 
    readonly 
    disabled 
    v-show="!is_insert && artist_updated_at_label"
    class="text-xs"
  ></v-text-field>
  

另外，你第二个输入框的v-show条件（!is_insert && artist_updated_at_label）逻辑很合理，能避免空占位。如果不需要保留该输入框的DOM节点，也可以换成v-if，减少不必要的DOM渲染~

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