69 lines
2.6 KiB
Vue
Executable File
69 lines
2.6 KiB
Vue
Executable File
<template>
|
|
<div>
|
|
<Head>
|
|
<Title>Vue Deferred Content Component</Title>
|
|
<Meta name="description" content="DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll." />
|
|
</Head>
|
|
|
|
<div class="content-section introduction">
|
|
<div class="feature-intro">
|
|
<h1>DeferredContent</h1>
|
|
<p>DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll.</p>
|
|
</div>
|
|
<AppDemoActions />
|
|
</div>
|
|
|
|
<div class="content-section implementation">
|
|
<div class="card">
|
|
<div style="height: 800px">Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.</div>
|
|
|
|
<DeferredContent @load="onImageLoad">
|
|
<img src="/demo/images/nature/nature4.jpg" alt="Nature" />
|
|
</DeferredContent>
|
|
|
|
<div style="height: 500px"></div>
|
|
|
|
<DeferredContent @load="onDataLoad" role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
|
|
<DataTable :value="products" responsiveLayout="scroll">
|
|
<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>
|
|
</DeferredContent>
|
|
</div>
|
|
</div>
|
|
|
|
<DeferredContentDoc />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ProductService from '../../service/ProductService';
|
|
import DeferredContentDoc from './DeferredContentDoc';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
products: null
|
|
};
|
|
},
|
|
productService: null,
|
|
created() {
|
|
this.productService = new ProductService();
|
|
},
|
|
methods: {
|
|
onImageLoad() {
|
|
this.$toast.add({ severity: 'success', summary: 'Image Initialized', detail: 'Scroll down to load the datatable' });
|
|
},
|
|
onDataLoad() {
|
|
this.productService.getProductsSmall().then((data) => (this.products = data));
|
|
this.$toast.add({ severity: 'success', summary: 'Data Initialized', detail: 'Render Completed' });
|
|
}
|
|
},
|
|
components: {
|
|
DeferredContentDoc: DeferredContentDoc
|
|
}
|
|
};
|
|
</script>
|