From 719637cea5a25299a17602af6769bc0b3764dbaa Mon Sep 17 00:00:00 2001 From: ayang <473033518@qq.com> Date: Sun, 20 Mar 2022 21:24:16 +0800 Subject: [PATCH] feat(ui/ripple): determine whether to prevent ripple's fast touchmove by supporting touch events --- .../varlet-vue2-ui/src/button/example/index.vue | 15 +-------------- .../src/collapse-item/collapseItem.less | 4 ++-- .../varlet-vue2-ui/src/collapse/docs/en-US.md | 4 ++-- .../varlet-vue2-ui/src/collapse/docs/zh-CN.md | 4 ++-- .../src/ripple/__tests__/index.spec.js | 1 + packages/varlet-vue2-ui/src/ripple/index.ts | 6 ++++++ packages/varlet-vue2-ui/src/utils/elements.ts | 5 +++++ 7 files changed, 19 insertions(+), 20 deletions(-) diff --git a/packages/varlet-vue2-ui/src/button/example/index.vue b/packages/varlet-vue2-ui/src/button/example/index.vue index dc2db74..d4da138 100644 --- 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 index bd7a5b8..437d3bc 100644 --- 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 index 3d83a0a..5499359 100644 --- 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 index a2680c1..7a97caa 100644 --- 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 index 77f5d46..57c454d 100644 --- 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 index 559eaf8..1e46fac 100644 --- 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 index 145634e..9de181d 100644 --- 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 { await doubleRaf() const { top, bottom, left, right } = element.getBoundingClientRect()