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

… by supporting touch events
varletjs · Mar 20, 2022 · 719637c · 719637c
1 parent b688380
commit 719637c
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 20 deletions.
diff --git a/packages/varlet-vue2-ui/src/button/example/index.vue b/packages/varlet-vue2-ui/src/button/example/index.vue
@@ -67,11 +67,10 @@
 import VarButton from '../index'
 import VarIcon from '../../icon'
 import AppType from '@varlet-vue2/cli/site/mobile/components/AppType'
-import context from '../../context'
 import Snackbar from '../../snackbar'
 import dark from '../../themes/dark'
 import { pack, use } from './locale'
-import { watchLang, watchPlatform, watchDarkMode } from '@varlet-vue2/cli/site/utils'
+import { watchLang, watchDarkMode } from '@varlet-vue2/cli/site/utils'
 
 export default {
   name: 'ButtonExample',
@@ -91,18 +90,6 @@ export default {
   created() {
     watchLang(this, use)
     watchDarkMode(this, dark)
-
-    const prevTouchmoveForbid = context.touchmoveForbid
-
-    watchPlatform(this, (platform) => {
-      if (platform === 'pc') {
-        context.touchmoveForbid = false
-      }
-    })
-
-    this.$on('hook:beforeDestroy', () => {
-      context.touchmoveForbid = prevTouchmoveForbid
-    })
   },
 
   methods: {

diff --git a/packages/varlet-vue2-ui/src/collapse-item/collapseItem.less b/packages/varlet-vue2-ui/src/collapse-item/collapseItem.less
@@ -1,9 +1,9 @@
 @collapse-background: #fff;
 @collapse-text-color: #232222;
 @collapse-header-font-size: var(--font-size-lg);
-@collapse-header-padding: 10px 16px;
+@collapse-header-padding: 10px 12px;
 @collapse-content-font-size: var(--font-size-md);
-@collapse-content-padding: 0 16px 10px;
+@collapse-content-padding: 0 12px 10px;
 @collapse-item-margin-top: 16px;
 @collapse-disable-color: #bdbdbd;
 @collapse-border-top: thin solid rgba(0, 0, 0, 0.12);

diff --git a/packages/varlet-vue2-ui/src/collapse/docs/en-US.md b/packages/varlet-vue2-ui/src/collapse/docs/en-US.md
@@ -153,9 +153,9 @@ Here are the CSS variables used by the component, Styles can be customized using
 | `--collapse-background` | `#fff` |
 | `--collapse-text-color` | `#232222` |
 | `--collapse-header-font-size` | `var(--font-size-lg)` |
-| `--collapse-header-padding` | `10px 16px` |
+| `--collapse-header-padding` | `10px 12px` |
 | `--collapse-content-font-size` | `var(--font-size-md)` |
-| `--collapse-content-font-size` | `14px` |
+| `--collapse-content-padding` | `0 12px 10px` |
 | `--collapse-item-margin-top` | `16px` |
 | `--collapse-disable-color` | `#bdbdbd` |
 | `--collapse-border-top` | `thin solid rgba(0, 0, 0, 0.12)` |
diff --git a/packages/varlet-vue2-ui/src/collapse/docs/zh-CN.md b/packages/varlet-vue2-ui/src/collapse/docs/zh-CN.md
@@ -153,9 +153,9 @@ export default {
 | `--collapse-background` | `#fff` |
 | `--collapse-text-color` | `#232222` |
 | `--collapse-header-font-size` | `var(--font-size-lg)` |
-| `--collapse-header-padding` | `10px 16px` |
+| `--collapse-header-padding` | `10px 12px` |
 | `--collapse-content-font-size` | `var(--font-size-md)` |
-| `--collapse-content-font-size` | `14px` |
+| `--collapse-content-padding` | `0 12px 10px` |
 | `--collapse-item-margin-top` | `16px` |
 | `--collapse-disable-color` | `#bdbdbd` |
 | `--collapse-border-top` | `thin solid rgba(0, 0, 0, 0.12)` |
diff --git a/packages/varlet-vue2-ui/src/ripple/__tests__/index.spec.js b/packages/varlet-vue2-ui/src/ripple/__tests__/index.spec.js
@@ -64,6 +64,7 @@ test('test ripple disabled', async () => {
 })
 
 test('test ripple touchmove', async () => {
+  window.ontouchstart = true
   const wrapper = mount(Wrapper, { attachTo: document.body })
 
   await triggerDrag(wrapper, 0, 20)

diff --git a/packages/varlet-vue2-ui/src/ripple/index.ts b/packages/varlet-vue2-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 { VueConstructor, DirectiveOptions, PluginObject } from 'vue'
 import type { DirectiveBinding } from 'vue/types/options'
 
@@ -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-vue2-ui/src/utils/elements.ts b/packages/varlet-vue2-ui/src/utils/elements.ts
@@ -39,6 +39,11 @@ export function nextTickFrame(fn: FrameRequestCallback) {
   })
 }
 
+export function supportTouch() {
+  const inBrowser = typeof window !== 'undefined'
+  return inBrowser && 'ontouchstart' in window
+}
+
 export async function inViewport(element: HTMLElement): Promise<boolean> {
   await doubleRaf()
   const { top, bottom, left, right } = element.getBoundingClientRect()