From 8574339579229d4ffcaec414a0acc0749be5bc93 Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 20 Aug 2022 22:28:05 +0800 Subject: [PATCH 01/17] docs: add import tips (#10941) --- packages/vant/docs/markdown/quickstart.zh-CN.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/vant/docs/markdown/quickstart.zh-CN.md b/packages/vant/docs/markdown/quickstart.zh-CN.md index 00826811d..634488f7a 100644 --- a/packages/vant/docs/markdown/quickstart.zh-CN.md +++ b/packages/vant/docs/markdown/quickstart.zh-CN.md @@ -210,6 +210,8 @@ const app = createApp(); app.use(Vant); ``` +> 提示：在单个项目中不应该同时使用「全量引入」和「按需引入」，否则会导致代码重复、样式错乱等问题。 + ### 手动按需引入组件（不推荐） 在不使用任何构建插件的情况下，可以手动引入需要使用的组件和样式。 From ec1d32db4aec7f5c4bcaa322b57c578c33288254 Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 20 Aug 2022 22:51:08 +0800 Subject: [PATCH 02/17] fix(Empty): generate unique id to avoid render issue (#10943) --- packages/vant/src/empty/Empty.tsx | 276 ++++++++++++++++++++++++++--- packages/vant/src/empty/Images.tsx | 203 --------------------- 2 files changed, 255 insertions(+), 224 deletions(-) delete mode 100644 packages/vant/src/empty/Images.tsx 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')} - - - - - - - - -); From b4072ef2bdaf5c8d636254abc3060a3a80f867ab Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 21 Aug 2022 09:52:09 +0800 Subject: [PATCH 03/17] docs: import quick start document (#10945) --- README.md | 4 ++ README.zh-CN.md | 4 ++ .../vant/docs/markdown/quickstart.en-US.md | 64 ++++++++--------- .../vant/docs/markdown/quickstart.zh-CN.md | 70 +++++++++---------- 4 files changed, 69 insertions(+), 73 deletions(-) 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/docs/markdown/quickstart.en-US.md b/packages/vant/docs/markdown/quickstart.en-US.md index 9f38280ff..fa0fe0bd8 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 { ImagePreview } 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 634488f7a..dc342291f 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,31 +216,4 @@ import { ImagePreview } 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'; -``` From 72d515b30ebdc9f64dd463ba1cb8b4ddb5904e7c Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 21 Aug 2022 10:03:05 +0800 Subject: [PATCH 04/17] fix: incorrect tag name in WebStorm (#10946) --- packages/vant-cli/src/commands/build.ts | 5 +++-- packages/vant-cli/src/compiler/web-types/index.ts | 3 ++- packages/vant/vant.config.mjs | 1 + 3 files changed, 6 insertions(+), 3 deletions(-) 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/vant.config.mjs b/packages/vant/vant.config.mjs index 7e127b6ab..622f5ab66 100644 --- a/packages/vant/vant.config.mjs +++ b/packages/vant/vant.config.mjs @@ -2,6 +2,7 @@ export default { name: 'vant', build: { srcDir: 'src', + tagPrefix: 'van-', namedExport: true, skipInstall: ['lazyload'], packageManager: 'pnpm', From 1e8187bc375744a8fd8df802f8dcab5e89c40852 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 21 Aug 2022 10:06:45 +0800 Subject: [PATCH 05/17] chore: fix failed to deploy website (#10947) --- packages/vant/docs/markdown/changelog.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vant/docs/markdown/changelog.zh-CN.md b/packages/vant/docs/markdown/changelog.zh-CN.md index 305897c0a..938705d57 100644 --- a/packages/vant/docs/markdown/changelog.zh-CN.md +++ b/packages/vant/docs/markdown/changelog.zh-CN.md @@ -25,7 +25,7 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。 **Bug Fixes** -- 修复 CDN 资源中包含 `process.env.NODE_ENV` 导致报错的问题 [#10887](https://github.com/vant-ui/vant/issues/10887) +- 修复 CDN 资源中包含 `NODE_ENV` 导致报错的问题 [#10887](https://github.com/vant-ui/vant/issues/10887) ### [v3.5.3](https://github.com/vant-ui/vant/compare/v3.5.2...v3.5.3) From 31ac5faa3a74348b6978083e207abc1fe56d7991 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 21 Aug 2022 10:55:18 +0800 Subject: [PATCH 06/17] feat(@vant/use): useClickAway support multiple targets (#10948) --- packages/vant-use/src/useClickAway/index.ts | 14 +++++++++++--- .../vant/docs/markdown/use-click-away.en-US.md | 2 +- .../vant/docs/markdown/use-click-away.zh-CN.md | 10 +++++----- 3 files changed, 17 insertions(+), 9 deletions(-) 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/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 From 326880a4e19f8ab8ffe6042a8cc968cc03b02616 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sun, 21 Aug 2022 10:56:57 +0800 Subject: [PATCH 07/17] release: @vant/use 1.4.2 --- packages/vant-use/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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", From 236a2e43f37bfbad12f56bfd6fb60b97a9b8fdff Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 21 Aug 2022 11:18:20 +0800 Subject: [PATCH 08/17] fix(Popover): can not scroll inside popup (#10949) * fix(Popover): can not scroll inside popup * fix: ref --- packages/vant/package.json | 2 +- .../vant/src/composables/use-lock-scroll.ts | 4 +- packages/vant/src/popover/Popover.tsx | 21 ++++-- pnpm-lock.yaml | 75 ++++++++++++------- 4 files changed, 66 insertions(+), 36 deletions(-) diff --git a/packages/vant/package.json b/packages/vant/package.json index 8940c1a79..187121958 100644 --- a/packages/vant/package.json +++ b/packages/vant/package.json @@ -46,7 +46,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/popover/Popover.tsx b/packages/vant/src/popover/Popover.tsx index 69369f652..e7b007cd9 100644 --- a/packages/vant/src/popover/Popover.tsx +++ b/packages/vant/src/popover/Popover.tsx @@ -3,6 +3,7 @@ import { watch, nextTick, onMounted, + watchEffect, onBeforeUnmount, defineComponent, type PropType, @@ -90,6 +91,7 @@ export default defineComponent({ setup(props, { emit, slots, attrs }) { let popper: Instance | null; + const popupRef = ref(); 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/pnpm-lock.yaml b/pnpm-lock.yaml index 09acdc75b..6a2bca88d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -51,7 +51,7 @@ importers: '@vant/eslint-config': workspace:* '@vant/icons': ^1.8.0 '@vant/popperjs': ^1.2.1 - '@vant/use': ^1.4.1 + '@vant/use': ^1.4.2 '@vue/runtime-core': ^3.2.27 '@vue/test-utils': ^2.0.1 typescript: ^4.7.4 @@ -199,7 +199,7 @@ importers: '@typescript-eslint/parser': 5.30.3_eslint@8.19.0+typescript@4.7.4 eslint-config-airbnb-base: 15.0.0_86af6c937a18f7b068a2d4281b478827 eslint-config-prettier: 8.5.0_eslint@8.19.0 - eslint-plugin-import: 2.26.0_eslint@8.19.0 + eslint-plugin-import: 2.26.0_b991b8cc37fbaea14375bc1442f912c5 eslint-plugin-vue: 9.1.1_eslint@8.19.0 devDependencies: enhanced-resolve: 5.10.0 @@ -253,6 +253,9 @@ packages: peerDependencies: '@algolia/client-search': ^4.9.1 algoliasearch: ^4.9.1 + peerDependenciesMeta: + '@algolia/client-search': + optional: true dependencies: '@algolia/autocomplete-shared': 1.7.1 algoliasearch: 4.13.1 @@ -800,6 +803,13 @@ packages: '@types/react': '>= 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 @@ -1601,14 +1611,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==} @@ -1623,14 +1631,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==} @@ -1643,20 +1649,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==} @@ -1664,7 +1667,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==} @@ -1674,11 +1676,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==} @@ -2537,7 +2537,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==} @@ -2563,6 +2562,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 @@ -3135,7 +3139,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 @@ -3157,27 +3161,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 @@ -3185,6 +3208,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: @@ -5063,7 +5090,6 @@ packages: hasBin: true dependencies: js-tokens: 4.0.0 - dev: true /lower-case/2.0.2: resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==} @@ -5098,7 +5124,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==} @@ -5926,11 +5951,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==} @@ -5941,7 +5968,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==} @@ -6204,7 +6230,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==} @@ -6325,7 +6350,6 @@ packages: /sourcemap-codec/1.4.8: resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==} - dev: true /spdx-correct/3.1.1: resolution: {integrity: sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==} @@ -6927,7 +6951,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==} From 8d51f9e08ea5833b4b27077c61727924c9112f0b Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sun, 21 Aug 2022 11:23:01 +0800 Subject: [PATCH 09/17] release: 3.6.0 --- packages/vant/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vant/package.json b/packages/vant/package.json index 187121958..4468b5e06 100644 --- a/packages/vant/package.json +++ b/packages/vant/package.json @@ -1,6 +1,6 @@ { "name": "vant", - "version": "3.5.4", + "version": "3.6.0", "description": "Lightweight Mobile UI Components built on Vue", "main": "lib/vant.cjs.js", "module": "es/index.mjs", From 667034322ed4e1c39fd014e83d8661a1ff891ee0 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sun, 21 Aug 2022 11:30:21 +0800 Subject: [PATCH 10/17] docs(changelog): vant@3.6.0 --- .../vant/docs/markdown/changelog.en-US.md | 26 +++++++++++++++++++ .../vant/docs/markdown/changelog.zh-CN.md | 26 +++++++++++++++++++ 2 files changed, 52 insertions(+) diff --git a/packages/vant/docs/markdown/changelog.en-US.md b/packages/vant/docs/markdown/changelog.en-US.md index 69c7a92b4..78d8f11cf 100644 --- a/packages/vant/docs/markdown/changelog.en-US.md +++ b/packages/vant/docs/markdown/changelog.en-US.md @@ -19,6 +19,32 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/). ## Details +### [v3.6.0](https://github.com/vant-ui/vant/compare/v3.5.3...v3.6.0) + +`2022-08-21` + +**New Component** + +- Add new component [Space](#/en-US/space), contributed by [@LadyChatterleyLover](https://github.com/LadyChatterleyLover) [#10857](https://github.com/vant-ui/vant/issues/10857) + +**Feature** + +- ConfigProvider: add z-index prop [#10915](https://github.com/vant-ui/vant/issues/10915) +- Form: add validateEmpty option of rule [#10913](https://github.com/vant-ui/vant/issues/10913) +- Popup: add role and tabindex for a11y [#10894](https://github.com/vant-ui/vant/issues/10894) +- TouchEmulator: support .mjs extension [#10888](https://github.com/vant-ui/vant/issues/10888) + +**Bug Fixes** + +- Fix incorrect tag name in WebStorm [#10946](https://github.com/vant-ui/vant/issues/10946) +- Badge: should hide string zero when using show-zero prop [#10921](https://github.com/vant-ui/vant/issues/10921) +- Calendar: content disappeared when hiding [#10910](https://github.com/vant-ui/vant/issues/10910) +- Calendar: reading getFullYear error in some cases [#10909](https://github.com/vant-ui/vant/issues/10909) +- Empty: generate unique id to avoid render issue [#10943](https://github.com/vant-ui/vant/issues/10943) +- Popover: can not scroll inside popup [#10949](https://github.com/vant-ui/vant/issues/10949) +- PullRefresh: fix passive event warning [#10938](https://github.com/vant-ui/vant/issues/10938) +- Search: --van-search-input-height var not work [#10911](https://github.com/vant-ui/vant/issues/10911) + ### [v3.5.4](https://github.com/vant-ui/vant/compare/v3.5.3...v3.5.4) `2022-08-06` diff --git a/packages/vant/docs/markdown/changelog.zh-CN.md b/packages/vant/docs/markdown/changelog.zh-CN.md index 938705d57..af38bd810 100644 --- a/packages/vant/docs/markdown/changelog.zh-CN.md +++ b/packages/vant/docs/markdown/changelog.zh-CN.md @@ -19,6 +19,32 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。 ## 更新内容 +### [v3.6.0](https://github.com/vant-ui/vant/compare/v3.5.3...v3.6.0) + +`2022-08-21` + +**New Component** + +- 新增 [Space 间距](#/zh-CN/space) 组件, 由 [@LadyChatterleyLover](https://github.com/LadyChatterleyLover) 贡献 [#10857](https://github.com/vant-ui/vant/issues/10857) + +**Feature** + +- ConfigProvider: 新增 z-index 属性，用于设置弹窗组件的 z-index [#10915](https://github.com/vant-ui/vant/issues/10915) +- Form: 新增 rule 的 validateEmpty 选项 [#10913](https://github.com/vant-ui/vant/issues/10913) +- Popup: 新增 role 和 tabindex，优化无障碍访问 [#10894](https://github.com/vant-ui/vant/issues/10894) +- TouchEmulator: 支持 .mjs 后缀 [#10888](https://github.com/vant-ui/vant/issues/10888) + +**Bug Fixes** + +- 修复在 WebStorm 下标签无法自动补全的问题 [#10946](https://github.com/vant-ui/vant/issues/10946) +- Badge: 修复使用 show-zero 时字符串 `'0'` 不生效的问题 [#10921](https://github.com/vant-ui/vant/issues/10921) +- Calendar: 修复关闭弹窗过程中内容白屏的问题 [#10910](https://github.com/vant-ui/vant/issues/10910) +- Calendar: 修复控制台出现读取 getFullYear 异常的问题 [#10909](https://github.com/vant-ui/vant/issues/10909) +- Empty: 修复在 Tab 下嵌套使用时渲染异常的问题 [#10943](https://github.com/vant-ui/vant/issues/10943) +- Popover: 修复在 Popup 下嵌套使用时无法滚动的问题 [#10949](https://github.com/vant-ui/vant/issues/10949) +- PullRefresh: 修复 Chrome 控制台出现 passive event warning 的问题 [#10938](https://github.com/vant-ui/vant/issues/10938) +- Search: 修复 --van-search-input-height 样式变量不生效的问题 [#10911](https://github.com/vant-ui/vant/issues/10911) + ### [v3.5.4](https://github.com/vant-ui/vant/compare/v3.5.3...v3.5.4) `2022-08-06` From ca583e107562057e08caf27f2781c57fa3d91f87 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 21 Aug 2022 17:28:32 +0800 Subject: [PATCH 11/17] docs(NoticeBar): disable swipe drag in demo (#10950) --- packages/vant/src/notice-bar/README.md | 1 + packages/vant/src/notice-bar/README.zh-CN.md | 1 + packages/vant/src/notice-bar/demo/index.vue | 1 + 3 files changed, 3 insertions(+) diff --git a/packages/vant/src/notice-bar/README.md b/packages/vant/src/notice-bar/README.md index 87cb6cefc..042bf02c9 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 0c3cc5c27..6f566454d 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 03a12e0ba..1e50ff452 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') }} From cb93bd2da3551da354ccd3810d6cd3f4af101121 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 21 Aug 2022 17:33:57 +0800 Subject: [PATCH 12/17] perf: add correct passive flag to improve scroll performance (#10951) --- packages/vant/src/dropdown-menu/DropdownMenu.tsx | 5 ++++- packages/vant/src/index-bar/IndexBar.tsx | 5 ++++- packages/vant/src/list/List.tsx | 5 ++++- packages/vant/src/sticky/Sticky.tsx | 5 ++++- packages/vant/src/tabs/Tabs.tsx | 5 ++++- 5 files changed, 20 insertions(+), 5 deletions(-) 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/index-bar/IndexBar.tsx b/packages/vant/src/index-bar/IndexBar.tsx index b2cc1ed8f..f8cd7bbfe 100644 --- a/packages/vant/src/index-bar/IndexBar.tsx +++ b/packages/vant/src/index-bar/IndexBar.tsx @@ -182,7 +182,10 @@ export default defineComponent({ nextTick(onScroll); }; - useEventListener('scroll', onScroll, { target: scrollParent }); + useEventListener('scroll', onScroll, { + target: scrollParent, + passive: true, + }); onMounted(init); 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/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/tabs/Tabs.tsx b/packages/vant/src/tabs/Tabs.tsx index 679ae9ec0..ab0bd770b 100644 --- a/packages/vant/src/tabs/Tabs.tsx +++ b/packages/vant/src/tabs/Tabs.tsx @@ -485,7 +485,10 @@ export default defineComponent({ onActivated(setLine); onPopupReopen(setLine); onMountedOrActivated(init); - useEventListener('scroll', onScroll, { target: scroller }); + useEventListener('scroll', onScroll, { + target: scroller, + passive: true, + }); linkChildren({ id, From 6b7ae0f6a03c3554b159f3e876844357bd7c959d Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 21 Aug 2022 17:49:48 +0800 Subject: [PATCH 13/17] types(@vant/use): improve useEventListener typing (#10952) --- packages/vant-use/src/useEventListener/index.ts | 15 ++++++++++++++- packages/vant/src/pull-refresh/PullRefresh.tsx | 4 ++-- 2 files changed, 16 insertions(+), 3 deletions(-) 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/src/pull-refresh/PullRefresh.tsx b/packages/vant/src/pull-refresh/PullRefresh.tsx index 29f36af63..e1b2c749b 100644 --- a/packages/vant/src/pull-refresh/PullRefresh.tsx +++ b/packages/vant/src/pull-refresh/PullRefresh.tsx @@ -222,11 +222,11 @@ export default defineComponent({ ); // add passive option to avoid Chrome warning - useEventListener('touchstart', onTouchStart as EventListener, { + useEventListener('touchstart', onTouchStart, { target: track, passive: true, }); - useEventListener('touchmove', onTouchMove as EventListener, { + useEventListener('touchmove', onTouchMove, { target: track, }); From 717f244d2fdb6ffe23bacc79fa7a33290b19fb8c Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 21 Aug 2022 22:08:27 +0800 Subject: [PATCH 14/17] fix: reduce passive event warning of touchstart event (#10954) --- packages/vant/src/image-preview/ImagePreviewItem.tsx | 2 +- packages/vant/src/index-bar/IndexBar.tsx | 2 +- packages/vant/src/number-keyboard/NumberKeyboard.tsx | 4 +--- packages/vant/src/number-keyboard/NumberKeyboardKey.tsx | 4 ++-- packages/vant/src/password-input/PasswordInput.tsx | 2 +- packages/vant/src/picker/PickerColumn.tsx | 2 +- packages/vant/src/pull-refresh/PullRefresh.tsx | 7 ++----- packages/vant/src/rate/Rate.tsx | 2 +- packages/vant/src/slider/Slider.tsx | 2 +- packages/vant/src/stepper/Stepper.tsx | 2 +- packages/vant/src/swipe-cell/SwipeCell.tsx | 2 +- packages/vant/src/swipe/Swipe.tsx | 2 +- packages/vant/src/vue-tsx-shim.d.ts | 7 +++++++ 13 files changed, 21 insertions(+), 19 deletions(-) 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/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 66f917526..a1abe0372 100644 --- a/packages/vant/src/picker/PickerColumn.tsx +++ b/packages/vant/src/picker/PickerColumn.tsx @@ -308,7 +308,7 @@ export default defineComponent({ return () => (
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 9ed73eeb1..cd53485e7 100644 --- a/packages/vant/src/slider/Slider.tsx +++ b/packages/vant/src/slider/Slider.tsx @@ -301,7 +301,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/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({
Date: Wed, 24 Aug 2022 21:32:29 +0800 Subject: [PATCH 15/17] fix(Tabs): resize not work for swipeable tabs (#10964) --- packages/vant/src/tabs/Tabs.tsx | 9 ++++++++- packages/vant/src/tabs/TabsContent.tsx | 3 +++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/vant/src/tabs/Tabs.tsx b/packages/vant/src/tabs/Tabs.tsx index ab0bd770b..f86e89e81 100644 --- a/packages/vant/src/tabs/Tabs.tsx +++ b/packages/vant/src/tabs/Tabs.tsx @@ -125,6 +125,7 @@ export default defineComponent({ const root = ref(); const navRef = ref(); const wrapRef = ref(); + const contentRef = ref(); const id = useId(); const scroller = useScrollParent(root); @@ -477,8 +478,13 @@ 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, }); @@ -514,6 +520,7 @@ export default defineComponent({ [renderHeader(), slots['nav-bottom']?.()] )} (
Date: Wed, 24 Aug 2022 21:45:10 +0800 Subject: [PATCH 16/17] fix(Popup&Toast): invalid adaptive width (#10961) * fix(Popup&Toast):Invalid adaptive width * Update index.less Co-authored-by: neverland --- packages/vant/src/popup/index.less | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/vant/src/popup/index.less b/packages/vant/src/popup/index.less index ab4a72243..240ef9536 100644 --- a/packages/vant/src/popup/index.less +++ b/packages/vant/src/popup/index.less @@ -25,8 +25,10 @@ &--center { top: 50%; - left: 50%; - transform: translate3d(-50%, -50%, 0); + left: 0; + right: 0; + margin: 0 auto; + transform: translateY(-50%); &.van-popup--round { border-radius: var(--van-popup-round-border-radius); From aa1689fed8e58d52db2367263ccbcc08853ff848 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Wed, 24 Aug 2022 21:56:10 +0800 Subject: [PATCH 17/17] Revert "fix(Popup&Toast): invalid adaptive width (#10961)" This reverts commit b6dd0cb36c0445e199335c36a4c21e696cf8b073. --- packages/vant/src/popup/index.less | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/vant/src/popup/index.less b/packages/vant/src/popup/index.less index 240ef9536..ab4a72243 100644 --- a/packages/vant/src/popup/index.less +++ b/packages/vant/src/popup/index.less @@ -25,10 +25,8 @@ &--center { top: 50%; - left: 0; - right: 0; - margin: 0 auto; - transform: translateY(-50%); + left: 50%; + transform: translate3d(-50%, -50%, 0); &.van-popup--round { border-radius: var(--van-popup-round-border-radius);