弹性盒容器内的 Vuetify v-select 有一个空输入，可拉伸下拉菜单

Question

我遇到了一个问题，来自 Vuetify 的 v-select 在设置了 display: flex 的容器内时显得比应有的宽得多，因为空的 input 拉伸下拉列表。

这是有问题的input 占用空间的屏幕截图：

下面是显示问题的工作代码 sn-p。当下拉菜单容器更大时（例如屏幕的整个宽度），问题会变得更加夸张，下拉菜单可能会占用大量空间，而文本可能只是其中的一小部分。

我想要做的是将下拉菜单设置为适合下拉菜单的最大文本的大小，在本例中为“苹果”。

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：我修改了你的 sn-p... 运行它

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>