diff --git a/README.md b/README.md index 4843d6ca0..f33b447ce 100644 --- a/README.md +++ b/README.md @@ -67,10 +67,14 @@ pnpm add vant ```js import { createApp } from 'vue'; +// 1. Import the components you need import { Button } from 'vant'; +// 2. Import the components style import 'vant/lib/index.css'; const app = createApp(); + +// 3. Register the components you need app.use(Button); ``` diff --git a/README.zh-CN.md b/README.zh-CN.md index a1e5b4de2..c7a474f0a 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -71,10 +71,14 @@ pnpm add vant ```js import { createApp } from 'vue'; +// 1. 引入你需要的组件 import { Button } from 'vant'; +// 2. 引入组件样式 import 'vant/lib/index.css'; const app = createApp(); + +// 3. 注册你需要的组件 app.use(Button); ``` diff --git a/packages/vant-cli/src/commands/build.ts b/packages/vant-cli/src/commands/build.ts index d848cb3ce..c3c19503a 100644 --- a/packages/vant-cli/src/commands/build.ts +++ b/packages/vant-cli/src/commands/build.ts @@ -12,7 +12,7 @@ import { compileBundles } from '../compiler/compile-bundles.js'; import { genPackageEntry } from '../compiler/gen-package-entry.js'; import { genStyleDepsMap } from '../compiler/gen-style-deps-map.js'; import { genComponentStyle } from '../compiler/gen-component-style.js'; -import { SRC_DIR, LIB_DIR, ES_DIR } from '../common/constant.js'; +import { SRC_DIR, LIB_DIR, ES_DIR, getVantConfig } from '../common/constant.js'; import { genPackageStyle } from '../compiler/gen-package-style.js'; import { genWebStormTypes } from '../compiler/web-types/index.js'; import { @@ -135,9 +135,10 @@ async function buildPackageStyleEntry() { } async function buildBundledOutputs() { + const config = getVantConfig(); setModuleEnv('esmodule'); await compileBundles(); - genWebStormTypes(); + genWebStormTypes(config.build?.tagPrefix); } const tasks = [ diff --git a/packages/vant-cli/src/compiler/web-types/index.ts b/packages/vant-cli/src/compiler/web-types/index.ts index 74eaf46d8..ff5bc6dd6 100644 --- a/packages/vant-cli/src/compiler/web-types/index.ts +++ b/packages/vant-cli/src/compiler/web-types/index.ts @@ -40,7 +40,7 @@ export async function parseAndWrite(options: Options) { ); } -export function genWebStormTypes() { +export function genWebStormTypes(tagPrefix?: string) { const pkgJson = getPackageJson(); const vantConfig = getVantConfig(); @@ -50,5 +50,6 @@ export function genWebStormTypes() { test: /README\.md/, version: pkgJson.version, outputDir: LIB_DIR, + tagPrefix, }); } diff --git a/packages/vant-use/package.json b/packages/vant-use/package.json index 60d316a43..ce83fa5dc 100644 --- a/packages/vant-use/package.json +++ b/packages/vant-use/package.json @@ -1,6 +1,6 @@ { "name": "@vant/use", - "version": "1.4.1", + "version": "1.4.2", "description": "Vant Composition API", "main": "dist/index.cjs.js", "module": "dist/index.esm.mjs", diff --git a/packages/vant-use/src/useClickAway/index.ts b/packages/vant-use/src/useClickAway/index.ts index b36312dba..9099459dc 100644 --- a/packages/vant-use/src/useClickAway/index.ts +++ b/packages/vant-use/src/useClickAway/index.ts @@ -7,7 +7,10 @@ export type UseClickAwayOptions = { }; export function useClickAway( - target: Element | Ref, + target: + | Element + | Ref + | Array>, listener: EventListener, options: UseClickAwayOptions = {} ) { @@ -18,8 +21,13 @@ export function useClickAway( const { eventName = 'click' } = options; const onClick = (event: Event) => { - const element = unref(target); - if (element && !element.contains(event.target as Node)) { + const targets = Array.isArray(target) ? target : [target]; + const isClickAway = targets.every((item) => { + const element = unref(item); + return element && !element.contains(event.target as Node); + }); + + if (isClickAway) { listener(event); } }; diff --git a/packages/vant-use/src/useEventListener/index.ts b/packages/vant-use/src/useEventListener/index.ts index 01f6d1c8e..ffd4dfe08 100644 --- a/packages/vant-use/src/useEventListener/index.ts +++ b/packages/vant-use/src/useEventListener/index.ts @@ -10,6 +10,16 @@ export type UseEventListenerOptions = { passive?: boolean; }; +export function useEventListener( + type: K, + listener: (event: DocumentEventMap[K]) => void, + options?: UseEventListenerOptions +): void; +export function useEventListener( + type: string, + listener: EventListener, + options?: UseEventListenerOptions +): void; export function useEventListener( type: string, listener: EventListener, @@ -27,7 +37,10 @@ export function useEventListener( const element = unref(target); if (element && !attached) { - element.addEventListener(type, listener, { capture, passive }); + element.addEventListener(type, listener, { + capture, + passive, + }); attached = true; } }; diff --git a/packages/vant/docs/markdown/quickstart.en-US.md b/packages/vant/docs/markdown/quickstart.en-US.md index fca3781c3..eae856fa9 100644 --- a/packages/vant/docs/markdown/quickstart.en-US.md +++ b/packages/vant/docs/markdown/quickstart.en-US.md @@ -26,7 +26,7 @@ pnpm add vant ### CDN -The easiest way to use Vant is to include a CDN link in the html file, after which you can access all components via the global variable `vant`. +The easiest way to use Vant is to include a CDN link in the HTML file, after which you can access all components via the global variable `vant`. ```html @@ -92,9 +92,28 @@ In the GUI, click on 'Dependencies' -> `Install Dependencies` and add `vant` to ## Usage -### Import on demand (recommended) +### Basic Usage -If you are using vite, webpack or vue-cli, please use [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components). +The basic usage of Vant components; + +```js +import { createApp } from 'vue'; +// 1. Import the components you need +import { Button } from 'vant'; +// 2. Import the components style +import 'vant/lib/index.css'; + +const app = createApp(); + +// 3. Register the components you need +app.use(Button); +``` + +> Tip: Vant supports Tree Shaking by default, so you don't need to configure any plugins, the unused JS code will be removed by Tree Shaking, but CSS styles cannot be optimized by it. + +### Import on demand + +If you are using vite, webpack or vue-cli, you can use [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components), this plugin can help you to auto importing components and reduce CSS file size. #### 1. Install Plugin @@ -160,16 +179,14 @@ module.exports = { }; ``` -#### 3. Import Components +#### 3. Using Components -Then you can import components from Vant: +Then you can using components from Vant in the template, the `unplugin-vue-components` will automatically import the corresponding Vant components. -```js -import { createApp } from 'vue'; -import { Button } from 'vant'; - -const app = createApp(); -app.use(Button); +```html + ``` #### 4. Style of Function Components @@ -194,27 +211,4 @@ import { showImagePreview } from 'vant'; import 'vant/es/image-preview/style'; ``` -> Vant supports tree shaking by default, so you don't necessarily need the webpack plugin, if you can't accept the full import of css. - -### Import all components (not recommended) - -Import all components will **increase the bundle size**, so this is not recommended. - -```js -import { createApp } from 'vue'; -import Vant from 'vant'; -import 'vant/lib/index.css'; - -const app = createApp(); -app.use(Vant); -``` - -### Manually import (not recommended) - -```js -// import script -import Button from 'vant/es/button/index'; -// import style -// if the component does not have a style file, there is no need to import -import 'vant/es/button/style/index'; -``` +> Tip: "Full Import" and "On-demand Import" should not be used at the same time, otherwise it will lead to problems such as code duplication and style overrides. diff --git a/packages/vant/docs/markdown/quickstart.zh-CN.md b/packages/vant/docs/markdown/quickstart.zh-CN.md index 0888589b4..b6dfbb2b5 100644 --- a/packages/vant/docs/markdown/quickstart.zh-CN.md +++ b/packages/vant/docs/markdown/quickstart.zh-CN.md @@ -30,7 +30,7 @@ pnpm add vant ### 通过 CDN 安装 -使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接，之后你可以通过全局变量 `vant` 访问到所有组件。 +使用 Vant 最简单的方法是直接在 HTML 文件中引入 CDN 链接，之后你可以通过全局变量 `vant` 访问到所有组件。 ```html @@ -93,9 +93,32 @@ pnpm add vant ## 引入组件 -### 按需引入组件（推荐） +### 方法一. 基础用法 -在基于 `vite`、`webpack` 或 `vue-cli` 的项目中使用 Vant 时，推荐安装 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 插件，它可以自动按需引入组件。 +下面是使用 Vant 组件的基础用法示例： + +```js +import { createApp } from 'vue'; +// 1. 引入你需要的组件 +import { Button } from 'vant'; +// 2. 引入组件样式 +import 'vant/lib/index.css'; + +const app = createApp(); + +// 3. 注册你需要的组件 +app.use(Button); +``` + +Vant 支持多种组件注册方式，除了在 app 上全局注册组件，你也可以选择其他的方式，详见 [组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce) 章节。 + +> 提示：Vant 默认支持 Tree Shaking，因此你不需要配置任何插件，通过 Tree Shaking 即可移除不需要的 JS 代码，但 CSS 样式无法通过这种方式优化，如果需要按需引入 CSS 样式，请参考下面的方法二。 + +### 方法二. 按需引入组件 + +在基于 `vite`、`webpack` 或 `vue-cli` 的项目中使用 Vant 时，可以使用 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 插件，它可以自动引入组件，并按需引入组件的样式。 + +相比于基础用法，这种方式可以按需引入组件的 CSS 样式，从而减少一部分代码体积。 #### 1. 安装插件 @@ -161,16 +184,14 @@ module.exports = { }; ``` -#### 3. 引入组件 +#### 3. 使用组件 -完成以上两步，就可以直接使用 Vant 组件了： +完成以上两步，就可以直接在模板中使用 Vant 组件了，`unplugin-vue-components` 会解析模板并自动注册对应的组件。 -```js -import { createApp } from 'vue'; -import { Button } from 'vant'; - -const app = createApp(); -app.use(Button); +```html + ``` #### 4. 引入函数组件的样式 @@ -195,29 +216,4 @@ import { showImagePreview } from 'vant'; import 'vant/es/image-preview/style'; ``` -> 注意：Vant 支持 Tree Shaking，因此你也可以不配置任何插件，通过 Tree Shaking 即可移除不需要的 JS 代码，但 CSS 无法通过这种方式优化。 - -### 导入所有组件（不推荐） - -Vant 支持一次性导入所有组件，引入所有组件会**增加代码包体积**，因此不推荐这种做法。 - -```js -import { createApp } from 'vue'; -import Vant from 'vant'; -import 'vant/lib/index.css'; - -const app = createApp(); -app.use(Vant); -``` - -### 手动按需引入组件（不推荐） - -在不使用任何构建插件的情况下，可以手动引入需要使用的组件和样式。 - -```js -// 引入组件脚本 -import Button from 'vant/es/button/index'; -// 引入组件样式 -// 若组件没有样式文件，则无须引入 -import 'vant/es/button/style/index'; -``` +> 提示：在单个项目中不应该同时使用「全量引入」和「按需引入」，否则会导致代码重复、样式错乱等问题。 diff --git a/packages/vant/docs/markdown/use-click-away.en-US.md b/packages/vant/docs/markdown/use-click-away.en-US.md index 32ec70cd8..7374ca484 100644 --- a/packages/vant/docs/markdown/use-click-away.en-US.md +++ b/packages/vant/docs/markdown/use-click-away.en-US.md @@ -74,7 +74,7 @@ function useClickAway( | Name | Description | Type | Default Value | | --- | --- | --- | --- | -| target | Target element | _Element \| Ref\_ | - | +| target | Target element, support multiple elements | _Element \| Ref\ \| Array\>_ | - | | listener | Callback function when the outside is clicked | _EventListener_ | - | | options | Options | _Options_ | `{ eventName: 'click' }` | diff --git a/packages/vant/docs/markdown/use-click-away.zh-CN.md b/packages/vant/docs/markdown/use-click-away.zh-CN.md index b13d76319..291314f94 100644 --- a/packages/vant/docs/markdown/use-click-away.zh-CN.md +++ b/packages/vant/docs/markdown/use-click-away.zh-CN.md @@ -74,11 +74,11 @@ function useClickAway( ### 参数 -| 参数 | 说明 | 类型 | 默认值 | -| -------- | ------------------------ | -------------------------- | ------ | -| target | 绑定事件的元素 | _Element \| Ref\_ | - | -| listener | 点击外部时触发的回调函数 | _EventListener_ | - | -| options | 可选的配置项 | _Options_ | 见下表 | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| target | 绑定事件的元素，支持传入数组来绑定多个元素 | _Element \| Ref\ \| Array\>_ | - | +| listener | 点击外部时触发的回调函数 | _EventListener_ | - | +| options | 可选的配置项 | _Options_ | 见下表 | ### Options diff --git a/packages/vant/package.json b/packages/vant/package.json index 8aca9bd60..fe8967ee2 100644 --- a/packages/vant/package.json +++ b/packages/vant/package.json @@ -49,7 +49,7 @@ "dependencies": { "@vant/icons": "^1.8.0", "@vant/popperjs": "^1.2.1", - "@vant/use": "^1.4.1" + "@vant/use": "^1.4.2" }, "peerDependencies": { "vue": "^3.0.0" diff --git a/packages/vant/src/composables/use-lock-scroll.ts b/packages/vant/src/composables/use-lock-scroll.ts index dacc64229..e227d6d28 100644 --- a/packages/vant/src/composables/use-lock-scroll.ts +++ b/packages/vant/src/composables/use-lock-scroll.ts @@ -12,11 +12,13 @@ export function useLockScroll( shouldLock: () => boolean ) { const touch = useTouch(); + const DIRECTION_UP = '01'; + const DIRECTION_DOWN = '10'; const onTouchMove = (event: TouchEvent) => { touch.move(event); - const direction = touch.deltaY.value > 0 ? '10' : '01'; + const direction = touch.deltaY.value > 0 ? DIRECTION_DOWN : DIRECTION_UP; const el = getScrollParent( event.target as Element, rootRef.value diff --git a/packages/vant/src/dropdown-menu/DropdownMenu.tsx b/packages/vant/src/dropdown-menu/DropdownMenu.tsx index 8c3ac70a6..f9b07f9f6 100644 --- a/packages/vant/src/dropdown-menu/DropdownMenu.tsx +++ b/packages/vant/src/dropdown-menu/DropdownMenu.tsx @@ -145,7 +145,10 @@ export default defineComponent({ linkChildren({ id, props, offset }); useClickAway(root, onClickAway); - useEventListener('scroll', onScroll, { target: scrollParent }); + useEventListener('scroll', onScroll, { + target: scrollParent, + passive: true, + }); return () => (
diff --git a/packages/vant/src/empty/Empty.tsx b/packages/vant/src/empty/Empty.tsx index e61fb69df..695cdf1df 100644 --- a/packages/vant/src/empty/Empty.tsx +++ b/packages/vant/src/empty/Empty.tsx @@ -1,26 +1,14 @@ -import { defineComponent, PropType, type ExtractPropTypes } from 'vue'; +import { defineComponent, type PropType, type ExtractPropTypes } from 'vue'; +import { useId } from '../composables/use-id'; import { Numeric, getSizeStyle, makeStringProp, createNamespace, } from '../utils'; -import { - renderError, - renderSearch, - renderNetwork, - renderMaterial, -} from './Images'; const [name, bem] = createNamespace('empty'); -const PRESET_IMAGES: Record JSX.Element> = { - error: renderError, - search: renderSearch, - network: renderNetwork, - default: renderMaterial, -}; - const emptyProps = { image: makeStringProp('default'), imageSize: [Number, String, Array] as PropType, @@ -35,13 +23,6 @@ export default defineComponent({ props: emptyProps, setup(props, { slots }) { - const renderImage = () => { - if (slots.image) { - return slots.image(); - } - return PRESET_IMAGES[props.image]?.() || ; - }; - const renderDescription = () => { const description = slots.description ? slots.description() @@ -58,6 +39,259 @@ export default defineComponent({ } }; + const baseId = useId(); + const getId = (num: number | string) => `${baseId}-${num}`; + const getUrlById = (num: number | string) => `url(#${getId(num)})`; + + const renderStop = (color: string, offset: number, opacity?: number) => ( + + ); + + const renderStops = (fromColor: string, toColor: string) => [ + renderStop(fromColor, 0), + renderStop(toColor, 100), + ]; + + const renderShadow = (id: string) => [ + + + {renderStop('#EBEDF0', 0)} + {renderStop('#F2F3F5', 100, 0.3)} + + , + , + ]; + + const renderBuilding = () => [ + + + {renderStop('#FFF', 0, 0.5)} + {renderStop('#F2F3F5', 100)} + + , + + + + , + ]; + + const renderCloud = () => [ + + + {renderStop('#F2F3F5', 0, 0.3)} + {renderStop('#F2F3F5', 100)} + + , + + + + , + ]; + + const renderNetwork = () => ( + + + + {renderStop('#FFF', 0, 0.5)} + {renderStop('#F2F3F5', 100)} + + + {renderStop('#EBEDF0', 0)} + {renderStop('#DCDEE0', 100, 0)} + + + {renderStops('#EAEDF0', '#DCDEE0')} + + + {renderStop('#EBEDF0', 0)} + {renderStop('#FFF', 100, 0)} + + + + {renderBuilding()} + + + + + + + + + + + + + + + + ); + + const renderMaterial = () => ( + + + + {renderStops('#F2F3F5', '#DCDEE0')} + + + {renderStops('#EAEDF1', '#DCDEE0')} + + + {renderStops('#EAEDF1', '#DCDEE0')} + + + {renderBuilding()} + {renderCloud()} + + + + + + + + + + + + + + + + ); + + const renderError = () => ( + + + + {renderStops('#EAEDF1', '#DCDEE0')} + + + {renderBuilding()} + {renderCloud()} + {renderShadow('c')} + + + ); + + const renderSearch = () => ( + + + + {renderStops('#EEE', '#D8D8D8')} + + + {renderStops('#F2F3F5', '#DCDEE0')} + + + {renderStops('#F2F3F5', '#DCDEE0')} + + + {renderStops('#FFF', '#F7F8FA')} + + + {renderBuilding()} + {renderCloud()} + {renderShadow('d')} + + + + + + + + + ); + + const renderImage = () => { + if (slots.image) { + return slots.image(); + } + + const PRESET_IMAGES: Record JSX.Element> = { + error: renderError, + search: renderSearch, + network: renderNetwork, + default: renderMaterial, + }; + + return PRESET_IMAGES[props.image]?.() || ; + }; + return () => (
diff --git a/packages/vant/src/empty/Images.tsx b/packages/vant/src/empty/Images.tsx deleted file mode 100644 index 8b360e060..000000000 --- a/packages/vant/src/empty/Images.tsx +++ /dev/null @@ -1,203 +0,0 @@ -const getId = (num: number | string) => `van-empty-${num}`; -const useId = (num: number | string) => `url(#${getId(num)})`; - -const renderStop = (color: string, offset: number, opacity?: number) => ( - -); - -const renderStops = (fromColor: string, toColor: string) => [ - renderStop(fromColor, 0), - renderStop(toColor, 100), -]; - -const renderShadow = (id: string) => [ - - - {renderStop('#EBEDF0', 0)} - {renderStop('#F2F3F5', 100, 0.3)} - - , - , -]; - -const renderBuilding = () => [ - - - {renderStop('#FFF', 0, 0.5)} - {renderStop('#F2F3F5', 100)} - - , - - - - , -]; - -const renderCloud = () => [ - - - {renderStop('#F2F3F5', 0, 0.3)} - {renderStop('#F2F3F5', 100)} - - , - - - - , -]; - -export const renderNetwork = () => ( - - - - {renderStop('#FFF', 0, 0.5)} - {renderStop('#F2F3F5', 100)} - - - {renderStop('#EBEDF0', 0)} - {renderStop('#DCDEE0', 100, 0)} - - - {renderStops('#EAEDF0', '#DCDEE0')} - - - {renderStop('#EBEDF0', 0)} - {renderStop('#FFF', 100, 0)} - - - - {renderBuilding()} - - - - - - - - - - - - - - - -); - -export const renderMaterial = () => ( - - - - {renderStops('#F2F3F5', '#DCDEE0')} - - - {renderStops('#EAEDF1', '#DCDEE0')} - - - {renderStops('#EAEDF1', '#DCDEE0')} - - - {renderBuilding()} - {renderCloud()} - - - - - - - - - - - - - - - -); - -export const renderError = () => ( - - - - {renderStops('#EAEDF1', '#DCDEE0')} - - - {renderBuilding()} - {renderCloud()} - {renderShadow('c')} - - -); - -export const renderSearch = () => ( - - - - {renderStops('#EEE', '#D8D8D8')} - - - {renderStops('#F2F3F5', '#DCDEE0')} - - - {renderStops('#F2F3F5', '#DCDEE0')} - - - {renderStops('#FFF', '#F7F8FA')} - - - {renderBuilding()} - {renderCloud()} - {renderShadow('d')} - - - - - - - - -); diff --git a/packages/vant/src/image-preview/ImagePreviewItem.tsx b/packages/vant/src/image-preview/ImagePreviewItem.tsx index 75bc9dbdb..8cfcb7b7d 100644 --- a/packages/vant/src/image-preview/ImagePreviewItem.tsx +++ b/packages/vant/src/image-preview/ImagePreviewItem.tsx @@ -279,7 +279,7 @@ export default defineComponent({ return ( {renderIndexes()} diff --git a/packages/vant/src/list/List.tsx b/packages/vant/src/list/List.tsx index f9fabc94e..1d69fde44 100644 --- a/packages/vant/src/list/List.tsx +++ b/packages/vant/src/list/List.tsx @@ -166,7 +166,10 @@ export default defineComponent({ useExpose({ check }); - useEventListener('scroll', check, { target: scrollParent }); + useEventListener('scroll', check, { + target: scrollParent, + passive: true, + }); return () => { const Content = slots.default?.(); diff --git a/packages/vant/src/notice-bar/README.md b/packages/vant/src/notice-bar/README.md index 4b371469c..2cbe33f50 100644 --- a/packages/vant/src/notice-bar/README.md +++ b/packages/vant/src/notice-bar/README.md @@ -72,6 +72,7 @@ app.use(NoticeBar); vertical class="notice-swipe" :autoplay="3000" + :touchable="false" :show-indicators="false" > Content 1 diff --git a/packages/vant/src/notice-bar/README.zh-CN.md b/packages/vant/src/notice-bar/README.zh-CN.md index 3cf7e6dec..9c3d5481c 100644 --- a/packages/vant/src/notice-bar/README.zh-CN.md +++ b/packages/vant/src/notice-bar/README.zh-CN.md @@ -88,6 +88,7 @@ app.use(NoticeBar); vertical class="notice-swipe" :autoplay="3000" + :touchable="false" :show-indicators="false" > 明月直入，无心可猜。 diff --git a/packages/vant/src/notice-bar/demo/index.vue b/packages/vant/src/notice-bar/demo/index.vue index 8247a00ea..e137a95da 100644 --- a/packages/vant/src/notice-bar/demo/index.vue +++ b/packages/vant/src/notice-bar/demo/index.vue @@ -69,6 +69,7 @@ const t = useTranslate({ vertical class="notice-swipe" :autoplay="3000" + :touchable="false" :show-indicators="false" > {{ t('poetry1') }} diff --git a/packages/vant/src/number-keyboard/NumberKeyboard.tsx b/packages/vant/src/number-keyboard/NumberKeyboard.tsx index 36fbd4ace..7b8dbb7c9 100644 --- a/packages/vant/src/number-keyboard/NumberKeyboard.tsx +++ b/packages/vant/src/number-keyboard/NumberKeyboard.tsx @@ -280,10 +280,8 @@ export default defineComponent({ unfit: !props.safeAreaInsetBottom, 'with-title': !!Title, })} - onTouchstart={stopPropagation} onAnimationend={onAnimationEnd} - // @ts-ignore - onWebkitAnimationEnd={onAnimationEnd} + onTouchstartPassive={stopPropagation} > {Title}
diff --git a/packages/vant/src/number-keyboard/NumberKeyboardKey.tsx b/packages/vant/src/number-keyboard/NumberKeyboardKey.tsx index 5fd37bcdb..2e5b6f63a 100644 --- a/packages/vant/src/number-keyboard/NumberKeyboardKey.tsx +++ b/packages/vant/src/number-keyboard/NumberKeyboardKey.tsx @@ -88,8 +88,8 @@ export default defineComponent({ return () => (
diff --git a/packages/vant/src/password-input/PasswordInput.tsx b/packages/vant/src/password-input/PasswordInput.tsx index ddf6258af..0ed8307fb 100644 --- a/packages/vant/src/password-input/PasswordInput.tsx +++ b/packages/vant/src/password-input/PasswordInput.tsx @@ -78,7 +78,7 @@ export default defineComponent({
    {renderPoints()}
diff --git a/packages/vant/src/picker/PickerColumn.tsx b/packages/vant/src/picker/PickerColumn.tsx index 8a7b209b5..ced338509 100644 --- a/packages/vant/src/picker/PickerColumn.tsx +++ b/packages/vant/src/picker/PickerColumn.tsx @@ -253,7 +253,7 @@ export default defineComponent({ return () => (
(); const wrapperRef = ref(); const popoverRef = ref(); @@ -144,11 +146,6 @@ export default defineComponent({ } }; - const onTouchstart = (event: TouchEvent) => { - event.stopPropagation(); - emit('touchstart', event); - }; - const onClickAction = (action: PopoverAction, index: number) => { if (action.disabled) { return; @@ -163,6 +160,7 @@ export default defineComponent({ const onClickAway = () => { if ( + props.show && props.closeOnClickOutside && (!props.overlay || props.closeOnClickOverlay) ) { @@ -203,7 +201,13 @@ export default defineComponent({ ); }; - onMounted(updateLocation); + onMounted(() => { + updateLocation(); + watchEffect(() => { + popupRef.value = popoverRef.value?.popupRef.value; + }); + }); + onBeforeUnmount(() => { if (popper) { popper.destroy(); @@ -213,7 +217,9 @@ export default defineComponent({ watch(() => [props.show, props.offset, props.placement], updateLocation); - useClickAway(wrapperRef, onClickAway, { eventName: 'touchstart' }); + useClickAway([wrapperRef, popupRef], onClickAway, { + eventName: 'touchstart', + }); return () => ( <> @@ -226,7 +232,6 @@ export default defineComponent({ position={''} transition="van-popover-zoom" lockScroll={false} - onTouchstart={onTouchstart} onUpdate:show={updateShow} {...attrs} {...pick(props, popupProps)} diff --git a/packages/vant/src/pull-refresh/PullRefresh.tsx b/packages/vant/src/pull-refresh/PullRefresh.tsx index 29f36af63..60ca51fab 100644 --- a/packages/vant/src/pull-refresh/PullRefresh.tsx +++ b/packages/vant/src/pull-refresh/PullRefresh.tsx @@ -221,12 +221,8 @@ export default defineComponent({ } ); - // add passive option to avoid Chrome warning - useEventListener('touchstart', onTouchStart as EventListener, { - target: track, - passive: true, - }); - useEventListener('touchmove', onTouchMove as EventListener, { + // useEventListener will set passive to `false` to eliminate the warning of Chrome + useEventListener('touchmove', onTouchMove, { target: track, }); @@ -244,6 +240,7 @@ export default defineComponent({ ref={track} class={bem('track')} style={trackStyle} + onTouchstartPassive={onTouchStart} onTouchend={onTouchEnd} onTouchcancel={onTouchEnd} > diff --git a/packages/vant/src/rate/Rate.tsx b/packages/vant/src/rate/Rate.tsx index 8cdac65ff..127ad54ba 100644 --- a/packages/vant/src/rate/Rate.tsx +++ b/packages/vant/src/rate/Rate.tsx @@ -279,7 +279,7 @@ export default defineComponent({ tabindex={props.disabled ? undefined : 0} aria-disabled={props.disabled} aria-readonly={props.readonly} - onTouchstart={onTouchStart} + onTouchstartPassive={onTouchStart} onTouchmove={onTouchMove} > {list.value.map(renderStar)} diff --git a/packages/vant/src/slider/Slider.tsx b/packages/vant/src/slider/Slider.tsx index d8348abbc..fe31fbe66 100644 --- a/packages/vant/src/slider/Slider.tsx +++ b/packages/vant/src/slider/Slider.tsx @@ -299,7 +299,7 @@ export default defineComponent({ aria-disabled={props.disabled || undefined} aria-readonly={props.readonly || undefined} aria-orientation={props.vertical ? 'vertical' : 'horizontal'} - onTouchstart={(event) => { + onTouchstartPassive={(event) => { if (typeof index === 'number') { // save index of current button buttonIndex = index; diff --git a/packages/vant/src/stepper/Stepper.tsx b/packages/vant/src/stepper/Stepper.tsx index 407db9675..4935f0c16 100644 --- a/packages/vant/src/stepper/Stepper.tsx +++ b/packages/vant/src/stepper/Stepper.tsx @@ -259,7 +259,7 @@ export default defineComponent({ actionType = type; onChange(); }, - onTouchstart: () => { + onTouchstartPassive: () => { actionType = type; onTouchStart(); }, diff --git a/packages/vant/src/sticky/Sticky.tsx b/packages/vant/src/sticky/Sticky.tsx index 73901d285..609c55a0a 100644 --- a/packages/vant/src/sticky/Sticky.tsx +++ b/packages/vant/src/sticky/Sticky.tsx @@ -140,7 +140,10 @@ export default defineComponent({ (value) => emit('change', value) ); - useEventListener('scroll', onScroll, { target: scrollParent }); + useEventListener('scroll', onScroll, { + target: scrollParent, + passive: true, + }); useVisibilityChange(root, onScroll); return () => ( diff --git a/packages/vant/src/swipe-cell/SwipeCell.tsx b/packages/vant/src/swipe-cell/SwipeCell.tsx index d00987a6a..173c0a8c7 100644 --- a/packages/vant/src/swipe-cell/SwipeCell.tsx +++ b/packages/vant/src/swipe-cell/SwipeCell.tsx @@ -220,7 +220,7 @@ export default defineComponent({ ref={root} class={bem()} onClick={getClickHandler('cell', lockClick)} - onTouchstart={onTouchStart} + onTouchstartPassive={onTouchStart} onTouchmove={onTouchMove} onTouchend={onTouchEnd} onTouchcancel={onTouchEnd} diff --git a/packages/vant/src/swipe/Swipe.tsx b/packages/vant/src/swipe/Swipe.tsx index 436048a64..85f6e8677 100644 --- a/packages/vant/src/swipe/Swipe.tsx +++ b/packages/vant/src/swipe/Swipe.tsx @@ -440,7 +440,7 @@ export default defineComponent({
(); const navRef = ref(); const wrapRef = ref(); + const contentRef = ref(); const id = useId(); const scroller = useScrollParent(root); @@ -446,15 +447,23 @@ export default defineComponent({ const onRendered = (name: Numeric, title?: string) => emit('rendered', name, title); + const resize = () => { + setLine(); + nextTick(() => contentRef.value?.swipeRef.value?.resize()); + }; + useExpose({ - resize: setLine, + resize, scrollTo, }); onActivated(setLine); onPopupReopen(setLine); onMountedOrActivated(init); - useEventListener('scroll', onScroll, { target: scroller }); + useEventListener('scroll', onScroll, { + target: scroller, + passive: true, + }); linkChildren({ id, @@ -480,6 +489,7 @@ export default defineComponent({ [renderHeader(), slots['nav-bottom']?.()] )} (
= 16.8.0 < 19.0.0' react: '>= 16.8.0 < 19.0.0' react-dom: '>= 16.8.0 < 19.0.0' + peerDependenciesMeta: + '@types/react': + optional: true + react: + optional: true + react-dom: + optional: true dependencies: '@algolia/autocomplete-core': 1.7.1 '@algolia/autocomplete-preset-algolia': 1.7.1_algoliasearch@4.13.1 @@ -1617,14 +1627,12 @@ packages: '@vue/shared': 3.2.37 estree-walker: 2.0.2 source-map: 0.6.1 - dev: true /@vue/compiler-dom/3.2.37: resolution: {integrity: sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==} dependencies: '@vue/compiler-core': 3.2.37 '@vue/shared': 3.2.37 - dev: true /@vue/compiler-sfc/3.2.37: resolution: {integrity: sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==} @@ -1639,14 +1647,12 @@ packages: magic-string: 0.25.9 postcss: 8.4.14 source-map: 0.6.1 - dev: true /@vue/compiler-ssr/3.2.37: resolution: {integrity: sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==} dependencies: '@vue/compiler-dom': 3.2.37 '@vue/shared': 3.2.37 - dev: true /@vue/devtools-api/6.2.0: resolution: {integrity: sha512-pF1G4wky+hkifDiZSWn8xfuLOJI1ZXtuambpBEYaf7Xaf6zC/pM29rvAGpd3qaGXnr4BAXU1Pxz/VfvBGwexGA==} @@ -1659,20 +1665,17 @@ packages: '@vue/shared': 3.2.37 estree-walker: 2.0.2 magic-string: 0.25.9 - dev: true /@vue/reactivity/3.2.37: resolution: {integrity: sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==} dependencies: '@vue/shared': 3.2.37 - dev: true /@vue/runtime-core/3.2.37: resolution: {integrity: sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==} dependencies: '@vue/reactivity': 3.2.37 '@vue/shared': 3.2.37 - dev: true /@vue/runtime-dom/3.2.37: resolution: {integrity: sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==} @@ -1680,7 +1683,6 @@ packages: '@vue/runtime-core': 3.2.37 '@vue/shared': 3.2.37 csstype: 2.6.20 - dev: true /@vue/server-renderer/3.2.37_vue@3.2.37: resolution: {integrity: sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==} @@ -1690,11 +1692,9 @@ packages: '@vue/compiler-ssr': 3.2.37 '@vue/shared': 3.2.37 vue: 3.2.37 - dev: true /@vue/shared/3.2.37: resolution: {integrity: sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==} - dev: true /@vue/test-utils/2.0.1_vue@3.2.37: resolution: {integrity: sha512-4kt7Sw1gzXeQOsMqrwrQbmEiG8El4MP8P4hfxkmfXdUHf7yHa3xC5CQc0x2YyuhT41w2d4K4O0ZdRvZhGdZlow==} @@ -2553,7 +2553,6 @@ packages: /csstype/2.6.20: resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==} - dev: true /dargs/7.0.0: resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==} @@ -2579,6 +2578,11 @@ packages: /debug/2.6.9: resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==} + peerDependencies: + supports-color: '*' + peerDependenciesMeta: + supports-color: + optional: true dependencies: ms: 2.0.0 dev: false @@ -3151,7 +3155,7 @@ packages: dependencies: confusing-browser-globals: 1.0.11 eslint: 8.19.0 - eslint-plugin-import: 2.26.0_eslint@8.19.0 + eslint-plugin-import: 2.26.0_b991b8cc37fbaea14375bc1442f912c5 object.assign: 4.1.2 object.entries: 1.1.5 semver: 6.3.0 @@ -3173,27 +3177,46 @@ packages: resolve: 1.22.1 dev: false - /eslint-module-utils/2.7.3: + /eslint-module-utils/2.7.3_0e410f8f48e63a2eb2da71474b5e1cf0: resolution: {integrity: sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==} engines: {node: '>=4'} + peerDependencies: + '@typescript-eslint/parser': '*' + eslint-import-resolver-node: '*' + eslint-import-resolver-typescript: '*' + eslint-import-resolver-webpack: '*' + peerDependenciesMeta: + '@typescript-eslint/parser': + optional: true + eslint-import-resolver-node: + optional: true + eslint-import-resolver-typescript: + optional: true + eslint-import-resolver-webpack: + optional: true dependencies: - debug: 3.2.7 - find-up: 2.1.0 + '@typescript-eslint/parser': 5.30.3_eslint@8.19.0+typescript@4.7.4 + eslint-import-resolver-node: 0.3.6 dev: false - /eslint-plugin-import/2.26.0_eslint@8.19.0: + /eslint-plugin-import/2.26.0_b991b8cc37fbaea14375bc1442f912c5: resolution: {integrity: sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==} engines: {node: '>=4'} peerDependencies: + '@typescript-eslint/parser': '*' eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 + peerDependenciesMeta: + '@typescript-eslint/parser': + optional: true dependencies: + '@typescript-eslint/parser': 5.30.3_eslint@8.19.0+typescript@4.7.4 array-includes: 3.1.5 array.prototype.flat: 1.3.0 debug: 2.6.9 doctrine: 2.1.0 eslint: 8.19.0 eslint-import-resolver-node: 0.3.6 - eslint-module-utils: 2.7.3 + eslint-module-utils: 2.7.3_0e410f8f48e63a2eb2da71474b5e1cf0 has: 1.0.3 is-core-module: 2.9.0 is-glob: 4.0.3 @@ -3201,6 +3224,10 @@ packages: object.values: 1.1.5 resolve: 1.22.1 tsconfig-paths: 3.14.1 + transitivePeerDependencies: + - eslint-import-resolver-typescript + - eslint-import-resolver-webpack + - supports-color dev: false /eslint-plugin-vue/9.1.1_eslint@8.19.0: @@ -5079,7 +5106,6 @@ packages: hasBin: true dependencies: js-tokens: 4.0.0 - dev: true /lower-case/2.0.2: resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==} @@ -5114,7 +5140,6 @@ packages: resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==} dependencies: sourcemap-codec: 1.4.8 - dev: true /make-dir/2.1.0: resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==} @@ -5942,11 +5967,13 @@ packages: resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} peerDependencies: react: ^18.2.0 + peerDependenciesMeta: + react: + optional: true dependencies: loose-envify: 1.4.0 react: 18.2.0 scheduler: 0.23.0 - dev: true /react-is/17.0.2: resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==} @@ -5957,7 +5984,6 @@ packages: engines: {node: '>=0.10.0'} dependencies: loose-envify: 1.4.0 - dev: true /read-pkg-up/3.0.0: resolution: {integrity: sha512-YFzFrVvpC6frF1sz8psoHDBGF7fLPc+llq/8NB43oagqWkx8ar5zYtsTORtOjw9W2RHLpWP+zTWwBvf1bCmcSw==} @@ -6220,7 +6246,6 @@ packages: resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==} dependencies: loose-envify: 1.4.0 - dev: true /section-matter/1.0.0: resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==} @@ -6341,7 +6366,6 @@ packages: /sourcemap-codec/1.4.8: resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==} - dev: true /spdx-correct/3.1.1: resolution: {integrity: sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==} @@ -6943,7 +6967,6 @@ packages: '@vue/runtime-dom': 3.2.37 '@vue/server-renderer': 3.2.37_vue@3.2.37 '@vue/shared': 3.2.37 - dev: true /w3c-hr-time/1.0.2: resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}