Skip to content

前言

Tui 代码片段整理

支持常用组件HTML代码片段

支持常用组件TypeScript代码片段

代码片段的范围

Tui
angularHTML
typescript

安装

直接在VSCode商店搜索tui-snippets;

使用姿势

前缀解释

t-: t-加后面组件具体名称

代码片段涵盖的范围

TUI部分

指令	代码	描述
t-tip	tooltipPosition="bottom" [tTooltip]=""	Tui-tip提示
t-text	<input type="text" tInputText [(ngModel)]="" />	文本框
t-button	<t-button label="$1" (click)="$2">	普通提交按钮
t-button-nav	<button tButton type="button" class="ui-button-nav" icon="$1" label="$2">	工具栏按钮
t-checkbox	<t-checkbox [(ngModel)]="$1" binary="true">	复选框
t-radioButton	<t-radioButton [(ngModel)]="$1" value="$2" name="$3">	单选框
t-textarea	<textarea tInputTextarea [(ngModel)]="$1">	文本域
t-password	<input type="password" tPassword [(ngModel)]="$1" />	密码框
t-calendar	<t-calendar [(ngModel)]="$1">	日期组件
t-fileUpload	<t-fileUpload #fubauto mode="basic" name="" url="" accept="" maxFileSize="1000000" (onUpload)=""auto="true" chooseLabel="上传">	自动上传文件组件
t-input-switch	<t-inputSwitch [(ngModel)]="$1">	input开关
t-dropdown	<t-dropdown [options]="$1" [(ngModel)]="$2">	下拉框
t-multiSelect	<t-multiSelect [options]="$1" [(ngModel)]="$2">	下拉复选框
t-autoComplete	<t-autoComplete [(ngModel)]="$1" [suggestions]="$2">	输入组件，在输入时提供实时建议
t-splitButton	<t-splitButton label="$1" icon="pi pi-check" (onClick)="save()" [model]="items">	类似于下拉菜单的组件
t-toast	<t-toast [style]="{ marginTop: '80px' }" position="top-center" key="tc">	提示框
t-confirmDialog	<t-confirmDialog [style]="{ width: '252$1px' }">	询问框
t-paginator	<t-paginator [totalRecords]="$1" [rows]="$2" [jumpToPage]="true" [displayRecords]="true" [displayPages]="true" (onPageChange)="$3">	表格分页
t-breadcrumb	<t-breadcrumb [model]="$1">	面包屑组件
t-tabChange	<t-tabChanger [model]="$1" [useClose]="true">	菜单组件
t-loading	<t-loading loadType="routineLoding" bgColor="#fff" aPosition="absolute" baseZindex="100">	页面加载等待组件(推荐)
t-page-loading	`<t-page-loading></t-page-loading>`	数据加载loading
t-steps	<t-steps [model]="$1">	步骤组件
t-tree	<t-tree [value]="$1" [(selection)]="$2" (onNodeSelect)="selectedNode($3)" selectionMode="single" [clickExpand]="true">	树组件
t-dialog	`<t-dialog></t-dialog>`	弹出框组件
t-nodata		无数据组件
t-table		table组件

TypeScript部分

指令	代码	描述
t-a-error	this.messageService.add({key: 'tc', severity:'error', summary: '提示', detail: error.message.message$1});	error提示框
t-a-warn	this.messageService.add({key: 'tc', severity:'warn', summary: '提示', detail: $1})	warn提示框
t-a-success	this.messageService.add({key: 'tc', severity:'success', summary: '提示', detail: '$1'});	success提示框
t-subscribe	.subscribe()	接口调用提示(推荐)
t-confirm		询问框TS代码

angularHTML部分

指令	代码	描述
ng-container	`<ng-container>$1</ng-container>`	angular 内容包裹容器
ng-template	`<ng-template>$1</ng-template>`	angular 模板包裹容器

最后

此项目git地址