From f8591445a70462d82ea19ca00ef6d1b792e62df9 Mon Sep 17 00:00:00 2001
From: haoziqaq <357229046@qq.com>
Date: Fri, 18 Mar 2022 17:42:10 +0800
Subject: [PATCH] feat(ui/ripple): determine whether to prevent ripple's fast
 touchmove by supporting touch events

---
 packages/varlet-ui/src/button/example/index.vue | 14 +-------------
 packages/varlet-ui/src/ripple/index.ts          |  6 ++++++
 packages/varlet-ui/src/utils/elements.ts        |  5 +++++
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/packages/varlet-ui/src/button/example/index.vue b/packages/varlet-ui/src/button/example/index.vue
index 756d0803e16..449cd6dd123 100644
--- 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
index fab0a8e43e2..c9ba7df2aa6 100644
--- 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
index d814e968677..30cf4d77e11 100644
--- 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
+}