Flexbox 容器内的 Vuetify v-select 有一个空输入，可以拉长下拉菜单

Question

我有一个问题，来自 Vuetify 的 v-select 在设置了 display: flex 的容器内部时看起来比它应该的要宽得多，因为空的 input 拉伸了下拉菜单出。

这里是有问题的 input 占用 space 的屏幕截图：

下面是显示该问题的有效代码片段。当下拉列表容器更大时——比如屏幕的整个宽度——问题会变得更加严重，下拉列表可能会占用大量 space 而文本可能只是其中的一小部分。

我想要做的是让下拉菜单成为适合下拉菜单内部的最大文本的大小，在本例中为“apple”。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      product: {},
      products: [{title: 'apple', upc: '123'}],
    }
  },
  created() {
    this.product = this.products[0];
  },
})

.app-container {
  display: flex;
}

.message {
  width: 200px;
}

input {
  height: 100%;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app id="inspire">
     <div class="app-container">
      <div>
      <v-select
        hide-details
        dense
        attach
        outlined
        return-object
        v-model="product"
        :items="products"
        item-text="title"
      ></v-select>
      </div>
      <div class="message">Why is there a sibling <code>input</code> element next to the element that contains <code>apple</code> that takes up a bunch of space? I only want the dropdown as wide as the longest text in the dropdown, which in this case is "apple".</div>
    </div>
  </v-app>
</div>

最后是开发工具中难以捉摸的 input 的屏幕截图：

Answer 1

你能做的就是先隐藏输入。

.v-select__selections input {
   display: none;
}

完成后，添加以下代码来更改文本换行和更改选择区域的固定宽度。

.v-select__selection {
  width: auto;
}

.v-select__selection--comma {
  overflow: visible;
  text-overflow: unset;
  white-space: unset;
}

Answer 2

Sudam Dissanayake 说的很像。

PD：我修改了您的代码段...只是运行它

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      product: {},
      products: [{title: 'apple', upc: '123'}, {title: 'Another fruit', upc: '456'}],
    }
  },
  created() {
    this.product = this.products[0];
  },
})

.app-container {
  display: flex;
}

.message {
  width: 200px;
}

.v-select__selections > input {
  display: none !important;
}

.v-select__selection {
  min-width: fit-content !important;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app id="inspire">
     <div class="app-container">
      <div>
      <v-select
        hide-details
        dense
        attach
        outlined
        return-object
        v-model="product"
        :items="products"
        item-text="title"
      ></v-select>
      </div>
      <div class="message">Why is there a sibling <code>input</code> element next to the element that contains <code>apple</code> that takes up a bunch of space? I only want the dropdown as wide as the longest text in the dropdown, which in this case is "apple".</div>
    </div>
  </v-app>
</div>

Flexbox 容器内的 Vuetify v-select 有一个空输入，可以拉长下拉菜单

Vuetify v-select inside of a flexbox container has an empty input that stretches out the dropdown

html

css

vue.js

vuetify.js