File
Implements
Metadata
| selector |
app-component-maker |
| styleUrls |
./component-maker.component.less |
| templateUrl |
./component-maker.component.html |
Methods
|
Public
ngOnInit
|
ngOnInit()
|
|
|
|
|
|
Public
onLessChange
|
onLessChange()
|
|
|
|
|
|
Public
onTemplateChange
|
onTemplateChange()
|
|
|
|
|
|
Public
saveCancel
|
saveCancel()
|
|
|
|
|
|
Public
isSaveLoading
|
Default value : false
|
|
|
|
Public
isSaveVisible
|
Default value : false
|
|
|
import { Component, OnInit } from '@angular/core';
import { NzModalService } from 'ng-zorro-antd/modal';
import { HtmlBuilderSettingService } from '../html-builder-setting.service';
import { ComponentMakerService } from './component-maker.service';
@Component({
selector: 'app-component-maker',
templateUrl: './component-maker.component.html',
styleUrls: ['./component-maker.component.less'],
})
export class ComponentMakerComponent implements OnInit {
public isSaveVisible = false;
public isSaveLoading = false;
constructor(
public componentMakerService: ComponentMakerService,
private modalService: NzModalService,
public settingService: HtmlBuilderSettingService,
) { }
// 监听样式编辑框
public onLessChange() {
// less转成css，嵌入到模拟器中
this.componentMakerService.lessToCss();
}
// 监听模板编辑框
public onTemplateChange() {
// less转成css，嵌入到模拟器中
this.componentMakerService.templateToHtml();
}
// 弹出组件保存表单
public onSave() {
this.isSaveVisible = true;
}
// 保存组件
public saveOk(): void {
this.isSaveLoading = true;
setTimeout(() => {
this.componentMakerService.saveComponent();
this.isSaveVisible = false;
this.isSaveLoading = false;
}, 2000);
}
// 取消组件保存
public saveCancel(): void {
this.isSaveVisible = false;
}
// 重置组件
public onReset() {
this.modalService.confirm({
nzTitle: '重置组件所有状态',
nzContent: '这是一个危险操作，会丢失当前的组件模板和样式！',
nzOkType: 'danger',
nzOnOk: () => this.componentMakerService.init(),
});
}
public ngOnInit(): void {
}
}
<nz-sider nzWidth="800" nzTheme="light">
<h4 nz-title>HTML编辑器</h4>
<p nz-text>在下方编辑组件的HTML代码，右侧可以预览效果。</p>
<ngx-codemirror [(ngModel)]="componentMakerService.componentTemplate" [options]="{
lineNumbers: true,
theme: 'material',
mode: 'htmlmixed'
}" (ngModelChange)="onTemplateChange()"></ngx-codemirror>
<br />
<h4 nz-title>CSS编辑器</h4>
<p nz-text>在下方编辑组件的CSS代码，支持LESS语法。</p>
<ngx-codemirror [(ngModel)]="componentMakerService.componentLess" [options]="{
lineNumbers: true,
theme: 'material',
mode: 'text/x-less'
}" (ngModelChange)="onLessChange()"></ngx-codemirror>
</nz-sider>
<nz-layout class="inner-layout">
<div class="tools-button">
<button nz-button nzType="primary" (click)="onSave()">保存组件</button>
<button nz-button nzType="danger" (click)="onReset()">重置组件</button>
<nz-radio-group [(ngModel)]="settingService.previewMode" class="right">
<label nz-radio-button nzValue="pc">电脑</label>
<label nz-radio-button nzValue="iPhoneSmall">iPhone XS</label>
<label nz-radio-button nzValue="iPhoneLarge">iPhone XS Max</label>
</nz-radio-group>
</div>
<nz-content>
<div hidden [innerHTML]="componentMakerService.safeStyleTag"></div>
<div class="inner-content"
[ngClass]="{'fix-phone-w375': settingService.previewMode === 'iPhoneSmall','fix-phone-w414': settingService.previewMode === 'iPhoneLarge'}"
[innerHTML]="componentMakerService.componentHtml">
</div>
</nz-content>
</nz-layout>
<!-- 组件保存表单 -->
<nz-modal [(nzVisible)]="isSaveVisible" nzTitle="保存组件" (nzOnCancel)="saveCancel()" (nzOnOk)="saveOk()"
[nzOkLoading]="isSaveLoading">
<p>Modal Content</p>
</nz-modal>
nz-sider {
overflow: auto;
height: 100%;
position: fixed;
left: 0;
width: 800px;
padding: 16px;
}
.sider-menu {
height: 100%;
border-right: 0;
}
.inner-layout {
padding: 0 24px 24px;
margin-left: 800px;
}
nz-content {
background-color: transparent;
}
.inner-content {
background: #fff;
padding: 16px;
min-height: 1024px;
}
/* 工具栏 */
.tools-button {
padding: 8px 24px;
position: sticky;
top: 64px;
background-color: #fff;
box-shadow: 0px 1px 0 #eee;
margin: 0 -24px 24px;
border-left: 1px solid #f1f1f1;
z-index: 100;
}
[nz-button] {
margin-right: 8px;
}
Legend
Html element with directive