返回WPSJS目录

文章 / WPSJS

用Vue+Element写EasyShu网页图表配置窗体,交互流畅,颜值还行。

辛苦学习网页开发,回报终于来了,在EasyShu近期推出的几大图表中,已经可以顺利转型为使用网页来进行属性配置了。可以为下一步作兼容WPS推出WPS版本的图表插件作准备,一次开发,多次复用。 ​ 在WinForm里使用网页图表作配置,整个思路如下: 一、在WinForm里插入网页控件,网页控件读取的

辛苦学习网页开发,回报终于来了,在EasyShu近期推出的几大图表中,已经可以顺利转型为使用网页来进行属性配置了。可以为下一步作兼容WPS推出WPS版本的图表插件作准备,一次开发,多次复用。

​

在WinForm里使用网页图表作配置,整个思路如下:

一、在WinForm里插入网页控件,网页控件读取的网页就是用来进行配置的表单窗体网页。

二、初始化WinForm窗体时,读取当前图表状态信息,将其作为配置信息传入网页表单模板中(不同时期调用窗体,网页内容不一样,例如用户已经修改过部分属性后的,下次初始化时,理当将这些信息更新到网页窗体中)。

三、在网页窗体中使用.NET回调函数,即JS访问.NET方法,将网页上的最终表单信息回传给winForm的方法接收。

四、根据回传过来的配置信息(json字符串)在winForm里再写逻辑处理更新对应图表内容。

​

上述的方法具体实现,可以参考EasyShu的最新图表象形图表,截取几个图片简单说明下里面有到的控件。

控件库使用了ElementUI。

image.png

image.png

​

Vue的开发方式好处在于,界面是由数据驱动,无需写一大堆事件去控制界面事件。

​

界面控件的初始化状态由一个json数据对象直接控制,无需一个个控件去绑定初始化值。

​

同时最终控件经用户交互后的数据,直接在一个json对象中一次性获取到,无需一个个控件去获取,非常高效。

​

欢迎下载EasyShu学习观摩,本篇技术要点非传统网页前端开发的众多复杂技术,仅仅需要入门一下VUE和Element即可用起来。

​

因为仅在本地html上使用,没有文件加载速度问题,无需知道什么模块化开发、打包等之类的复杂技术。

​

EasyShu的下载地址:https://www.yuque.com/easyshu/helpdocument/dzg5gz

​