在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,为您的企业应用提供更加灵活的操作体验,在全球率先支持 AngularJS,并提供性能卓越、零依赖的 FlexGrid 和金融图表等多个控件,为您提供易用、轻松的操作体验,全面满足开发所需。

您对WijmoJS产品的任何技术问题,都有技术支持工程师提供1对1专业解答,点击此处即可发帖提问>>