<template>
|
<div>
|
|
<Ui-Drawer :isVisible.sync="isUseDrawer"
|
@closeDrawer="closePopUp"
|
:size="drawerSize">
|
<slot></slot>
|
</Ui-Drawer>
|
|
<Ui-Dialog :isVisible.sync="isUseDialog"
|
@closeDialog="closePopUp"
|
:width="dialogWidth">
|
<slot></slot>
|
</Ui-Dialog>
|
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component, Prop, Emit, PropSync} from 'vue-property-decorator';
|
import UtilsService from '~/shared/services/utils.service';
|
|
@Component
|
export default class PopUpFrame extends Vue {
|
|
@PropSync('isOpen',{type:Boolean,default:false})
|
syncIsOpen!:boolean;
|
|
@Prop({default:'auto'})
|
drawerSize!:string; // element UI drawer default size
|
|
@Prop({default:'50%'})
|
dialogWidth!:string; // element UI dialog default width
|
|
//////////////////////////////////////////////////////////////////////
|
|
@Emit('closePopUp') closePopUp() {
|
return;
|
}
|
|
//////////////////////////////////////////////////////////////////////
|
|
get isUseDrawer() : boolean {
|
return this.syncIsOpen && UtilsService.isMobileDevice();
|
}
|
|
set isUseDrawer(value: boolean) {
|
this.syncIsOpen = value
|
}
|
|
get isUseDialog() : boolean {
|
return this.syncIsOpen && !UtilsService.isMobileDevice();
|
}
|
|
set isUseDialog(value: boolean) {
|
this.syncIsOpen = value
|
}
|
}
|
</script>
|
