Inplace

Inplace 提供一個簡單的方法來同時進行編輯和顯示，點擊輸出即可顯示實際內容。

導入 #


import Inplace from 'primevue/inplace';

基本 #

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>

Image #

任何內容（例如圖片）都可以放置在 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>

協助工具 #

螢幕閱讀器

Inplace 元件預設將 aria-live 定義為 "polite"，因為任何有效屬性都會傳遞到主要容器，而根元素的 aria 角色和屬性可以輕鬆自訂。

檢視模式鍵盤支援

按鍵	功能
enter	切換至內容。