v v-select显示长字符串

Question

我正在创建一个包含带有长字符串项的v-select控件的表单，例如

• 要显示标题的长字符串项目

• 要显示手的长字符串项目

依此类推。

v-select控件将通过使用手机显示，因此用户应阅读每个项目，而不是以下内容

• 长字符串项目...
• 长字符串项目...

是否可以将完整的项目文本显示到列表项目中？

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',],
    },
    }

以下是一些屏幕截图：

Answer 1

直接在插槽内提供物品。这将删除文本截断。

<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',
   ],
}