提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
转帖|行业资讯|编辑:陈津勇|2019-09-23 10:32:01.847|阅读 143 次
概述:在HTML5/JavaScript UI控件WijmoJS v2019.2的全新版本中,Vue框架下WijmoJS的前端UI组件功能得到再度增强。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
如今,向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> <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> <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> <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> <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元素或其他绑定的组件。
想要获得 WijimoJS 更多资源或正版授权的伙伴,
扫描关注慧聚IT微信公众号,及时获取最新动态及最新资讯
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
文章转载自:通过提供强大的3D CAD数据访问工具并适用于桌面、移动和Web的高级环境3D可视化发动机,HOOPS在提升造船设计和制造流程的效率方面发挥了重要作用。
HOOPS Luminate在汽车行业中的应用具有广泛的潜力和深远的影响。它通过提供高效的3D可视化、虚拟装配与拆解、性能分析、客户定制等功能,帮助汽车制造商在设计、生产和销售过程中提升效率、降低成本并提高产品质量。
在不断发展的软件开发世界中,使工具和框架与最新的平台版本保持同步至关重要,欢迎查阅~
全球航运业对国际贸易至关重要,全球 90% 以上的商品通过海运运输。准确监控和控制这些集装箱的移动对于维持高效的供应链至关重要。手动输入集装箱号码是这一程序的关键部分,它带来了相当大的挑战,例如人为错误和效率低下。
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@pclwef.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢