帮我写一个typescript+vue 通用页面布局组件代码

import { Component, Vue, Prop } from 'vue-property-decorator';@Component
export default class CommonLayout extends Vue {
// 数据
@Prop({ type: Object, required: true }) data!: any; // 是否显示
@Prop({ type: Boolean, default: false }) visible!: boolean; // 标题
@Prop({ type: String, required: true }) title!: string; // 是否可拖动
@Prop({ type: Boolean, default: false }) draggable!: boolean; // 关闭事件
@Prop({ type: Function, required: true }) close!: () => void; // 提交事件
@Prop({ type: Function, required: true }) submit!: () => void; // 该布局是否可见
public isVisible: boolean = this.visible; // 当前组件的位置
public position: object = {
x: 0,
y: 0,
}; // 该布局的宽度
public width: number = 0; // 该布局的高度
public height: number = 0; /**
* 组件绑定的钩子函数
*/
public mounted(): void {
if (this.draggable) {
this.initLayoutPosition();
}
} /**
* 初始化布局位置
*/
private initLayoutPosition(): void {
this.position = {
x: window.innerWidth / 2 - this.width / 2,
y: window.innerHeight / 2 - this.height / 2,
};
} /**
* 拖动布局
* @param event
*/
public handleDrag(event: MouseEvent): void {
this.position.x = event.clientX - this.width / 2;
this.position.y = event.clientY - this.height / 2;
} /**
* 处理拖动结束
*/
public handleDragEnd(): void {
this.initLayoutPosition();
}
}