穿梭框

穿梭框用于在不同列表之间重新排序项目。

导入 #


import PickList from 'primevue/picklist';

基础 #

穿梭框需要一个多维数组作为其值，并使用 v-model 指令绑定，以及一个用于其内容的模板，该模板通过 slotProps 获取 option 实例和索引。

没有可用的选项没有选定的项目


<PickList v-model="products" dataKey="id" breakpoint="1400px">
    <template #option="{ option  }">
        {{ option.name }}
    </template>
</PickList>

模板 #

对于自定义内容支持，定义一个 option 模板，该模板获取项目实例作为参数。此外，还提供了 sourceheader 和 targetheader 插槽以进行进一步的自定义。

没有可用的选项没有选定的项目


<PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem>
    <template #option="{ option , selected }">
        <div class="flex flex-wrap p-1 items-center gap-4 w-full">
            <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
            <div class="flex-1 flex flex-col">
                <span class="font-medium text-sm">{{ option.name }}</span>
                <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
            </div>
            <span class="font-bold">${{ option.price }}</span>
        </div>
    </template>
</PickList>

无障碍 #

屏幕阅读器

可以使用 sourceListProps 和 targetListProps 通过传递 aria-labelledby 或 aria-label 属性来提供描述源列表框和目标列表框的值。列表元素具有 listbox 角色和 aria-multiselectable 属性。每个列表项都具有 option 角色，并带有 aria-selected 作为其属性。

控件按钮是 button 元素，其 aria-label 默认情况下引用 locale API 的 aria.moveTop、aria.moveUp、aria.moveDown、aria.moveBottom、aria.moveToTarget、aria.moveAllToTarget、aria.moveToSource 和 aria.moveAllToSource 属性，或者您可以使用 moveTopButtonProps、moveUpButtonProps、moveDownButtonProps、moveToButtonProps、moveAllToButtonProps、moveFromButtonProps、moveFromButtonProps moveAllFromButtonProps moveToTargetProps、moveAllToTargetProps、moveToSourceProps 和 moveAllToSourceProps 来自定义按钮，例如覆盖默认的 aria-label 属性。


<span id="lb">Options</span>
<PickList aria-labelledby="lb" />

<PickList aria-label="City" />

列表框键盘支持

按键	功能
tab	将焦点移动到第一个选定的选项，如果没有，则第一个选项接收焦点。
向上箭头	将焦点移动到上一个选项。
向下箭头	将焦点移动到下一个选项。
回车	切换焦点选项的选中状态。
空格	切换焦点选项的选中状态。
home	将焦点移动到第一个选项。
end	将焦点移动到最后一个选项。
shift + 向下箭头	将焦点移动到下一个选项并切换选择状态。
shift + 向上箭头	将焦点移动到上一个选项并切换选择状态。
shift + 空格	选择最近选择的选项和焦点选项之间的项目。
control + shift + home	选择焦点选项和所有直到第一个选项的选项。
control + shift + end	选择焦点选项和所有直到第一个选项的选项。
control + a	选择所有选项。

按钮键盘支持

按键	功能
回车	执行按钮操作。
空格	执行按钮操作。

穿梭框