1

我正在制作一个表单,其中包含带有长字符串项目的 v-select 控件,例如

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

  • 显示手的长字符串项目

等等。

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

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

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

代码笔

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

以下是一些屏幕截图:

选中时显示

稍后显示

4

1 回答 1

0

直接给槽内的物品。这将删除文本截断。

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

在此处输入图像描述

于 2020-05-07T17:53:00.443 回答