From e430eadebde1690a177cdf79e8a35da66c484dd0 Mon Sep 17 00:00:00 2001 From: Tomas <tomasysh@gmail.com> Date: 星期二, 28 十二月 2021 11:38:38 +0800 Subject: [PATCH] refactor components: NavBar, Footer, loading, popUpFrame --- PAMapp/components/popUpFrame.vue | 37 +++++++++++++++++++++++++++---------- 1 files changed, 27 insertions(+), 10 deletions(-) diff --git a/PAMapp/components/popUpFrame.vue b/PAMapp/components/popUpFrame.vue index cfff207..de6b525 100644 --- a/PAMapp/components/popUpFrame.vue +++ b/PAMapp/components/popUpFrame.vue @@ -1,44 +1,61 @@ <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 '~/shared/device'; + 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 + + @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; + } + + ////////////////////////////////////////////////////////////////////// private get isUseDrawer() : boolean { - return this.syncIsOpen && isMobileDevice(); + return this.syncIsOpen && UtilsService.isMobileDevice(); } + private set isUseDrawer(value: boolean) { this.$emit('update:isOpen',value); } private get isUseDialog() : boolean { - return this.syncIsOpen && !isMobileDevice(); + return this.syncIsOpen && !UtilsService.isMobileDevice(); } private set isUseDialog(value: boolean) { this.$emit('update:isOpen',value); } - @Emit('closePopUp') closePopUp() { - return; - } } </script> -- Gitblit v1.8.0