fix: fix style of snackbar

varletjs · Dec 24, 2020 · 2858e3e · 2858e3e
1 parent 226bc04
commit 2858e3e
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 19 deletions.
diff --git a/packages/varlet-ui/src/snackbar-core/SnackbarCore.vue b/packages/varlet-ui/src/snackbar-core/SnackbarCore.vue
@@ -1,31 +1,19 @@
 <template>
-	<div
-		class="var-snackbar"
-		:style="{ pointerEvents: forbidClick ? 'auto' : 'none' }"
-		v-show="show"
-	>
+	<div class="var-snackbar" :style="{ pointerEvents: forbidClick ? 'auto' : 'none' }" v-show="show">
 		<div
 			:class="`var-snackbar__wrapper var-snackbar__wrapper-${position} var-elevation--4 ${
 				vertical ? 'var-snackbar__vertical' : ''
 			}`"
 			:style="snackbarStyle"
 		>
-			<div :class="`var-snackbar__content ${contentClass}`">
-				<var-loading
-					:type="loadingType"
-					:size="loadingSize"
-					v-if="type === 'loading'"
-				/>
+			<div :class="`var-snackbar__content${contentClass ? ` ${contentClass}` : ''}`">
+				<var-loading :type="loadingType" :size="loadingSize" v-if="type === 'loading'" />
 				<slot>
 					{{ content }}
 				</slot>
 			</div>
 			<div class="var-snackbar__action">
-				<var-button
-					type="primary"
-					size="small"
-					v-if="['success', 'error', 'info', 'warning'].includes(type)"
-				>
+				<var-button type="primary" size="small" v-if="['success', 'error', 'info', 'warning'].includes(type)">
 					{{ type }}
 				</var-button>
 				<slot name="action"></slot>

diff --git a/packages/varlet-ui/src/snackbar-core/props.ts b/packages/varlet-ui/src/snackbar-core/props.ts
@@ -49,7 +49,7 @@ export const props = {
 	// 是否禁止滚动穿透
 	lockScroll: {
 		type: Boolean,
-		default: true,
+		default: false,
 	},
 	// 控制组件可见还是隐藏
 	show: {

diff --git a/packages/varlet-ui/src/snackbar-core/snackbarCore.less b/packages/varlet-ui/src/snackbar-core/snackbarCore.less
@@ -2,7 +2,7 @@
 @import "../styles/common";
 
 .var-transition-group {
-  position: absolute;
+  position: fixed;
   left: 0;
   right: 0;
   top: 0;
@@ -68,7 +68,7 @@
 
   &-snackbar-transition {
     top: 0;
-
+    position: fixed;
     .var-snackbar__wrapper {
       position: relative;