文档章节

WijmoJS 以声明方式添加 Vue 菜单项

葡萄城技术团队
 葡萄城技术团队
发布于 09/19 15:33
字数 1329
阅读 20
收藏 1

在V2019.0 Update2 的全新版本中,Vue框架下 WijmoJS 的前端UI组件功能得到再度增强。

如今,向wj菜单组件添加项的方法将不限于:将其绑定到菜单项数据数组。

以声明方式添加 Vue 菜单项

此前,要自定义项目的外观,您必须使用formatItem事件并在JS代码中生成其内容。但是当您在Vue模板中创建UI时,这种方法(其中一部分菜单必须在模板中定义,而另一部分应该在代码隐藏块中创建)看起来并不方便。介于此,您可能更倾向于这种方式:在模板的同一位置中定义菜单及其项目。

使用 WijmoJS ,通过 @grapecity/wijmo.vue2.input 模块中的新wj-menu-item组件即可实现这一点。

您现在可以使用嵌套到其wj菜单的wj-menu-item组件,而不是在数组中定义项目。每个wj-menu-item均可定义一个单独的菜单项,可以是包含任意复杂性的内容,也可以是绑定了其他组件的内容。

除了定义单独的菜单项外,还可以使用wj-menu-separator组件在菜单项之间插入分隔符。

例如,此示例中的以下Vue标记定义了具有丰富内容的菜单项,并在退出项之前使用分隔符:

```

<wj-menu :header="'File'" :itemClicked="menuItemClicked">

    <wj-menu-item>

        <span class="glyphicon glyphicon-asterisk"></span>&nbsp;&nbsp;

        <b>New</b>

        <br>

        <small><i>create a new file</i></small>

    </wj-menu-item>

    <wj-menu-item>

        <span class="glyphicon glyphicon-folder-open"></span>&nbsp;&nbsp;

        <b>Open</b>

        <br>

        <small><i>open an existing file or folder</i></small>

    </wj-menu-item>

    <wj-menu-item>

        <span class="glyphicon glyphicon-floppy-disk"></span>&nbsp;&nbsp;

        <b>Save</b>

        <br>

        <small><i>save the current file</i></small>

    </wj-menu-item>

    <wj-menu-separator></wj-menu-separator>

    <wj-menu-item>

        <span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;

        <b>Exit</b>

        <br>

        <small><i>exit the application</i></small>

    </wj-menu-item>

</wj-menu>

```

您还可以在Vue v-for指令的帮助下,从定义其数据的项目数组中动态生成多个wj-menu-item。

例如,下面的示例是从调色板数组中生成菜单项:

```

<wj-menu

    :header="'Palette'"

    :value="selectedPalette"

    :itemClicked="selectedPaletteChanged">

    <wj-menu-item :value="palette.name" v-for="palette in palettes">

        <div>

           

            <span style='float: right'>

                <div

                    v-for="color in palette.colors"

                    v-bind:style="{

                        backgroundColor: color,

                        display:'inline',

                        padding:'2px',

                        height:'10px',

                        width:'3px'                      

                    }">

                </div>

            </span>

        </div>

    </wj-menu-item>

</wj-menu>

```

请注意,此处的wj-menu组件未使用其itemsSource属性绑定到数据数组。相反,它直接从数据数组中生成子wj-menu-item组件。

命令(Command)

您现在可以以声明的方式,定义绑定带参数/命令的菜单项。wj-menu-item组件从其接口中公开cmd和cmdParam属性,这些属性可以分别绑定菜单项的命令及其参数。

下面的代码示例,演示了如何使用这些属性来定义递增或递减的菜单项。每个项目表示作为命令参数指定的不同增量值:

```

<wj-menu id="changeTax" :header="'Tax Commands'">

    <wj-menu-item :cmd="command" :cmdParam="0.50">Increment by 50%</wj-menu-item>

    <wj-menu-item :cmd="command" :cmdParam="0.25">Increment by 25%</wj-menu-item>

    <wj-menu-item :cmd="command" :cmdParam="0.05">Increment by 5%</wj-menu-item>

    <wj-menu-separator></wj-menu-separator>

    <wj-menu-item :cmd="command" :cmdParam="-0.05">Decrement by 5%</wj-menu-item>

    <wj-menu-item :cmd="command" :cmdParam="-0.25">Decrement by 25%</wj-menu-item>

    <wj-menu-item :cmd="command" :cmdParam="-0.50">Decrement by 50%</wj-menu-item>

</wj-menu>

```

值选择器(Value Picker)

wj-menu组件现在可以用作值选择器。

wj-menu-item组件的value属性包含与该项关联的值。wj-menu本身具有value属性,其值显示在菜单标题旁边,此属性可以绑定到父组件状态,其中itemClicked事件可用于更新与所选菜单项相关联的值的状态。

此示例演示了用于选择浏览器名称的菜单:

```

Template:

<wj-menu

        :header="'Run'"

        :value="browser"

        :itemClicked="splitButtonItemClicked">

    <wj-menu-item :value="'IE'">Internet Explorer</wj-menu-item>

    <wj-menu-item :value="'Chrome'">Chrome</wj-menu-item>

    <wj-menu-item :value="'FF'">FireFox</wj-menu-item>

    <wj-menu-item :value="'Safari'">Safari</wj-menu-item>

    <wj-menu-item :value="'Opera'">Opera</wj-menu-item>

</wj-menu>

JavaScript:

splitButtonItemClicked: function(menu) {

    this.browser = menu.selectedItem.value;

}

```

结论

随着wj-menu-item和wj-menu-separator组件的引入,使用WijmoJS前端开发工具包,在Vue应用程序中定义菜单将变得更加容易。

如今,您可以在组件模板中定义包含其整个项目的菜单,该项目可以包含丰富的内容,也可以包含HTML元素或其他绑定的组件。

 

关于 WijmoJS 前端开发工具包

WijmoJS 前端开发工具包由多款灵活高效、零依赖、轻量级的纯前端控件组成,如表格控件 FlexGrid、图表控件 FlexChart、数据分析 OLAP 等,完美支持原生 JavaScript,以及 Angular、React、Vue、TypeScript、Knockout 和 Ionic 等框架,可用于企业快速构建桌面、移动 Web 应用程序。

借助葡萄城深厚的技术底蕴,WijmoJS 致力于为各领域用户提供更稳定、更高效的前端开发工具。产品自面市以来,已在招商银行、微软 Dynamics 项目、思科、特斯拉、富士通等知名企业中得以成功应用。WijmoJS 凭借其先进的体系架构、简单易学的使用文档、超过 500 种 Demo 演示、顶级的控件性能,以及轻松、易用的操作体验,可全面满足企业前端开发所需,是构建企业级 Web 应用程序最高效的纯前端开发工具包。

© 著作权归作者所有

葡萄城技术团队

葡萄城技术团队

粉丝 409
博文 586
码字总数 906326
作品 20
西安
高级程序员
私信 提问
WijmoJS V2019.0 Update2 发布:增强 React 和 Vue 组件功能

前端开发工具包 WijmoJS 在2019年的第二个主要版本 V2019.0 Update2 已经发布,本次发布涵盖了React 和 Vue 框架下 WijmoJS 前端组件的功能增强,并加入更为易用且灵活的撤消/重做功能和模板...

葡萄城技术团队
09/19
371
0
用WijmoJS玩转您的Web应用——Vue

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/powertoolsteam/article/details/80813874 概述 在本文中,我们将展示如何将WijmoJS与NPM和Webpack一起使用来...

powertoolsteam
2018/06/26
0
0
WijmoJS 中自定义 React 菜单和列表项模板

在V2019.0 Update2 的全新版本中,React 框架下 WijmoJS 的前端UI组件功能再度增强。 WijmoJS的菜单和类似列表的控件(ListBox、ComboBox、MultiSelect)允许用户在 formatItem 事件中使用 ...

葡萄城技术团队
09/19
15
0
Wijmo 2018V2发布,提供可视化设计器,在React、Vue和Angular中的更易用

作为一款纯前端控件集,Wijmo 秉承“快如闪电,触控优先”的设计理念,在提供优质服务和产品的同时,专注于企业应用开发,不断优化产品架构,与时俱进。除在全球率先支持 AngularJS 外,现已...

葡萄城技术团队
2018/12/26
196
0
前端开发工具包 - WijmoJS

灵活高效的前端开发工具包 可快速搭建企业 Web 应用程序 WijmoJS 前端开发工具包由多款高效、灵活的纯前端控件组成,全面支持 Angular、React、Vue、TypeScript、Knockout 和 Ionic 框架,用...

葡萄城技术团队
06/12
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法

下面的元素属性和元素方法都通过 elem.属性 或 elem.方法 的方式使用,window属性通过 window.属性 的方式使用,document属性则通过document调用: <script> /* ****** 元素视图属性 * offs...

Bing309
8分钟前
3
0
Apache Kafka快速入门指南

简介 Kafka是基于发布订阅的消息系统。最初起源于LinkedIn,于2011年成为开源Apache项目,然后于2012年成为Apache顶级项目。Kafka用Scala和Java编写,因其分布式可扩展架构及可持久化、高吞吐...

AiChinaTech
10分钟前
2
0
Discrete Cosine Transform [DCT] (离散余弦变换)

Discrete Cosine Transform [DCT] (离散余弦变换)

divenwu
11分钟前
2
0
如何玩转 TiDB 性能挑战赛?本文教你 30 分钟快速上手拿积分!

作者:wish 上周我们正式宣布了 TiDB 性能挑战赛。在赛季内,通过向 TiDB、TiKV、PD 贡献代码完成指定类别任务的方式,你可以获得相应的积分,最终你可以使用积分兑换礼品或奖金。在性能挑战...

TiDB
12分钟前
2
0
12、SpringMVC数据回显

数据回显方法 1.springmvc默认对pojo数据进行回显。 pojo数据传入controller方法后,springmvc自动将pojo数据放到request域,key等于pojo类型(首字母小写) 使用@ModelAttribute指定pojo回显...

快乐的瓶子
13分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部