如何使用 vue-select 和 b-pagination？

Question

我正在尝试使用 bootstrap-vue 中的 v-pagination 组件进行分页。它或多或少地按照我的意愿工作，但是当我点击某个页面时，组件正在关闭。

我想知道如何防止 v-select 在我选择 select 选项之一之前关闭。

我的代码：

<v-select
    id="municipio"
    v-model="municipioState"
    :options="municipiosPaginaAtual"
    :filterable="false"
    placeholder="Selecione seu município"
    label="municipio"
    @search="buscarMunicipio"
>
  <div slot="no-options">
    Selecione o Estado!
  </div>
  <li
    slot="list-footer"
    class="pagination"
    @click.prevent=""
  >
    <b-pagination
      v-model="municipioPaginacao"
      :total-rows="municipiosFiltradosQuantidade"
      :per-page="limit"
      first-number
      last-number
    />
  </li>
</v-select>

如果有 v-select 以外的解决方法或其他选择，我很乐意知道。

Answer 1

您可以在 b-pagination 标签中使用 @mouseup.native.capture.stop 来防止关闭 vue-select 的下拉菜单。另外，在我看来，您可以使用 vue-multiselect 以获得更好的用户体验，但这取决于您和您的需要。我只是想把它作为另一种选择推荐给你。我提供了一个简单的片段来展示这一点：

Vue.component("v-select", VueSelect.VueSelect);

new Vue({
  el: '#app',
  data() {
    return {
      books: [{
          title: "Old Man's War"
        },
        {
          title: "The Lock Artist"
        },
        {
          title: "HTML5"
        },
        {
          title: "Right Ho Jeeves"
        },
        {
          title: "The Code of the Wooster"
        },
        {
          title: "Thank You Jeeves"
        }
      ],
      perPage: 2,
      currentPage: 1,
      rows: 6
    }
  },
})

<link href="https://unpkg.com/vue-select@3.16.0/dist/vue-select.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue-select@3.16.0/dist/vue-select.js"></script>
<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">

  <v-select :options="books" label="title">
    <li slot="list-footer">
      <b-pagination @mouseup.native.capture.stop v-model="currentPage" :total-rows="rows" :per-page="perPage"></b-pagination>
    </li>
  </v-select>

</div>

如何使用 vue-select 和 b-pagination？

How to use vue-select with b-pagination?

javascript

vue.js

v-select

vue-select

bootstrap-vue