如何在 bootstrap-vue 中为 select 选项的包装器设置最大高度？

Question

如何为 select 选项的包装器设置 max-height: 100px？

Vue.component('customIcon', {
  template: `<svg xmlns="http://www.w3.org/2000/svg" width="15.352" height="15.355" viewBox="0 0 15.352 15.355">
        <path id="Union_19" data-name="Union 19" d="M-19.5-15958.5l-7.5,7.5,7.5-7.5-7.5-7.5,7.5,7.5,7.5-7.5-7.5,7.5,7.5,7.5Z" transform="translate(27.176 15966.178)" fill="none" stroke="#bbb" stroke-width="0.5"/>
    </svg>`
})

new Vue({
  el: "#app",
  data() {
      return {
        selected: null,
        options: [
          { value: null, text: 'Please select an option' },
          { value: 'a', text: 'This is First option' },
          { value: 'b', text: 'Selected Option' },
          { value: { C: '3PO' }, text: 'This is an option with object value' },
          { value: 'd', text: 'This one is disabled', disabled: true },
          { value: 'e', text: 'Sample' },
          { value: 'f', text: 'Sample' },
          { value: 'g', text: 'Sample' },
          { value: 'h', text: 'Sample' },
          { value: 'i', text: 'Sample' },
          { value: 'j', text: 'Sample' },
          { value: 'k', text: 'Sample' },
          { value: 'l', text: 'Sample' },
          { value: 'm', text: 'Sample' }
        ]
      }
    }
});

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <div>
    <b-form-select v-model="selected" :options="options"></b-form-select>
  </div>
</div>

当我的选择不多的时候还可以。但我只需要显示大约 10 个选项，滚动时显示其他选项。因此，当单击 select 并查看选项时，选项的包装器的最大高度为 100px。

Answer 1

基于this question，您无法更改select选项的高度，但有另一种方法可以使用[=12=的size属性来完成此操作] 和一些 javascript 代码。

new Vue({
  el: "#app",
  data() {
      return {
        selected: null,
        options: [
          { value: null, text: 'Please select an option' },
          { value: 'a', text: 'This is First option' },
          { value: 'b', text: 'Selected Option' },
          { value: { C: '3PO' }, text: 'This is an option with object value' },
          { value: 'd', text: 'This one is disabled', disabled: true },
          { value: 'e', text: 'Sample' },
          { value: 'f', text: 'Sample' },
          { value: 'g', text: 'Sample' },
          { value: 'h', text: 'Sample' },
          { value: 'i', text: 'Sample' },
          { value: 'j', text: 'Sample' },
          { value: 'k', text: 'Sample' },
          { value: 'l', text: 'Sample' },
          { value: 'm', text: 'Sample' }
        ]
      }
    }
});

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <div>
    <b-form-select onfocus='this.size=5;' onblur='this.size=5;' 
onchange='this.size=5; this.blur();' onfocusout='this.size=null;' v-model="selected" :options="options"></b-form-select>
  </div>
</div>

如何在 bootstrap-vue 中为 select 选项的包装器设置最大高度？

How set max-height for select options' wrapper in bootstrap-vue?

css

vue.js

bootstrap-vue