Vuetify v-select下拉菜单位置自定义：设置向上展开

嘿，这个场景我太熟悉了！当v-select靠近页面底部时，默认向下展开的下拉菜单确实会被页面截断，看不到底部的选项。好在Vuetify给我们提供了非常直接的解决方式，只需要给v-select加上menu-props属性来控制下拉菜单的方向就行。

具体解决方案 #

你只需要在你的v-select组件中添加:menu-props="{ direction: 'top' }"，就能强制下拉菜单向上展开。如果想要更智能的行为（让组件自动判断空间，优先在有足够显示空间的方向展开），可以把direction设为'auto'。

修改后的完整代码 #

<v-layout row wrap>
  <v-flex md6 xs12>
    <v-select 
      :items="states" 
      :closeOnSelect="true" 
      multiple 
      attach 
      item-text='name' 
      item-value='id'
      :menu-props="{ direction: 'top' }"
    ></v-select>
  </v-flex>
</v-layout>

补充说明 #

• menu-props是v-select用来传递配置给内部v-menu组件的属性，direction参数支持'top'、'bottom'、'auto'三个值：
  • 'top'：强制菜单向上展开，适合你当前页面底部的场景
  • 'bottom'：默认的向下展开行为
  • 'auto'：组件会自动检测上下空间，选择空间更充足的方向展开，推荐在不确定组件固定位置时使用

这样修改后，你的下拉菜单就会向上展开，之前被截断的Nunavut这类选项就能完整显示啦！

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