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

在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>

New

create a new file

</wj-menu-item>

<wj-menu-item>

Open

open an existing file or folder

</wj-menu-item>

<wj-menu-item>

Save

save the current file

</wj-menu-item>

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

<wj-menu-item>

Exit

exit the application

</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>

<div

v-for="color in palette.colors"

v-bind:style="{

backgroundColor: color,

display:'inline',

padding:'2px',

height:'10px',

width:'3px'

}">

</div>

</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 应用程序最高效的纯前端开发工具包。