UI组件库Kendo UI for Vue中文入门指南（四）

在本文中，您将通过构建一个包含 Grid、DropDownList、Window 和设计主题的小应用程序来学习如何使用Kendo UI for Vue组件。

Kendo UI最新官方正式版下载

7. 添加一个Kendo UI for Vue窗口

products 数组包含一些未显示在网格中的字段。 在本节中，您将使用Kendo UI for Vue Window在用户选择网格行时显示这些附加产品详细信息。

以下是所需的步骤，首先导入Window组件：

import { Window } from '@progress/kendo-vue-dialogs';
 
export default {
name: 'App',
components: {
//..............
'window': Window
},
//..............

接下来，定义新的 windowVisible 和 gridClickedRow 数据属性。

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

接下来，将row click handler添加到 Grid。

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

之后，添加下面的rowClick函数，它将windowVisible标志设置为true，并将被点击行的数据项分配给gridClickedRow属性，您将使用数据项值来呈现 Window 的内容。

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

接下来，添加以下 Window 声明。 （在模板中的 Grid 定义之后立即添加它。）请注意仅当 windowVisible 标志值为 true 时才会呈现 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 关闭处理程序，当用户关闭 Window 时，它将 windowVisible 标志设置为 false。

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

使用此代码，尝试点击网格中的一行，您应该会看到一个带有附加产品信息的自定义窗口。

再一次注意这个功能的实现是多么简单，使用Kendo UI for Vue，您可以获得一组易于插入的Vue 组件——在这种情况下，构建一个可定制的跨浏览器友好的窗口，这就是Kendo UI for Vue的强大之处。

8. 激活您的试用或商业许可证

Kendo UI for Vue是一个专业开发的库，在商业许可下分发。 从版本 2.0.0 开始，使用 Kendo UI for Vue 库中的任何 UI 组件都需要商业许可证密钥或有效的试用许可证密钥。请按照Kendo UI for Vue My License页面上的说明激活您的许可证。

9. 完整的源代码

Kendo UI for Vue Getting Started应用程序已完成！ 您可以从 kendo-vue-examples GitHub 存储库下载并运行完整的示例应用程序，或者直接在StackBlitz 中运行、派生和试验应用程序。

• 如果您使用的是 Vue 2，这里是指向在 Vue 2 上下文中实现的同一项目的链接。

10. VSCode 扩展

为了帮助您更快地创建项目，我们引入了 Kendo UI VS Code Template Wizard。

Kendo UI for Vue | 下载试用

Kendo UI致力于新的开发，来满足不断变化的需求。Kendo UI for Vue使用旨在提高性能和丰富用户体验的Vue组件，帮助开发人员构建下一代应用程序。它是为Vue技术框架提供可用的Kendo UI组件，以便更快地构建更好的Vue应用程序。

---

Telerik_KendoUI产品技术交流群：726377843    欢迎一起进群讨论

了解最新Kendo UI最新资讯，请关注Telerik中文网！