限制vue-Multiselect中的文本长度

Question

我在项目中使用了“vue-MultiSelect”包中的“单选”对象来进行“搜索选择”。我在选择列表中的选项太长（因为它们是站点地址/url），并且它们超出了输入框的大小并破坏了 UI。我可能需要设置一个字符限制来填充值，这可能有助于保持用户界面的完整性。我可以使用哪个类来限制填充文本的长度？或者有更好的选择吗？

对于普通选择列表，我们可以设置 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

如果输入文本溢出只是视觉问题，你可以用 css 解决：

  .multiselect__single {
      text-overflow: ellipsis; 
      white-space: nowrap;
      overflow: hidden;
    }

这些样式隐藏了最后溢出“...”的文本。将其添加到文件末尾之间

<style></style>

它应该可以工作