fix(ui/ripple): 水波纹会自行设置容器的 overflow position zIndex 并在波纹结束时进行还原

affects: @varlet/ui
varletjs · Jan 19, 2021 · a112796 · a112796
1 parent e7ac6bd
commit a112796
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 60 deletions.
diff --git a/packages/varlet-ui/src/checkbox/checkbox.less b/packages/varlet-ui/src/checkbox/checkbox.less
@@ -9,8 +9,6 @@
 	align-items: center;
 
 	&__action {
-		position: relative;
-		overflow: hidden;
 		display: flex;
 		justify-content: center;
 		align-items: center;

diff --git a/packages/varlet-ui/src/radio/radio.less b/packages/varlet-ui/src/radio/radio.less
@@ -9,8 +9,6 @@
 	align-items: center;
 
 	&__action {
-		position: relative;
-		overflow: hidden;
 		display: flex;
 		justify-content: center;
 		align-items: center;

diff --git a/packages/varlet-ui/src/ripple/index.ts b/packages/varlet-ui/src/ripple/index.ts
@@ -2,6 +2,7 @@ import { Directive, Plugin, App } from 'vue'
 import { DirectiveBinding } from '@vue/runtime-core'
 import './ripple.less'
 import '../styles/common.less'
+import { doc } from 'prettier'
 
 interface RippleStyles {
 	x: number
@@ -20,6 +21,44 @@ interface RippleHTMLElement extends HTMLElement {
 	_ripple?: RippleOptions
 }
 
+function recordStyles(element: RippleHTMLElement) {
+	const { zIndex, position, overflow, overflowX, overflowY } = window.getComputedStyle(element)
+
+	if (zIndex === 'auto') {
+		element.style.zIndex = '1'
+		element.dataset.prevZIndex = zIndex
+	}
+
+	if (position === 'static') {
+		element.style.position = 'relative'
+		element.dataset.prevPosition = position
+	}
+
+	element.style.overflow = 'hidden'
+	element.style.overflowX = 'hidden'
+	element.style.overflowY = 'hidden'
+
+	element.dataset.prevOverflow = overflow
+	element.dataset.prevOverflowX = overflowX
+	element.dataset.prevOverflowY = overflowY
+}
+
+function resetStyles(element: RippleHTMLElement) {
+	if (element.dataset.prevZIndex) {
+		element.style.zIndex = element.dataset.prevZIndex
+		delete element.dataset.prevZIndex
+	}
+
+	if (element.dataset.prevPosition) {
+		element.style.position = element.dataset.prevPosition
+		delete element.dataset.prevPosition
+	}
+
+	element.style.overflow = element.dataset.prevOverflow
+	element.style.overflowX = element.dataset.prevOverflowX
+	element.style.overflowY = element.dataset.prevOverflowY
+}
+
 function computeRippleStyles(element: RippleHTMLElement, event: TouchEvent): RippleStyles {
 	const { top, left }: DOMRect = element.getBoundingClientRect()
 	const { clientWidth, clientHeight } = element
@@ -55,11 +94,8 @@ function createRipple(this: RippleHTMLElement, event: TouchEvent) {
 	ripple.style.backgroundColor = this._ripple?.color ?? 'currentColor'
 	ripple.dataset.createdAt = String(performance.now())
 
-	const styles = window.getComputedStyle(this)
-	styles.zIndex === 'auto' && this.classList.add('var-ripple--flat')
-	styles.position === 'static' && this.classList.add('var--relative')
+	recordStyles(this)
 
-	this.classList.add('var--hidden')
 	this.appendChild(ripple)
 
 	setTimeout(() => {
@@ -82,11 +118,9 @@ function removeRipple(this: RippleHTMLElement) {
 
 		setTimeout(() => {
 			const ripples: NodeListOf<RippleHTMLElement> = this.querySelectorAll('.var-ripple')
-			if (ripples.length === 1) {
-				this.classList.remove('var-ripple--flat')
-				this.classList.remove('var--relative')
-				this.classList.remove('var--hidden')
-			}
+
+			ripples.length === 1 && resetStyles(this)
+
 			lastRipple.parentNode?.removeChild(lastRipple)
 		}, 300)
 	}, delay)

diff --git a/packages/varlet-ui/src/ripple/ripple.less b/packages/varlet-ui/src/ripple/ripple.less
@@ -1,16 +1,10 @@
-.var {
-  &-ripple {
-    position: absolute;
-    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
-    top: 0;
-    left: 0;
-    border-radius: 50%;
-    opacity: 0;
-    will-change: transform, opacity;
-    pointer-events: none;
-
-    &--flat {
-      z-index: 1;
-    }
-  }
+.var-ripple {
+	position: absolute;
+	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	top: 0;
+	left: 0;
+	border-radius: 50%;
+	opacity: 0;
+	will-change: transform, opacity;
+	pointer-events: none;
 }
diff --git a/packages/varlet-ui/src/tab/tab.less b/packages/varlet-ui/src/tab/tab.less
@@ -1,4 +1,4 @@
-@import "../styles/var";
+@import '../styles/var';
 
 @tab-color: #fff;
 @tab-horizontal-height: 44px;
@@ -10,35 +10,33 @@
 @tab-disabled-color: #ddd;
 
 .var-tab {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex: 1 0 auto;
-  padding: 0 @tab-padding;
-  font-size: @font-size-md;
-  color: @tab-color;
-  overflow: hidden;
-
-  &--active {
-    color: @tab-active-color;
-  }
-
-  &--inactive {
-    color: @tab-inactive-color
-  }
-
-  &--disabled {
-    color: @tab-disabled-color
-  }
-
-  &--horizontal {
-    flex-direction: row;
-    height: @tab-horizontal-height;
-  }
-
-  &--vertical {
-    flex-direction: column;
-    height: @tab-vertical-height;
-  }
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex: 1 0 auto;
+	padding: 0 @tab-padding;
+	font-size: @font-size-md;
+	color: @tab-color;
+
+	&--active {
+		color: @tab-active-color;
+	}
+
+	&--inactive {
+		color: @tab-inactive-color;
+	}
+
+	&--disabled {
+		color: @tab-disabled-color;
+	}
+
+	&--horizontal {
+		flex-direction: row;
+		height: @tab-horizontal-height;
+	}
+
+	&--vertical {
+		flex-direction: column;
+		height: @tab-vertical-height;
+	}
 }