Vue2 + TypeScript 代码编写规范

1
2
3
4
5
6
7
8
9

<dialog-group-create
v-if="createVisible"
:visible-sync.sync="createVisible"
:groups="groups"
:type="type"
:style="`top: ${dragTop}px; left: ${dragLeft}px`"
@emit-operation-success="emitOperationSuccess"
></dialog-group-create>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { Component, Vue } from 'vue-property-decorator';
import CustomTablePagination from '@/components/custom/custom-table-pagination.vue';
import TabBar from '@/views/appres/cloudlist/tab-bar.vue';
import { TablePaginationMixin } from '@/mixins/TablePaginationMixin';
import { EnterKeyupMixin } from '@/mixins/EnterKeyupMixin';
import 'fullcalendar/dist/fullcalendar.css';
import { State } from 'vuex-class';
import VueMarkdown from 'vue-markdown';
import { appresHostMissingCol } from '@/utils/array/tableCol';
import { TableQueryClass } from '@/utils/class/CommonClass';
import { HostMissingDataClass } from '@/utils/class/AppresClass';
import { TenantClass } from '@/utils/class/TenantClass';
const docMD = require('./development.md');
@Component({
components: { CustomTablePagination, TabBar },
mixins: [EnterKeyupMixin]
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

@Prop({ default: () => new TableColClass() }) tableCol!: TableColClass;
@Prop({ default: 0 }) parentOffsetLeft!: number;
@PropSync('visibleSync', { default: false }) visible!: boolean;
@PropSync('drawerWidthSync', { default: 700 }) drawerWidth!: number;
@State language!: string;
@Mutation setLanguage!: (value: string) => void;
$refs!: { tablePaginationElTable: ElTable }
total = 0;
pageInit = false;
get getIsEdit(): boolean {
return this.schedulingRecord.id > 0;
}
get getTitle(): string {
return this.getIsEdit ? '修改值班信息' : '新增值班信息';
}
@Watch('visible') onVisibleChange(newVal: boolean): void {
if (newVal) {
this.init();
}
}
@Watch('schedulingTable') onSchedulingTableChange(
newVal: SchedulingTableClass
): void {
this.handleSchedulingTableChange(newVal);
}
@Emit() emitOpenSubMenus(): number {
return 0;
}
@Emit() emitThumbTackClick(
item: MenuItemClass | SubMenuClass
): MenuItemClass | SubMenuClass {
return item;
}
public handleItemClick(
menuItem: MenuItemClass,
getMenuItem: MenuItemClass
): void {
let needTurnPage = true;
needTurnPage && this.turnPage(getMenuItem.routeName, getMenuItem.link);
}
handleItemMouseEnter(menuItem: MenuItemClass): void {
menuItem.thumbTackVisible = true;
if (menuItem.rightIconVisibleType === 'hover') {
menuItem.rightIconVisible = true;
}
if (menuItem.subMenus.length > 0) {
this.showSubMenu = true;
}
}
created(): void {
this.getUserDatas('');
}
mounted(): void {
if (this.$refs.col) {
this.selfOffsetLeft = this.$refs.col.offsetLeft;
this.selfOffsetTop = this.$refs.col.offsetTop;
}
}

1
2
3

@Prop({ default: () => new TableColClass() }) tableCol!: TableColClass;
@Prop({ default: 0 }) parentOffsetLeft!: number;