Vue js选择固定输入高度

问题描述

我使用此插件 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,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”并选择前四个，我有这个

但我想要这样的东西：

或者像这样

0r 甚至这个

这可能吗？ 我知道还有其他插件可以做到这一点（例如：vue multiselect）但是我需要用这个插件来实现它，因为其他插件缺少一些我需要的其他功能

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）