在本文中，您將通過(guò)構(gòu)建一個(gè)包含 Grid、DropDownList、Window 和設(shè)計(jì)主題的小應(yīng)用程序來(lái)學(xué)習(xí)如何使用Kendo UI for Vue組件。

Kendo UI最新官方正式版下載

7. 添加一個(gè)Kendo UI for Vue窗口

products 數(shù)組包含一些未顯示在網(wǎng)格中的字段。 在本節(jié)中，您將使用Kendo UI for Vue Window在用戶選擇網(wǎng)格行時(shí)顯示這些附加產(chǎn)品詳細(xì)信息。

以下是所需的步驟，首先導(dǎo)入Window組件：

import { Window } from '@progress/kendo-vue-dialogs';

export default {
name: 'App',
components: {
//..............
'window': Window
},
//..............

接下來(lái)，定義新的 windowVisible 和 gridClickedRow 數(shù)據(jù)屬性。

data: function() {
return {
//..............
gridClickedRow:{},
windowVisible: false
}
}

接下來(lái)，將添加到 Grid。

<grid @rowclick="rowClick">
//..............
</grid>

之后，添加下面的rowClick函數(shù)，它將windowVisible標(biāo)志設(shè)置為true，并將被點(diǎn)擊行的數(shù)據(jù)項(xiàng)分配給gridClickedRow屬性，您將使用數(shù)據(jù)項(xiàng)值來(lái)呈現(xiàn) Window 的內(nèi)容。

methods: {
//..............
rowClick (event){
this.windowVisible=true;
this.gridClickedRow=event.dataItem;
}
//..............
}

接下來(lái)，添加以下 Window 聲明。 （在模板中的 Grid 定義之后立即添加它。）請(qǐng)注意僅當(dāng) windowVisible 標(biāo)志值為 true 時(shí)才會(huì)呈現(xiàn) Window。

<window v-if="windowVisible" :title="'Product Details'" @close="closeWindow" :height="250">
<dl style="{textAlign:left}">
<dt>Product Name</dt>
<dd>{{gridClickedRow.ProductName}}</dd>
<dt>Product ID</dt>
<dd>{{gridClickedRow.ProductID}}</dd>
<dt>Quantity per Unit</dt>
<dd>{{gridClickedRow.QuantityPerUnit}}</dd>
</dl>
</window>

最后，添加以下 Window 關(guān)閉處理程序，當(dāng)用戶關(guān)閉 Window 時(shí)，它將 windowVisible 標(biāo)志設(shè)置為 false。

methods: {
//..............
closeWindow (){
this.windowVisible=false;
}
}

使用此代碼，嘗試點(diǎn)擊網(wǎng)格中的一行，您應(yīng)該會(huì)看到一個(gè)帶有附加產(chǎn)品信息的自定義窗口。

再一次注意這個(gè)功能的實(shí)現(xiàn)是多么簡(jiǎn)單，使用Kendo UI for Vue，您可以獲得一組易于插入的Vue 組件——在這種情況下，構(gòu)建一個(gè)可定制的跨瀏覽器友好的窗口，這就是Kendo UI for Vue的強(qiáng)大之處。

8. 激活您的試用或商業(yè)許可證

Kendo UI for Vue是一個(gè)專業(yè)開發(fā)的庫(kù)，在商業(yè)許可下分發(fā)。 從版本 2.0.0 開始，使用 Kendo UI for Vue 庫(kù)中的任何 UI 組件都需要商業(yè)許可證密鑰或有效的試用許可證密鑰。請(qǐng)按照Kendo UI for Vue My License頁(yè)面上的說(shuō)明激活您的許可證。

9. 完整的源代碼

Kendo UI for Vue Getting Started應(yīng)用程序已完成！ 您可以從 kendo-vue-examples GitHub 存儲(chǔ)庫(kù)下載并運(yùn)行完整的示例應(yīng)用程序，或者直接在StackBlitz 中運(yùn)行、派生和試驗(yàn)應(yīng)用程序。

• 如果您使用的是 Vue 2，中實(shí)現(xiàn)的同一項(xiàng)目的鏈接。

10. VSCode 擴(kuò)展

為了幫助您更快地創(chuàng)建項(xiàng)目，我們引入了 。

Kendo UI for Vue | 下載試用

Kendo UI致力于新的開發(fā)，來(lái)滿足不斷變化的需求。Kendo UI for Vue使用旨在提高性能和豐富用戶體驗(yàn)的Vue組件，幫助開發(fā)人員構(gòu)建下一代應(yīng)用程序。它是為Vue技術(shù)框架提供可用的Kendo UI組件，以便更快地構(gòu)建更好的Vue應(yīng)用程序。

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進(jìn)群討論