Vuetify 2-> 3v-text-field子对齐(prepend-inner和append似乎被忽略)

jv2fixgn  于 2023-05-29  发布在  Vue.js
关注(0)|答案(1)|浏览(257)

我正在将一些遗留代码从Vuetify 2迁移到3。目前,我遇到了v-text-field子组件的问题。我已经尝试了一些基于其他StackOverflow帖子或Google点击的东西,但它们似乎都不能解决这个问题,只是移动标签文本。我发现的大多数帖子/GitHub问题似乎是标签本身的对齐问题(比如希望它在右侧),而不是组件相互重叠的问题。
我们的FilterPanel组件的旧版本看起来像这样:x1c 0d1x但是我正在开发的Vuetify 3版本有一些严重的布局问题:

无论出于何种原因,文本输入位于append“添加过滤器”按钮的右侧,标签隐藏在prepend-innerv-select后面
我尝试将append更改为append-inner,但似乎没有任何区别。类似地,将prepend-inner更改为prepend。我还尝试在标签内添加一个标签,认为这可能会有所帮助,但无论我尝试使用哪个插槽,它都没有呈现。
另一个未回答的问题-在Vuetify 2中,menu-props='auto'到底做了什么?我看到它在Vuetify 3中不受支持,即使是menu-props="{ auto: true }",但我找不到任何关于auto曾经做过什么的真实的文档,所以我不知道它是否与我的视觉问题有关,或者我是否可以删除这一点。
另外,在v-text-field之后还有一个v-chip,但我认为这没有关系,所以我省略了它。我还从这段代码中去掉了样式和事件处理程序,因为它们似乎不会影响布局。

<template>
  <div>
    <v-text-field
      v-model="text"
      name="text"
      label="Type your filter here"
      hide-details
      variant="solo"
      density="compact"
      theme="dark"
    >
      <v-select
        slot="prepend-inner"
        v-model="field"
        :items="fields"
        :menu-props="{ auto: true }"
        label="Field"
        hide-details
        single-line
        density="compact"
        variant="solo"
        theme="dark"
      >
        <v-field rounded flat />
      </v-select>

      <v-btn slot="append" color="normal" size="small">
        Add Filter
        <v-icon end theme="dark"> mdi-filter-plus </v-icon>
      </v-btn>
    </v-text-field>
  </div>
</template>

我在想也许我应该做的是使用v-container/v-row/v-col,因为我想这会让我强制所需的布局,但如果可能的话,我宁愿避免这种路径。(当然,这其中也有一些风格上的问题。如果我将v-text-field替换为<v-container><v-row>,然后将原始的v-text-field放在v-selectv-btn之间,它看起来更接近,但看起来仍然不正确:

最后,如果不是将v-text-field替换为v-container,而是在内部添加 anotherv-text-field,并将display="none"添加到外部文本字段...它在正确的位置显示标签,但仍然尝试在右侧进行输入:

谢谢你!

bvuwiixz

bvuwiixz1#

定位不起作用,因为您使用的是不推荐使用的插槽语法:

slot="prepend-inner" ...

就是现在

v-slot:prepend-inner>

还是速记

#prepend-inner

另外,你必须把slot声明放在一个模板上,它不再直接作用于组件:

<template v-slot:prepend-inner>
  <v-select
    ...

有了这个,插槽工作,但是,嵌套在VTextField中的VSelect似乎不起作用,看起来像文本字段不允许打开选择。此外,还有一个问题与间距。我敢肯定还有更多的问题。我认为,即使有插槽,你也必须用另一种方式来构建它。
在操场上看一看
:auto属性被设置时,选择菜单将被定位,以便所选项目被定位在选择框所在的位置。因此,菜单不是向上或向下下拉,而是向两个方向打开。这里是一个pen如果它有帮助,只要看看菜单打开的位置取决于所选的项目。

相关问题