在vue中限制文本长度-多重选择

Question

我在我的项目中使用了'vue-MultiSelect‘包中的'search’对象。我在选择列表中的选项太长了(因为它们是站点地址/urls)，它们流过输入框大小并破坏UI。我可能需要设置一个字符限制来填充值，这可能有助于保持UI的完整性。我可以使用哪个类来限制填充的文本的长度？或者其他更好的选择？

对于正常的选择列表，我们可以设置数据限制，就像数据限制="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-，我尝试了相同的方法，并尝试在这样的方法中传递它。

@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>

​