vuetify v-select показать длинные строки - PullRequest
1 голос
/ 07 мая 2020

Я создаю форму, которая включает элемент управления v-select с элементами длинной строки, такими как

  • элемент длинной строки для отображения Head

  • длинная строка для отображения рук

И так далее.

Элемент управления v-select будет отображаться с помощью мобильных телефонов, поэтому пользователи должны читать каждый элемент, а не следующий

  • элемент длинной строки ...
  • элемент длинной строки ...

Есть ли возможность отобразить полный текст элемента в списке ítems?

Code Pen

properties: {
    slotProps: {
      type: "string",
      title: "Custom enums",
      enum: [
        'long string item to display in devices with small screens and Head',
        'long string item to display in devices with small screens and Hands',
        'long string item to display in devices with small screens and Eyes',
        'long string item to display in devices with small screens and Stomach',],
    },
    }

Вот несколько снимков экрана:

Displayed when selected

Displayed later

1 Ответ

0 голосов
/ 07 мая 2020

Напрямую отдавать предметы внутри слота. это удалит усечение текста.

<v-select
  v-model="select"
  :items="items"
  label="Select"
  >
  <template v-slot:item="slotProps">
    {{slotProps.item}}
  </template>
</v-select>

...
...
data: {
  select: null,
  items: [
    'long string item to display Head',
    'long string item to display Hands',
    'long string item to display Eyes',
    'long string item to display Stomach',
   ],
}

enter image description here

...