<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, Watch, PropSync} from 'vue-property-decorator';
|
import { isMobileDevice } from '../assets/ts/device';
|
@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
|
|
private get isUseDrawer() : boolean {
|
return this.syncIsOpen && isMobileDevice();
|
}
|
private set isUseDrawer(value: boolean) {
|
this.$emit('update:isOpen',value);
|
}
|
|
private get isUseDialog() : boolean {
|
return this.syncIsOpen && !isMobileDevice();
|
}
|
|
private set isUseDialog(value: boolean) {
|
this.$emit('update:isOpen',value);
|
}
|
|
@Emit('closePopUp') closePopUp() {
|
return;
|
}
|
}
|
</script>
|
