0

我使用这个插件https://www.npmjs.com/package/vue-select从列表中选择多个值。

让我们假设以下内容:

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

new Vue({
  el: "#app",
  data: {
    options: []
  },
  methods: {
    onSearch(search, loading) {
      if(search.length) {
        loading(true);
        this.search(loading, search, this);
      }
    },
    search: _.debounce((loading, search, vm) => {
      fetch(
        `https://api.github.com/search/repositories?q=${escape(search)}`
      ).then(res => {
        res.json().then(json => (vm.options = json.items));
        loading(false);
      });
    }, 350)
  }
});
img {
  height: auto;
  max-width: 2.5rem;
  margin-right: 1rem;
}

.d-center {
  display: flex;
  align-items: center;
}

.selected img {
  width: auto;
  max-height: 23px;
  margin-right: 0.5rem;
}

.v-select .dropdown li {
  border-bottom: 1px solid rgba(112, 128, 144, 0.1);
}

.v-select .dropdown li:last-child {
  border-bottom: none;
}

.v-select .dropdown li a {
  padding: 10px 20px;
  width: 100%;
  font-size: 1.25em;
  color: #3c3c3c;
}

.v-select .dropdown-menu .active > a {
  color: #fff;
}
<link href="https://unpkg.com/vue-select/dist/vue-select.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/lodash@latest/lodash.min.js"></script>
<script src="https://unpkg.com/vue-select@3.11.2/dist/vue-select.js"></script>
<div id="app">
  <h1>Vue Select - Ajax</h1>
  <v-select label="name" multiple :filterable="false" :options="options" @search="onSearch">
    <template slot="no-options">
      type to search GitHub repositories..
    </template>
    <template slot="option" slot-scope="option">
      <div class="d-center">
        <img :src='option.owner.avatar_url'/> 
        {{ option.full_name }}
        </div>
    </template>
    <template slot="selected-option" slot-scope="option">
      <div class="selected d-center">
        <img :src='option.owner.avatar_url'/> 
        {{ option.full_name }}
      </div>
    </template>
  </v-select>
</div>

如果我搜索例如:“javascript”并选择前四个,我有这个

实际的

但我想要这样的东西:

通缉

或者像这样

通缉2

0r 甚至这个 通缉3

那可能吗?我知道还有其他插件可以做到这一点(例如:vue multiselect),但我需要用这个插件来实现它,因为其他插件缺少我需要的一些其他功能

4

0 回答 0