原位

原位提供了一种简单的方法来同时进行编辑和显示，点击输出会显示实际内容。

导入 #


import Inplace from 'primevue/inplace';

基本 #

原位组件需要 display 和 content 模板来定义每种状态的内容。

查看内容


<Inplace>
    <template #display> View Content </template>
    <template #content>
        <p class="m-0">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </template>
</Inplace>

输入 #

当从事件调用时，closeCallback 会将状态切换回显示模式。

点击编辑


<Inplace>
    <template #display>
        {{ text || 'Click to Edit' }}
    </template>
    <template #content="{ closeCallback }">
        <span class="inline-flex items-center gap-2">
            <InputText v-model="text" autofocus />
            <Button icon="pi pi-times" text severity="danger" @click="closeCallback" />
        </span>
    </template>
</Inplace>

图像 #

任何内容（例如图像）都可以放置在原位内。

查看照片


<Inplace>
    <template #display>
        <span class="inline-flex items-center gap-2">
            <span class="pi pi-image"></span>
            <span>View Photo</span>
        </span>
    </template>
    <template #content>
        <img class="w-full sm:w-80 shadow-md" alt="Nature" src="https://primefaces.org/cdn/primevue/images/nature/nature8.jpg" />
    </template>
</Inplace>

懒加载 #

open 事件用于初始化内容，例如以懒加载方式加载数据。

查看数据


<Inplace @open="loadData">
    <template #display> View Data </template>
    <template #content>
        <DataTable :value="products">
            <Column field="code" header="Code"></Column>
            <Column field="name" header="Name"></Column>
            <Column field="category" header="Category"></Column>
            <Column field="quantity" header="Quantity"></Column>
        </DataTable>
    </template>
</Inplace>

可访问性 #

屏幕阅读器

原位组件默认将 aria-live 定义为“polite”，因为任何有效的属性都将传递给主容器，并且可以轻松自定义根元素的 aria 角色和属性。

查看模式键盘支持

按键	功能
回车	切换到内容。

原位