Beet‎le‎X.‎AdminUI介绍

来源:m-dot.com   作者:   发表时间:2020-02-12 11:16:02

BeetleX.AdminUI是基于Beetlexjs Vuejs Bootstrap相结合的后台管理框架,主要介绍在不使用Webpack的情况下,如何用VS来开发一个单页面的Web后台管理应用。如果你喜欢用Vuejs Html,那通过这个示例你可以更好的了解Vuejs Html的使用。在介绍之前先看一下效果:

在开发过程中虽然没有和Webpack,不过模式还是遵循组件化方式进行处理;通过这个示例让不想使用Webpack的开发人员可以使用另一种途径来进行开发Vue前端应用。

这种模式没有app.js,取而代之的是一个index.html,这个页面主要是用于描述界面的主体布局,具体如下:

布局很简单包括有主菜单,页脚,窗体栏和主内容显示.主页面的功能很简单,主要用来管理切换窗体,新建窗体和关闭窗体即可;详细代码如下:

这个组件主要描述窗体的标签,解决窗体的切换功能​;具体Vue模块如下:

这个组件包括了一些简单的行为,选择窗体$open(item.id,item.title,item.model)和关闭窗体OnClose(item);还有一个行为就是根据主菜单的样式来调整自己的占比宽度。详细的功能代码如下:

主菜单主要用于描述关键模块窗体,它有两种展示模式分别是:全显示和只显示功能图标

主菜单的主要功能就是告诉页面需要打开那个模块,具体代码如下:

这样一个能支持多模块显示切换的主页就完成了,接下来的工作就是实现相关子模块,由于这个示例的子模块比较多就不一一介绍,只是抽取个别来介绍。

编辑:

未经授权许可,不得转载或镜像
© Copyright © 1997-2019 by m-dot.com all rights reserved