在 vue-Multiselect 中限制文本长度

Question

我在我的项目中使用“vue-MultiSelect”package 中的“单选”Object 作为“搜索选择”。 我在 select 列表中的选项太长（因为它们是站点地址/URL）并且它们超过输入框大小并破坏了 UI。 我可能需要设置一个字符限制来填充可能有助于保持 UI 完整的值。 我可以使用哪个 class 来限制填充文本的长度？ 或者有更好的选择吗？

对于普通的 select 列表，我们可以设置 data-limit 像 data-limit ="37" 来限制文本长度。

<select
  v-model="filter.url_name"
  class="w-4/6 relative truncate overflow-hidden form-select pr-10 appearance-none "
  aria-label="Default select example">
  <option
    class="absolute w-4/6 truncate overflow-hidden right-0"
    data-limit="37"
    :value="item"
    v-for="(item, index) in requiredUrlsFiltersData"
    :key="index"
  >
    {{ item }}
  </option>
</select>

对于vue-multi select，我尝试了同样的方法并尝试将它传递到这样的方法中

@input="siteSelected(filter.url_name, 37, filter.url_name.length)"

并返回值

siteSelected(str, max, len) {  
  return len > max ? str.substring(0, 37) : str;
},

两者都不起作用。

<multiselect
  v-model="filter.url_name"
  :options="requiredUrlsFiltersData"
  placeholder="select a url"
  class="max-w-sm"
  data-limit="37"
  :rules="maxlength"
  @input="siteSelected(filter.url_name, 37, filter.url_name.length)"
  :show-labels="false"   
>
</multiselect>

Answer 1

您可以尝试使用计算属性。

为requiredUrlsFiltersData创建计算属性，在那里您可以限制 url 的长度并连接:options与新的缩短值。

使用filter.url_name.full进行后端 API 调用。

 var app = new Vue({ el: '#app', components: { Multiselect: window.VueMultiselect.default }, data () { return { filter: {url_name: null}, requiredUrlsFiltersData: [ "1longurllongurllongurllongurllongurllongurllongurllongurllongurllongurllongurllongurllongurllongurl1", "2longurllongurllongurllongurllongurllongurllongurllongurllongurllongurllongurllongurllongurllongurl2", "3longurllongurllongurllongurllongurllongurllongurllongurllongurllongurllongurllongurllongurllongurl3" ] } }, computed: { trimedData() { return this.requiredUrlsFiltersData.map(r => { return {full: r, url: r.slice(0, 37)} }) } } })

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-multiselect@2.1.0"></script> <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"> <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script> <div id="app"> <multiselect v-model="filter.url_name":options="trimedData" placeholder="select a url" label="url" track-by="url":multiple="true":taggable="true" ></multiselect> <pre>{{ filter.url_name }}</pre> </div>