在第九篇中我们使用路由控制器成功的加载出了welcome.html到页面上
不过welcome是欢迎页，一个软件的制作还是要从工作区开始制作
开始制作工作区
工作区是这个项目的核心，先从核心开始制作，后续的其余功能围绕核心功能来实现
暂时的设想是工作区布局和webstrom布局类似
左侧有一个功能栏目，点击功能栏目中的按钮会弹出一个功能区，中间是编辑区，后面可能会考虑在右边放一个设置区
开发工作区页面
在./src/component中增加layout.html文件
<div class="layout">
<div class="side-bar"></div>
<div class="left side-view"></div>
<div class="center working-view"></div>
</div>
side-bar为最左侧功能栏
side-view为左侧功能栏弹出的功能区
working-view为中间工作区
实现工作区控制器
在./src/controller中增加
layout.controller.ts
woringview.controller.ts
sidebar.controller.ts
这三个文件
// layout.controller.ts
import BaseController from './base.controller';
import * as $ from 'jquery';
import html from '../component/layout.html';
import WorkingviewController from './workingview.controller'
import {pageOption} from '../interface/pageOption.interface'
import SidebarController from "./sidebar.controller";
export default class LayoutController extends BaseController{
private option: pageOption;
constructor(option: pageOption) {
super();
this.option = option;
this.init();
}
private init(){
$(this.option.el).html(<string>html);
let workingView = new WorkingviewController('.working-view');
let sidebar = new SidebarController('.side-bar');
}
}
将页面渲染到页面中，不要忘记修改路由配置，让layout.html默认加载到页面中
// routerConfig.class.ts
//...
private static readonly pageList = [
{name: '/welcome', controll: WelcomeController},
{name: '/', controll: LayoutController}
];
//...
实现左边功能栏控制器
// sidebar.controller.ts
import BaseController from './base.controller';
import * as $ from 'jquery'
type sidebarItem = {
name: string,
controller: any,
icon: string,
show: boolean,
}
export default class SidebarController extends BaseController {
private readonly el:string;
private targetInstance: any;
private targetIndex: number;
public static readonly sidebarItemList:sidebarItem[] = [
];
constructor(el:string){
super();
this.el = el;
this.init();
}
private init(){
}
基础代码实现了之后，我们就需要考虑这个功能栏需要有哪些功能了
从功能呢角度分析，左边的功能栏需要有一个可配置的标签数组，这一点在代码中已经有了实现 sidebarItem用来储存配置的功能标签
鼠标移入标签要有一个高亮的效果，点击某一个标签会弹出对应标签的功能区，功能区处于激活状态时标签也要处于高亮状态，鼠标移入的高亮我们可以考虑使用css的hover来实现，点击之后给标签加一个active的class，点击的同时还需要实例化对应功能区的控制器，接下来开始实现具体代码
暂定功能标签有：组件库 图层
- 组件库：包含所有可选组件
- 图层：可以快速分析元素层级关系
在sidebarItem中增加配置
public static readonly sidebarItemList:sidebarItem[] = [
{name: '组件库', controller: ItemviewController, icon: 'fa-home', show: true},
{name: '图层', controller: LayersController, icon: 'fa-files-o', show: true},
];
渲染方法
private renderList(){
let renderString = '';
for(let k of SidebarController.sidebarItemList){
if(!k.show) continue;
let str = `<div class="side-bar-item">
<i class="fa ${k.icon}"></i>
${k.name.split('').map(v => `<span>${v}</span>`).join('')}
</div>`;
renderString += str;
}
$(this.el).append(renderString);
}
点击每个标签便签会弹出功能区，也就是说，每个功能区控制器渲染元素是渲染到同一个标签中的，那么控制这个标签弹出收起的方法，我们单独抽离出来
public openOrCloseSideView(type: 'open' | 'close') {
if (type === 'open') {
$('.side-view').css('width', '300px');
} else if (type === 'close') {
$('.side-view').css('width', '0px');
}
}
接下来给每个元素绑定点击事件
private bindEvent() {
let parentNode = $(this.el);
let sonNode = parentNode.find('.side-bar-item');
sonNode.each((i, v) => {
$(v).on('click', () => {
sonNode.each(function (ii, vv) {
$(vv).removeClass('active');
});
if (this.targetIndex === i) {
this.targetInstance && this.targetInstance.destory();
this.targetIndex = -1;
this.openOrCloseSideView('close');
} else {
$(v).addClass('active');
this.targetInstance && this.targetInstance.destory();
this.targetInstance = new SidebarController.sidebarItemList[i].controller('.side-view');
this.targetIndex = i;
this.openOrCloseSideView('open');
}
})
});
}
在renderList中调用
private renderList(){
// ...
this.bindEvent(); // 绑定点击事件
}
这样点击方法就完成了，下一篇我们继续开发左边功能区
放一张现阶段效果图
此致
敬礼~
小旋风
我建了一个前端微信交流群，欢迎大家加入，qq中转群号：1076484243
