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中文网！

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

UI组件库Kendo UI for Vue中文入门指南（二）
在本文中,您将通过构建一个包含 Grid.DropDownList.Window 和设计主题的小应用程序来学习如何使用Kendo UI for Vue组件. Kendo UI最新官方正式版下载 5. ...
UI组件库Kendo UI for Vue中文入门指南（一）
在本文中,您将通过构建一个包含 Grid.DropDownList.Window 和设计主题的小应用程序来学习如何使用Kendo UI for Vue组件. Kendo UI最新官方正式版下载 1. ...
UI组件库Kendo UI for Vue原生组件中文 - 按钮概述
Kendo UI for Vue Buttons包提供了代表用户可以采取的简单操作的触发器组件. Buttons package是Kendo UI for Vue库的一部分,它为Vue生态系统提供原生 ...
jQuery UI组件库Kendo UI使用技巧小分享
Kendo UI for jQuery R3 2020 SP1试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI ...
Vue UI组件库(Element UI库)
1 移动端常用 UI 组件库 1. Vant Vant 4 - 轻量.可定制的移动端组件库 (vant-ui.github.io) 2. Cube UI cube-ui Document (didi ...
React UI 组件库 Chakra UI - 01 v1.0介绍和快速使用
Chakra UI Chakra UI 是简单.模块化和可访问的 UI 组件库. 本文 Chakra UI 版本:v1.6.2 基于 React 和 Emotion(CSS-IN-JS 方案库) 基于 ...
React UI 组件库 Chakra UI - 05 案例实践
案例实践使用 create-react-app 新建项目. 表单使用 Chakra UI 实现下图的表单: 构建注册表单 react-icons 是一个 React 流行图标库. // compo ...
React UI 组件库 Chakra UI - 02 颜色模式
Color Mode 颜色模式 Chakra UI 内置支持管理应用程序的颜色模式,默认可配置的颜色模式有浅色模式(light).暗色模式(dark).系统模式(system). 大部分组件默认都支持 ...
React UI 组件库 Chakra UI - 03主题对象和 chakra factory
主题对象使用 Chakra UI 默认主题对象中包含很多样式的预设值. 打印 theme 对象: 在使用样式属性设置样式的时候,Chakra 会先从主题对象中获取对应的预设值,如果不存在,则将值作为 ...

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

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

最新文章

热门文章