我正在将一些遗留代码从Vuetify 2迁移到3。目前,我遇到了v-text-field
子组件的问题。我已经尝试了一些基于其他StackOverflow帖子或Google点击的东西,但它们似乎都不能解决这个问题,只是移动标签文本。我发现的大多数帖子/GitHub问题似乎是标签本身的对齐问题(比如希望它在右侧),而不是组件相互重叠的问题。
我们的FilterPanel
组件的旧版本看起来像这样:x1c 0d1x但是我正在开发的Vuetify 3版本有一些严重的布局问题:
无论出于何种原因,文本输入位于append
“添加过滤器”按钮的右侧,标签隐藏在prepend-inner
v-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-select
和v-btn
之间,它看起来更接近,但看起来仍然不正确:
最后,如果不是将v-text-field
替换为v-container
,而是在内部添加 anotherv-text-field
,并将display="none"
添加到外部文本字段...它在正确的位置显示标签,但仍然尝试在右侧进行输入:
谢谢你!
1条答案
按热度按时间bvuwiixz1#
定位不起作用,因为您使用的是不推荐使用的插槽语法:
就是现在
还是速记
另外,你必须把slot声明放在一个模板上,它不再直接作用于组件:
有了这个,插槽工作,但是,嵌套在VTextField中的VSelect似乎不起作用,看起来像文本字段不允许打开选择。此外,还有一个问题与间距。我敢肯定还有更多的问题。我认为,即使有插槽,你也必须用另一种方式来构建它。
在操场上看一看
当
:auto
属性被设置时,选择菜单将被定位,以便所选项目被定位在选择框所在的位置。因此,菜单不是向上或向下下拉,而是向两个方向打开。这里是一个pen如果它有帮助,只要看看菜单打开的位置取决于所选的项目。