From c83a57b2bde4e6bc0a461154adae121cf26cf056 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 19 Jun 2022 15:34:00 +0800 Subject: [PATCH 1/3] docs: add guide of function component style (#10728) --- .../vant/docs/markdown/quickstart.en-US.md | 22 +++++++++++++++++ .../vant/docs/markdown/quickstart.zh-CN.md | 24 ++++++++++++++++++- 2 files changed, 45 insertions(+), 1 deletion(-) diff --git a/packages/vant/docs/markdown/quickstart.en-US.md b/packages/vant/docs/markdown/quickstart.en-US.md index 759a093b7..9f38280ff 100644 --- a/packages/vant/docs/markdown/quickstart.en-US.md +++ b/packages/vant/docs/markdown/quickstart.en-US.md @@ -172,6 +172,28 @@ const app = createApp(); app.use(Button); ``` +#### 4. Style of Function Components + +Some components of Vant are provided as function, including `Toast`, `Dialog`, `Notify` and `ImagePreview`. When using function components, `unplugin-vue-components` can not auto import the component style, so we need to import style manually. + +```js +// Toast +import { Toast } from 'vant'; +import 'vant/es/toast/style'; + +// Dialog +import { Dialog } from 'vant'; +import 'vant/es/dialog/style'; + +// Notify +import { Notify } from 'vant'; +import 'vant/es/notify/style'; + +// ImagePreview +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) diff --git a/packages/vant/docs/markdown/quickstart.zh-CN.md b/packages/vant/docs/markdown/quickstart.zh-CN.md index de5aec147..00826811d 100644 --- a/packages/vant/docs/markdown/quickstart.zh-CN.md +++ b/packages/vant/docs/markdown/quickstart.zh-CN.md @@ -173,7 +173,29 @@ const app = createApp(); app.use(Button); ``` -> 注意：Vant 默认支持通过 Tree Shaking，因此你也可以不配置任何插件，直接通过 Tree Shaking 来移除不需要的 JS 代码，但 CSS 无法通过这种方式优化。 +#### 4. 引入函数组件的样式 + +Vant 中有个别组件是以函数的形式提供的，包括 `Toast`，`Dialog`，`Notify` 和 `ImagePreview` 组件。在使用函数组件时，`unplugin-vue-components` 无法自动引入对应的样式，因此需要手动引入样式。 + +```js +// Toast +import { Toast } from 'vant'; +import 'vant/es/toast/style'; + +// Dialog +import { Dialog } from 'vant'; +import 'vant/es/dialog/style'; + +// Notify +import { Notify } from 'vant'; +import 'vant/es/notify/style'; + +// ImagePreview +import { ImagePreview } from 'vant'; +import 'vant/es/image-preview/style'; +``` + +> 注意：Vant 支持 Tree Shaking，因此你也可以不配置任何插件，通过 Tree Shaking 即可移除不需要的 JS 代码，但 CSS 无法通过这种方式优化。 ### 导入所有组件（不推荐） From 2c2cdd077ffb59c5cbdcacc02d80e7958323f8d5 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 19 Jun 2022 16:04:10 +0800 Subject: [PATCH 2/3] chore(cli): remove unused ssr.js (#10729) --- .../vant-cli/src/compiler/compile-bundles.ts | 28 +------------------ 1 file changed, 1 insertion(+), 27 deletions(-) diff --git a/packages/vant-cli/src/compiler/compile-bundles.ts b/packages/vant-cli/src/compiler/compile-bundles.ts index 0e1367fa8..a8bc96b65 100644 --- a/packages/vant-cli/src/compiler/compile-bundles.ts +++ b/packages/vant-cli/src/compiler/compile-bundles.ts @@ -1,33 +1,8 @@ -import fse from 'fs-extra'; -import { join } from 'path'; import { build } from 'vite'; -import { getPackageJson, getVantConfig, LIB_DIR } from '../common/constant.js'; +import { getPackageJson } from '../common/constant.js'; import { mergeCustomViteConfig } from '../common/index.js'; import { getViteConfigForPackage } from '../config/vite.package.js'; -// generate entry file for nuxt -async function genEntryForSSR() { - const { name } = getVantConfig(); - const cjsPath = join(LIB_DIR, 'ssr.js'); - const mjsPath = join(LIB_DIR, 'ssr.mjs'); - - const cjsContent = `'use strict'; - -if (process.env.NODE_ENV === 'production') { - module.exports = require('./${name}.cjs.min.js'); -} else { - module.exports = require('./${name}.cjs.js'); -}; -`; - - const mjsContent = `export * from './index.js';\n`; - - return Promise.all([ - fse.outputFile(cjsPath, cjsContent), - fse.outputFile(mjsPath, mjsContent), - ]); -} - export async function compileBundles() { const dependencies = getPackageJson().dependencies || {}; const externals = Object.keys(dependencies); @@ -64,5 +39,4 @@ export async function compileBundles() { await Promise.all( configs.map((config) => build(mergeCustomViteConfig(config))) ); - await genEntryForSSR(); } From e61d85a8901005e1d0642af9a90db24782bd6a2b Mon Sep 17 00:00:00 2001 From: AmazingPromise <907953320@qq.com> Date: Sat, 25 Jun 2022 11:44:11 +0800 Subject: [PATCH 3/3] fix(List): element with `overflow: overlay` style should be considered a scroll container (#10743) --- packages/vant-use/src/useScrollParent/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vant-use/src/useScrollParent/index.ts b/packages/vant-use/src/useScrollParent/index.ts index 7974d4060..e8d4b1c29 100644 --- a/packages/vant-use/src/useScrollParent/index.ts +++ b/packages/vant-use/src/useScrollParent/index.ts @@ -3,7 +3,7 @@ import { inBrowser } from '../utils'; type ScrollElement = HTMLElement | Window; -const overflowScrollReg = /scroll|auto/i; +const overflowScrollReg = /scroll|auto|overlay/i; const defaultRoot = inBrowser ? window : undefined; function isElement(node: Element) {