vue-select与顺风css类为较长的文本搜索输入字段转到下一行

tgabmvqs 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(124)

我在我的Nuxt 3应用程序中使用vue-select和vee-validate，但问题是，当选择的选项文本太大时，<input>会转到下一行，因此整体字段高度会增加，这是我想避免的。对于选择的文本，如果选项文本不大，则一切正常。这只发生在大文本上。
下面是我的代码：

<template>
  <div class="flex flex-col items-center max-w-md">
    <Field :name="name" v-model="fieldItem">
      <vSelect
        ref="selectDropdownRef"
        v-model="item"
        :options="options"
        :selectable="(option) => !option.disabled"
        :getOptionLabel="
          (option, concatValue) =>
            concatValue
              ? option.text.toLowerCase() === option.value.toLowerCase()
                ? option.text
                : `${option.text} ${option.value ? `(${option.value})` : ''}`
              : option.text
        "
        class="w-full bg-gray-50 dark:bg-gray-700 rounded p-1"
        :class="`${isDarkMode === 'dark' ? 'dark' : ''}`"
        appendToBody
      >
        <template #search="{ attributes, events }">
          <input class="vs__search w-full" v-bind="attributes" v-on="events" />
        </template>
      </vSelect>
    </Field>

    <div class="text-center">
      <ErrorMessage :name="name" class="text-red-500 mt-2 italic" />
    </div>
  </div>
</template>
          
<script setup>
import { Icon } from "@iconify/vue";
import { Field, ErrorMessage } from "vee-validate";
import vSelect from "vue-select";
</script>
        
<style src="vue-select/dist/vue-select.css"></style>
  
<style>
.vs__dropdown-menu,
.vs__dropdown-option--disabled {
  @apply bg-white dark:bg-slate-800;
}

.vs__dropdown-option,
.vs__selected,
.vs__search,
.vs__dropdown-option--disabled {
  @apply text-primary dark:text-white;
}

.vs__dropdown-option--disabled {
  @apply font-bold text-lg;
}

.vs__clear svg {
  @apply secondary-fill;
}

.vs__open-indicator {
  @apply secondary-fill;
}
</style>

字符串
对于较小的文本，该字段显示如下：

对于大文本，该字段显示如下：

正如我们所看到的，当有较大的文本时，该字段会扩展，当我在Chrome的检查选项卡中检查时，我可以看到由于我要避免的大文本，<input>正在转移到下一行。我想确保该字段不会扩展。
我尝试添加几个Tailwind CSS样式：

.vs__selected {
 display: block;
 white-space: nowrap;
 text-overflow: ellipsis;
 max-width: 100%;
}

型
这是使图标超越：

css

来源：https://stackoverflow.com/questions/77763432/vue-select-with-tailwind-css-class-for-longer-text-the-search-input-field-goes-t

1条答案

按热度按时间

pbossiut1#

额外的空间是由于文本换行以及输入搜索元素：

的数据
我们可以通过应用white-space: nowrap来停止文本换行：

.vs__selected {
  white-space: nowrap;
}

字符串
要停止input Package ，我们可以从 Package 中删除flex布局：

.vs__selected-options[class] {
  flex-wrap: nowrap;
}

型

Vue.createApp({
  components: {
    'v-select': window['vue-select']
  },
  data() {
    return {
      item: 
        {
          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
          value: 'foo',
        },
      options: [
        {
          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
          value: 'foo',
        },
        {
          text: 'Bar',
          value: 'bar',
        },
      ],
    };
  },
}).mount('#app');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.5/vue.global.prod.min.js" integrity="sha512-Reu6khHF2i9w9xRYM9FIpN5gnIN2NEomjN7lpCyfBtUWlOhZB78JJV3p685GNznhFov3urM2JxiDH14gwkaDMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vue-select/4.0.0-beta.6/vue-select.min.css" integrity="sha512-u7sirbGarTU/dvVlIjUCOy3zmAj5BnrH+QdJSvHZlQgfJTlgDGUdzUgqpqsU5SK2wzFYq21OR4euSyyNsXNybw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-select/4.0.0-beta.6/vue-select.umd.js" integrity="sha512-pNr2dkpayXh1yJu30xtmo65dUTf5dKxfl89QnuCi1ndVrVU8O14yNlyey5C9/AcWavrwkMMHGnugYH+8w6VAoA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.0"></script>
<script>
tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: 'red',
      },
    },
  },
};
</script>

<div id="app">
  <div class="flex flex-col items-center max-w-md">
    <Field :name="name" v-model="fieldItem">
      <v-select
        ref="selectDropdownRef"
        v-model="item"
        :options="options"
        :selectable="(option) => !option.disabled"
        :get-option-label="
          (option, concatValue) =>
            concatValue
              ? option.text.toLowerCase() === option.value.toLowerCase()
                ? option.text
                : `${option.text} ${option.value ? `(${option.value})` : ''}`
              : option.text
        "
        class="w-fullbg-gray-50 dark:bg-gray-700 rounded p-1"
        :class="`${isDarkMode === 'dark' ? 'dark' : ''}`"
        appendToBody
      >
        <template #search="{ attributes, events }">
          <input class="vs__search w-full" v-bind="attributes" v-on="events" />
        </template>
      </v-select>
    </Field>

    <div class="text-center">
      <ErrorMessage :name="name" class="text-red-500 mt-2 italic" />
    </div>
  </div>
</div>

<style type="text/tailwindcss">
.secondary-fill {}

.vs__dropdown-menu,
.vs__dropdown-option--disabled {
  @apply bg-white dark:bg-slate-800;
}

.vs__dropdown-option,
.vs__selected,
.vs__search,
.vs__dropdown-option--disabled {
  @apply text-primary dark:text-white;
}

.vs__dropdown-option--disabled {
  @apply font-bold text-lg;
}

.vs__clear svg {
  @apply secondary-fill;
}

.vs__open-indicator {
  @apply secondary-fill;
}

.vs__selected {
  white-space: nowrap;
}

.vs__selected-options[class] {
  flex-wrap: nowrap;
}
</style>

的字符串

赞(0）回复(0）举报 2024-01-09

我来回答

vue-select与顺风css类为较长的文本搜索输入字段转到下一行

1条答案

相关问题

热门标签

最新问答