Vuetify 滑块附加插槽文本字段未与滑块对齐

Posted 2023-02-23

【中文标题】Vuetify 滑块附加插槽文本字段未与滑块对齐

【英文标题】：Vuetify slider append slot text field is not aligned with slider

【发布时间】：2021-05-18 01:16:56

【问题描述】：

我有一个 Vuetify 滑块，在前置槽中有一个减号图标，在附加槽中有一个加号图标。 如果我在附加槽中再添加一个文本字段，则加号图标和文本字段不会与滑块对齐。如何使它们对齐？

Here is the codepen

<v-app id="app">
  <v-card>
    <v-card-title>Vuetify Slider append slot is not aligned if more than one element</v-card-title>
    <v-subheader>Append slot contains only one plus icon, the plus icon is aligned with the slider</v-subheader>
    <v-card-text>
      <v-slider v-model="bpm" track-color="grey" always-dirty thumb-label="always" min="1" max="422">
        <template v-slot:prepend>
          <v-icon :color="color" @click="bpm--">
            mdi-minus
          </v-icon>
        </template>
        <template v-slot:append>
          <v-icon :color="color" @click="bpm++">
            mdi-plus
          </v-icon>
        </template>
      </v-slider>
    </v-card-text>

    <v-subheader>Append slot contains one icon and one text field, the plus icon and text field are not aligned with the slider</v-subheader>
    <v-card-text>
      <v-slider v-model="bpm" track-color="grey" always-dirty thumb-label="always" min="1" max="422">
        <template v-slot:prepend>
          <v-icon :color="color" @click="bpm--">
            mdi-minus
          </v-icon>
        </template>
        <template v-slot:append>
          <v-icon :color="color" @click="bpm++">
            mdi-plus
          </v-icon>
          <!-- The only difference is this text field-->
          <v-text-field v-model="bpm"></v-text-field>
        </template>
      </v-slider>
    </v-card-text>
  </v-card>
</v-app>

new Vue(
  el: '#app',
  vuetify: new Vuetify(),
  data: () => (
    bpm: 10
  ),
)

【参考方案1】：

预计每个插槽上只有一个元素。但是您可以为该元素设置 css 并将其包装为 v-layout。

<template v-slot:append>
   <v-layout class="alignThis">
      <v-icon :color="color" @click="bpm++">
         mdi-plus
      </v-icon>
      <v-text-field
         v-model="bpm"
         class="mb-1 pt-0"
         type="number"
         style="width: 60px"
         ></v-text-field>
   </v-layout>
</template>

搭配风格：

<style>
.alignThis 
   margin-top: -18px !important;

</style>

而v-text-field 有自己的css 属性，你也可以用!important 或SaSS 变量覆盖它。

Live example