refactor
This commit is contained in:
		
							parent
							
								
									f5cd809f62
								
							
						
					
					
						commit
						dc19f20153
					
				
					 5 changed files with 8 additions and 19 deletions
				
			
		|  | @ -146,6 +146,7 @@ onBeforeUnmount(() => { | |||
| <style lang="scss" module> | ||||
| .root { | ||||
| 	position: relative; | ||||
| 	margin: auto; | ||||
| 	padding: 32px; | ||||
| 	min-width: 320px; | ||||
| 	max-width: 480px; | ||||
|  |  | |||
|  | @ -7,9 +7,9 @@ | |||
| 	:leave-to-class="$style['transition_' + transitionName + '_leaveTo']" | ||||
| 	:duration="transitionDuration" appear @after-leave="emit('closed')" @enter="emit('opening')" @after-enter="onOpened" | ||||
| > | ||||
| 	<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog' || type === 'dialog:top', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }"> | ||||
| 	<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }"> | ||||
| 		<div class="_modalBg" :class="[$style.bg, { [$style.bgTransparent]: transparentBg && (type === 'popup') }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div> | ||||
| 		<div ref="content" :class="[$style.content, { [$style.fixed]: fixed, [$style.top]: type === 'dialog:top' }]" :style="{ zIndex }" @click.self="onBgClick"> | ||||
| 		<div ref="content" :class="[$style.content, { [$style.fixed]: fixed }]" :style="{ zIndex }" @click.self="onBgClick"> | ||||
| 			<slot :max-height="maxHeight" :type="type"></slot> | ||||
| 		</div> | ||||
| 	</div> | ||||
|  | @ -33,7 +33,7 @@ function getFixedContainer(el: Element | null): Element | null { | |||
| 	} | ||||
| } | ||||
| 
 | ||||
| type ModalTypes = 'popup' | 'dialog' | 'dialog:top' | 'drawer'; | ||||
| type ModalTypes = 'popup' | 'dialog' | 'drawer'; | ||||
| 
 | ||||
| const props = withDefaults(defineProps<{ | ||||
| 	manualShowing?: boolean | null; | ||||
|  | @ -413,16 +413,6 @@ defineExpose({ | |||
| 				-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%); | ||||
| 				mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%); | ||||
| 			} | ||||
| 
 | ||||
| 			&:global > * { | ||||
| 				margin: auto; | ||||
| 			} | ||||
| 
 | ||||
| 			&.top { | ||||
| 				&:global > * { | ||||
| 					margin-top: 0; | ||||
| 				} | ||||
| 			} | ||||
| 		} | ||||
| 	} | ||||
| 
 | ||||
|  | @ -450,10 +440,6 @@ defineExpose({ | |||
| 			left: 0; | ||||
| 			right: 0; | ||||
| 			margin: auto; | ||||
| 
 | ||||
| 			&:global > * { | ||||
| 				margin: auto; | ||||
| 			} | ||||
| 		} | ||||
| 	} | ||||
| } | ||||
|  |  | |||
|  | @ -1,6 +1,6 @@ | |||
| <template> | ||||
| <MkModal ref="modal" :prefer-type="'dialog:top'" @click="modal.close()" @closed="onModalClosed()"> | ||||
| 	<MkPostForm ref="form" v-bind="props" autofocus freeze-after-posted @posted="onPosted" @cancel="modal.close()" @esc="modal.close()"/> | ||||
| <MkModal ref="modal" :prefer-type="'dialog'" @click="modal.close()" @closed="onModalClosed()"> | ||||
| 	<MkPostForm ref="form" style="margin: 0 auto auto auto;" v-bind="props" autofocus freeze-after-posted @posted="onPosted" @cancel="modal.close()" @esc="modal.close()"/> | ||||
| </MkModal> | ||||
| </template> | ||||
| 
 | ||||
|  |  | |||
|  | @ -34,6 +34,7 @@ onMounted(() => { | |||
| 
 | ||||
| <style lang="scss" module> | ||||
| .root { | ||||
| 	margin: auto; | ||||
| 	position: relative; | ||||
| 	padding: 32px; | ||||
| 	min-width: 320px; | ||||
|  |  | |||
|  | @ -37,6 +37,7 @@ watch(() => props.showing, () => { | |||
| 
 | ||||
| <style lang="scss" scoped> | ||||
| .iuyakobc { | ||||
| 	margin: auto; | ||||
| 	position: relative; | ||||
| 	padding: 32px; | ||||
| 	box-sizing: border-box; | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue