feat(ui/ripple): determine whether to prevent ripple's fast touchmove…

… by supporting touch events
varletjs · Mar 18, 2022 · f859144 · f859144
1 parent 42366db
commit f859144
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 13 deletions.
diff --git a/packages/varlet-ui/src/button/example/index.vue b/packages/varlet-ui/src/button/example/index.vue
@@ -66,11 +66,9 @@ import VarButton from '../index'
 import VarIcon from '../../icon'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import Snackbar from '../../snackbar'
-import context from '../../context'
 import dark from '../../themes/dark'
 import { pack, use } from './locale'
-import { watchLang, watchPlatform, watchDarkMode } from '@varlet/cli/site/utils'
-import { onUnmounted } from 'vue'
+import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 
 export default {
   components: {
@@ -96,16 +94,6 @@ export default {
     watchLang(use)
     watchDarkMode(dark)
 
-    const prevTouchmoveForbid = context.touchmoveForbid
-    watchPlatform((platform) => {
-      if (platform === 'pc') {
-        context.touchmoveForbid = false
-      }
-    })
-    onUnmounted(() => {
-      context.touchmoveForbid = prevTouchmoveForbid
-    })
-
     return {
       pack,
       handleClick,

diff --git a/packages/varlet-ui/src/ripple/index.ts b/packages/varlet-ui/src/ripple/index.ts
@@ -1,6 +1,7 @@
 import context from '../context'
 import './ripple.less'
 import '../styles/common.less'
+import { supportTouch } from '../utils/elements'
 import type { Directive, Plugin, App } from 'vue'
 import type { DirectiveBinding } from '@vue/runtime-core'
 
@@ -113,6 +114,11 @@ function removeRipple(this: RippleHTMLElement) {
 
 function forbidRippleTask(this: RippleHTMLElement) {
   const _ripple = this._ripple as RippleOptions
+
+  if (!supportTouch()) {
+    return
+  }
+
   if (!_ripple.touchmoveForbid) {
     return
   }

diff --git a/packages/varlet-ui/src/utils/elements.ts b/packages/varlet-ui/src/utils/elements.ts
@@ -207,3 +207,8 @@ export function formatStyleVars(styleVars: StyleVars | null) {
     return styles
   }, {} as StyleVars)
 }
+
+export function supportTouch() {
+  const inBrowser = typeof window !== 'undefined'
+  return inBrowser && 'ontouchstart' in window
+}