diff --git a/packages/create-vant-cli-app/generators/vue2/package.json.tpl b/packages/create-vant-cli-app/generators/vue2/package.json.tpl index b8785f752..c51c9f126 100644 --- a/packages/create-vant-cli-app/generators/vue2/package.json.tpl +++ b/packages/create-vant-cli-app/generators/vue2/package.json.tpl @@ -34,7 +34,6 @@ }, "devDependencies": { "@vant/cli": "^2.0.0", - "babel-plugin-import": "^1.13.0", "vue": "^2.6.11", "vue-template-compiler": "^2.6.11" }, diff --git a/packages/vant-cli/docs/directory.md b/packages/vant-cli/docs/directory.md index 6a49c902f..b1731753c 100644 --- a/packages/vant-cli/docs/directory.md +++ b/packages/vant-cli/docs/directory.md @@ -42,7 +42,7 @@ button └─ README.md # component doc ``` -When using this directory structure, the developer of the component library needs to import the JS and CSS files respectively, and the styles can also be imported automatically through babel-plugin-import. +When using this directory structure, the developer of the component library needs to import the JS and CSS files respectively. Theme customization can be achieved by importing style source files (less or scss) and modifying style variables. diff --git a/packages/vant-cli/docs/directory.zh-CN.md b/packages/vant-cli/docs/directory.zh-CN.md index a0e6a77ef..6f3f2f400 100644 --- a/packages/vant-cli/docs/directory.zh-CN.md +++ b/packages/vant-cli/docs/directory.zh-CN.md @@ -42,7 +42,7 @@ button └─ README.md # 组件文档 ``` -采用这种目录结构时，组件的使用者需要分别引入 JS 和 CSS 文件，也可以通过 babel-plugin-import 自动引入样式。 +采用这种目录结构时，组件的使用者需要分别引入 JS 和 CSS 文件。 通过引入样式源文件（less 或 scss）并修改样式变量，可以实现主题定制功能。 diff --git a/packages/vant/docs/markdown/quickstart.en-US.md b/packages/vant/docs/markdown/quickstart.en-US.md index efc877e92..759a093b7 100644 --- a/packages/vant/docs/markdown/quickstart.en-US.md +++ b/packages/vant/docs/markdown/quickstart.en-US.md @@ -92,36 +92,69 @@ In the GUI, click on 'Dependencies' -> `Install Dependencies` and add `vant` to ## Usage -### Import on demand in vite projects (recommended) +### Import on demand (recommended) -If you are using vite, please use [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import). +If you are using vite, webpack or vue-cli, please use [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components). #### 1. Install Plugin ```bash # with npm -npm i vite-plugin-style-import@1.4.1 -D +npm i unplugin-vue-components -D # with yarn -yarn add vite-plugin-style-import@1.4.1 -D +yarn add unplugin-vue-components -D # with pnpm -pnpm add vite-plugin-style-import@1.4.1 -D +pnpm add unplugin-vue-components -D ``` #### 2. Configure Plugin -Configure the plugin in the `vite.config.js` file: +For `vite` based project，configure the plugin in the `vite.config.js` file: ```js import vue from '@vitejs/plugin-vue'; -import styleImport, { VantResolve } from 'vite-plugin-style-import'; +import Components from 'unplugin-vue-components/vite'; +import { VantResolver } from 'unplugin-vue-components/resolvers'; export default { plugins: [ vue(), - styleImport({ - resolves: [VantResolve()], + Components({ + resolvers: [VantResolver()], + }), + ], +}; +``` + +For `vue-cli` based project，configure the plugin in the `vue.config.js` file: + +```js +const { VantResolver } = require('unplugin-vue-components/resolvers'); +const ComponentsPlugin = require('unplugin-vue-components/webpack'); + +module.exports = { + configureWebpack: { + plugins: [ + ComponentsPlugin({ + resolvers: [VantResolver()], + }), + ], + }, +}; +``` + +For `webpack` based project，configure the plugin in the `webpack.config.js` file: + +```js +const { VantResolver } = require('unplugin-vue-components/resolvers'); +const ComponentsPlugin = require('unplugin-vue-components/webpack'); + +module.exports = { + plugins: [ + ComponentsPlugin({ + resolvers: [VantResolver()], }), ], }; @@ -139,51 +172,7 @@ const app = createApp(); app.use(Button); ``` -> Vant supports Tree Shaking by default. - -### Import on demand in non-vite projects (recommended) - -In non-vite projects, use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) to import components on demand. - -#### 1. Install Plugin - -```bash -npm i babel-plugin-import -D -``` - -#### 2. Configure Plugin - -Set babel config in `.babelrc` or `babel.config.js`: - -```json -{ - "plugins": [ - [ - "import", - { - "libraryName": "vant", - "libraryDirectory": "es", - "style": true - } - ] - ] -} -``` - -#### 3. Import Components - -Then you can import components from Vant: - -```js -// Input -import { Button } from 'vant'; - -// Output -import Button from 'vant/es/button'; -import 'vant/es/button/style'; -``` - -> If you are using TypeScript，please use [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) instead. +> 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) @@ -198,8 +187,6 @@ const app = createApp(); app.use(Vant); ``` -> If you configured babel-plugin-import, you won't be allowed to import all components. - ### Manually import (not recommended) ```js diff --git a/packages/vant/docs/markdown/quickstart.zh-CN.md b/packages/vant/docs/markdown/quickstart.zh-CN.md index 841223f19..de5aec147 100644 --- a/packages/vant/docs/markdown/quickstart.zh-CN.md +++ b/packages/vant/docs/markdown/quickstart.zh-CN.md @@ -93,36 +93,69 @@ pnpm add vant ## 引入组件 -### 在 vite 项目中按需引入组件（推荐） +### 按需引入组件（推荐） -在 vite 项目中使用 Vant 时，推荐安装 [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) 插件，它可以自动按需引入组件的样式。 +在基于 `vite`、`webpack` 或 `vue-cli` 的项目中使用 Vant 时，推荐安装 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 插件，它可以自动按需引入组件。 #### 1. 安装插件 ```bash # 通过 npm 安装 -npm i vite-plugin-style-import@1.4.1 -D +npm i unplugin-vue-components -D # 通过 yarn 安装 -yarn add vite-plugin-style-import@1.4.1 -D +yarn add unplugin-vue-components -D # 通过 pnpm 安装 -pnpm add vite-plugin-style-import@1.4.1 -D +pnpm add unplugin-vue-components -D ``` #### 2. 配置插件 -安装完成后，在 `vite.config.js` 文件中配置插件： +如果是基于 `vite` 的项目，在 `vite.config.js` 文件中配置插件： ```js import vue from '@vitejs/plugin-vue'; -import styleImport, { VantResolve } from 'vite-plugin-style-import'; +import Components from 'unplugin-vue-components/vite'; +import { VantResolver } from 'unplugin-vue-components/resolvers'; export default { plugins: [ vue(), - styleImport({ - resolves: [VantResolve()], + Components({ + resolvers: [VantResolver()], + }), + ], +}; +``` + +如果是基于 `vue-cli` 的项目，在 `vue.config.js` 文件中配置插件： + +```js +const { VantResolver } = require('unplugin-vue-components/resolvers'); +const ComponentsPlugin = require('unplugin-vue-components/webpack'); + +module.exports = { + configureWebpack: { + plugins: [ + ComponentsPlugin({ + resolvers: [VantResolver()], + }), + ], + }, +}; +``` + +如果是基于 `webpack` 的项目，在 `webpack.config.js` 文件中配置插件： + +```js +const { VantResolver } = require('unplugin-vue-components/resolvers'); +const ComponentsPlugin = require('unplugin-vue-components/webpack'); + +module.exports = { + plugins: [ + ComponentsPlugin({ + resolvers: [VantResolver()], }), ], }; @@ -140,51 +173,7 @@ const app = createApp(); app.use(Button); ``` -> Vant 默认支持通过 Tree Shaking 实现 script 的按需引入。 - -### 在非 vite 项目中按需引入组件（推荐） - -在非 vite 的项目中，可以通过 babel 插件来实现按需引入组件。我们需要安装 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 插件，它会在编译过程中将 import 语句自动转换为按需引入的方式。 - -#### 1. 安装插件 - -```bash -npm i babel-plugin-import -D -``` - -#### 2. 配置插件 - -在.babelrc 或 babel.config.js 中添加配置： - -```json -{ - "plugins": [ - [ - "import", - { - "libraryName": "vant", - "libraryDirectory": "es", - "style": true - } - ] - ] -} -``` - -#### 3. 引入组件 - -接着你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为按需引入的形式。 - -```js -// 原始代码 -import { Button } from 'vant'; - -// 编译后代码 -import Button from 'vant/es/button'; -import 'vant/es/button/style'; -``` - -> 如果你在使用 TypeScript，可以使用 [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) 实现按需引入。 +> 注意：Vant 默认支持通过 Tree Shaking，因此你也可以不配置任何插件，直接通过 Tree Shaking 来移除不需要的 JS 代码，但 CSS 无法通过这种方式优化。 ### 导入所有组件（不推荐） @@ -199,8 +188,6 @@ const app = createApp(); app.use(Vant); ``` -> Tips: 配置按需引入插件后，将不允许直接导入所有组件。 - ### 手动按需引入组件（不推荐） 在不使用任何构建插件的情况下，可以手动引入需要使用的组件和样式。 diff --git a/packages/vant/src/dialog/Dialog.tsx b/packages/vant/src/dialog/Dialog.tsx index 9275ef386..742b3acd6 100644 --- a/packages/vant/src/dialog/Dialog.tsx +++ b/packages/vant/src/dialog/Dialog.tsx @@ -56,8 +56,10 @@ const dialogProps = extend({}, popupSharedProps, { showCancelButton: Boolean, cancelButtonText: String, cancelButtonColor: String, + cancelButtonDisabled: Boolean, confirmButtonText: String, confirmButtonColor: String, + confirmButtonDisabled: Boolean, showConfirmButton: truthProp, closeOnClickOverlay: Boolean, }); @@ -197,6 +199,7 @@ export default defineComponent({ class={bem('cancel')} style={{ color: props.cancelButtonColor }} loading={loading.cancel} + disabled={props.cancelButtonDisabled} onClick={onCancel} /> )} @@ -207,6 +210,7 @@ export default defineComponent({ class={[bem('confirm'), { [BORDER_LEFT]: props.showCancelButton }]} style={{ color: props.confirmButtonColor }} loading={loading.confirm} + disabled={props.confirmButtonDisabled} onClick={onConfirm} /> )} @@ -222,6 +226,7 @@ export default defineComponent({ class={bem('cancel')} color={props.cancelButtonColor} loading={loading.cancel} + disabled={props.cancelButtonDisabled} onClick={onCancel} /> )} @@ -232,6 +237,7 @@ export default defineComponent({ class={bem('confirm')} color={props.confirmButtonColor} loading={loading.confirm} + disabled={props.confirmButtonDisabled} onClick={onConfirm} /> )} diff --git a/packages/vant/src/dialog/README.md b/packages/vant/src/dialog/README.md index 01e53d570..5bf6a5ecb 100644 --- a/packages/vant/src/dialog/README.md +++ b/packages/vant/src/dialog/README.md @@ -154,8 +154,10 @@ export default { | showCancelButton | Whether to show cancel button | _boolean_ | `false` | | cancelButtonText | Cancel button text | _string_ | `Cancel` | | cancelButtonColor | Cancel button color | _string_ | `black` | +| confirmButtonDisabled `v3.5.0` | Whether to disable cancel button | _boolean_ | `false` | | confirmButtonText | Confirm button text | _string_ | `Confirm` | | confirmButtonColor | Confirm button color | _string_ | `#ee0a24` | +| confirmButtonDisabled `v3.5.0` | Whether to disable confirm button | _boolean_ | `false` | | overlay | Whether to show overlay | _boolean_ | `true` | | overlayClass | Custom overlay class | _string \| Array \| object_ | - | | overlayStyle | Custom overlay style | _object_ | - | @@ -181,8 +183,10 @@ export default { | show-cancel-button | Whether to show cancel button | _boolean_ | `false` | | cancel-button-text | Cancel button text | _string_ | `Cancel` | | cancel-button-color | Cancel button color | _string_ | `black` | +| cancel-button-disabled `v3.5.0` | Whether to disable cancel button | _boolean_ | `false` | | confirm-button-text | Confirm button text | _string_ | `Confirm` | | confirm-button-color | Confirm button color | _string_ | `#ee0a24` | +| confirm-button-disabled `v3.5.0` | Whether to disable confirm button | _boolean_ | `false` | | overlay | Whether to show overlay | _boolean_ | `true` | | overlay-class | Custom overlay class | _string_ | - | | overlay-style | Custom overlay style | _object_ | - | diff --git a/packages/vant/src/dialog/README.zh-CN.md b/packages/vant/src/dialog/README.zh-CN.md index 5b3cb2bed..a3abe3de5 100644 --- a/packages/vant/src/dialog/README.zh-CN.md +++ b/packages/vant/src/dialog/README.zh-CN.md @@ -200,8 +200,10 @@ export default { | showCancelButton | 是否展示取消按钮 | _boolean_ | `false` | | confirmButtonText | 确认按钮文案 | _string_ | `确认` | | confirmButtonColor | 确认按钮颜色 | _string_ | `#ee0a24` | +| confirmButtonDisabled `v3.5.0` | 是否禁用确认按钮 | _boolean_ | `false` | | cancelButtonText | 取消按钮文案 | _string_ | `取消` | | cancelButtonColor | 取消按钮颜色 | _string_ | `black` | +| cancelButtonDisabled `v3.5.0` | 是否禁用取消按钮 | _boolean_ | `false` | | overlay | 是否展示遮罩层 | _boolean_ | `true` | | overlayClass | 自定义遮罩层类名 | _string \| Array \| object_ | - | | overlayStyle | 自定义遮罩层样式 | _object_ | - | @@ -229,8 +231,10 @@ export default { | show-cancel-button | 是否展示取消按钮 | _boolean_ | `false` | | confirm-button-text | 确认按钮文案 | _string_ | `确认` | | confirm-button-color | 确认按钮颜色 | _string_ | `#ee0a24` | +| confirm-button-disabled `v3.5.0` | 是否禁用确认按钮 | _boolean_ | `false` | | cancel-button-text | 取消按钮文案 | _string_ | `取消` | | cancel-button-color | 取消按钮颜色 | _string_ | `black` | +| cancel-button-disabled `v3.5.0` | 是否禁用取消按钮 | _boolean_ | `false` | | overlay | 是否展示遮罩层 | _boolean_ | `true` | | overlay-class | 自定义遮罩层类名 | _string_ | - | | overlay-style | 自定义遮罩层样式 | _object_ | - | diff --git a/packages/vant/src/dialog/function-call.tsx b/packages/vant/src/dialog/function-call.tsx index bf9498255..138d72e59 100644 --- a/packages/vant/src/dialog/function-call.tsx +++ b/packages/vant/src/dialog/function-call.tsx @@ -56,8 +56,10 @@ Dialog.defaultOptions = { messageAlign: '', cancelButtonText: '', cancelButtonColor: null, + cancelButtonDisabled: false, confirmButtonText: '', confirmButtonColor: null, + confirmButtonDisabled: false, showConfirmButton: true, showCancelButton: false, closeOnPopstate: true, diff --git a/packages/vant/src/dialog/test/index.spec.js b/packages/vant/src/dialog/test/index.spec.js index 6007464ec..59417f0c0 100644 --- a/packages/vant/src/dialog/test/index.spec.js +++ b/packages/vant/src/dialog/test/index.spec.js @@ -142,3 +142,30 @@ test('should render footer slot correctly', () => { }); expect(wrapper.find('.van-dialog').html()).toMatchSnapshot(); }); + +test('should allow to disable confirm button', () => { + const wrapper = mount(Dialog, { + props: { + show: true, + message: 'message', + confirmButtonDisabled: true, + }, + }); + expect(wrapper.find('.van-dialog__confirm').classes()).toContain( + 'van-button--disabled' + ); +}); + +test('should allow to disable cancel button', () => { + const wrapper = mount(Dialog, { + props: { + show: true, + showCancelButton: true, + message: 'message', + cancelButtonDisabled: true, + }, + }); + expect(wrapper.find('.van-dialog__cancel').classes()).toContain( + 'van-button--disabled' + ); +}); diff --git a/packages/vant/src/dialog/types.ts b/packages/vant/src/dialog/types.ts index cf6a9785a..46db56343 100644 --- a/packages/vant/src/dialog/types.ts +++ b/packages/vant/src/dialog/types.ts @@ -23,12 +23,14 @@ export type DialogOptions = { overlayClass?: string; overlayStyle?: CSSProperties; closeOnPopstate?: boolean; - cancelButtonText?: string; showCancelButton?: boolean; showConfirmButton?: boolean; + cancelButtonText?: string; cancelButtonColor?: string; + cancelButtonDisabled?: boolean; confirmButtonText?: string; confirmButtonColor?: string; + confirmButtonDisabled?: boolean; closeOnClickOverlay?: boolean; }; diff --git a/packages/vant/src/pull-refresh/PullRefresh.tsx b/packages/vant/src/pull-refresh/PullRefresh.tsx index 7720efd28..fa6f6f97a 100644 --- a/packages/vant/src/pull-refresh/PullRefresh.tsx +++ b/packages/vant/src/pull-refresh/PullRefresh.tsx @@ -55,7 +55,7 @@ export default defineComponent({ props: pullRefreshProps, - emits: ['refresh', 'update:modelValue'], + emits: ['change', 'refresh', 'update:modelValue'], setup(props, { emit, slots }) { let reachTop: boolean; @@ -111,6 +111,11 @@ export default defineComponent({ } else { state.status = 'loosing'; } + + emit('change', { + status: state.status, + distance, + }); }; const getStatusText = () => { diff --git a/packages/vant/src/pull-refresh/README.md b/packages/vant/src/pull-refresh/README.md index 5fe4f0249..5501a3008 100644 --- a/packages/vant/src/pull-refresh/README.md +++ b/packages/vant/src/pull-refresh/README.md @@ -126,9 +126,10 @@ Use slots to custom tips. ### Events -| Event | Description | Parameters | -| ------- | ----------------------------- | ---------- | -| refresh | Emitted after pulling refresh | - | +| Event | Description | Parameters | +| --- | --- | --- | +| refresh | Emitted after pulling refresh | - | +| change `v3.5.1` | Emitted when draging or status changed | _{ status: string, distance: number }_ | ### Slots diff --git a/packages/vant/src/pull-refresh/README.zh-CN.md b/packages/vant/src/pull-refresh/README.zh-CN.md index 6cf810bec..bd965f779 100644 --- a/packages/vant/src/pull-refresh/README.zh-CN.md +++ b/packages/vant/src/pull-refresh/README.zh-CN.md @@ -129,9 +129,10 @@ export default { ### Events -| 事件名 | 说明 | 回调参数 | -| ------- | -------------- | -------- | -| refresh | 下拉刷新时触发 | - | +| 事件名 | 说明 | 回调参数 | +| --- | --- | --- | +| refresh | 下拉刷新时触发 | - | +| change `v3.5.1` | 拖动时或状态改变时触发 | _{ status: string, distance: number }_ | ### Slots diff --git a/packages/vant/src/pull-refresh/test/index.spec.ts b/packages/vant/src/pull-refresh/test/index.spec.ts index c3adb0ed9..f10496faa 100644 --- a/packages/vant/src/pull-refresh/test/index.spec.ts +++ b/packages/vant/src/pull-refresh/test/index.spec.ts @@ -164,3 +164,14 @@ test('should allow to custom pull distance', async () => { await later(); expect(wrapper.html()).toMatchSnapshot(); }); + +test('should emit change event when status changed', async () => { + const wrapper = mount(PullRefresh); + const track = wrapper.find('.van-pull-refresh__track'); + trigger(track, 'touchstart', 0, 0); + trigger(track, 'touchmove', 0, 20); + await later(); + expect(wrapper.emitted('change')).toEqual([ + [{ distance: 20, status: 'pulling' }], + ]); +}); diff --git a/packages/vant/src/switch/README.md b/packages/vant/src/switch/README.md index 4a216d776..49577f7e0 100644 --- a/packages/vant/src/switch/README.md +++ b/packages/vant/src/switch/README.md @@ -154,9 +154,10 @@ export default { ### Slots -| Name | Description | SlotProps | -| ------------- | -------------------------- | --------- | -| node `v3.5.0` | Custom the content of node | - | +| Name | Description | SlotProps | +| ------------------- | ------------------------------- | --------- | +| node `v3.5.0` | Custom the content of node | - | +| background `v3.5.0` | Custom the background of switch | - | ### Types diff --git a/packages/vant/src/switch/README.zh-CN.md b/packages/vant/src/switch/README.zh-CN.md index 5e7381097..f337cc6b1 100644 --- a/packages/vant/src/switch/README.zh-CN.md +++ b/packages/vant/src/switch/README.zh-CN.md @@ -166,9 +166,10 @@ export default { ### Slots -| 名称 | 说明 | 参数 | -| ------------- | ---------------- | ---- | -| node `v3.5.0` | 自定义按钮的内容 | - | +| 名称 | 说明 | 参数 | +| ------------------- | -------------------- | ---- | +| node `v3.5.0` | 自定义按钮的内容 | - | +| background `v3.5.0` | 自定义开关的背景内容 | - | ### 类型定义 diff --git a/packages/vant/src/switch/Switch.tsx b/packages/vant/src/switch/Switch.tsx index 73f18c997..830552e54 100644 --- a/packages/vant/src/switch/Switch.tsx +++ b/packages/vant/src/switch/Switch.tsx @@ -76,6 +76,7 @@ export default defineComponent({ onClick={onClick} >
{renderLoading()}
+ {slots.background?.()} ); }; diff --git a/packages/vant/src/switch/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/switch/test/__snapshots__/index.spec.ts.snap index c965d285a..8533e5f54 100644 --- a/packages/vant/src/switch/test/__snapshots__/index.spec.ts.snap +++ b/packages/vant/src/switch/test/__snapshots__/index.spec.ts.snap @@ -43,3 +43,27 @@ exports[`should apply inactive color to loading icon 1`] = ` `; + +exports[`should render background slot correctly 1`] = ` +
+
+
+ Custom background +
+`; + +exports[`should render node slot correctly 1`] = ` +
+
+ Custom node +
+
+`; diff --git a/packages/vant/src/switch/test/index.spec.ts b/packages/vant/src/switch/test/index.spec.ts index df3e97e92..b920f0c0c 100644 --- a/packages/vant/src/switch/test/index.spec.ts +++ b/packages/vant/src/switch/test/index.spec.ts @@ -109,3 +109,23 @@ test('should allow to custom active-value and inactive-value', () => { wrapper.trigger('click'); expect(wrapper.emitted('update:modelValue')![0]).toEqual(['off']); }); + +test('should render node slot correctly', () => { + const wrapper = mount(Switch, { + slots: { + node: () => 'Custom node', + }, + }); + + expect(wrapper.html()).toMatchSnapshot(); +}); + +test('should render background slot correctly', () => { + const wrapper = mount(Switch, { + slots: { + background: () => 'Custom background', + }, + }); + + expect(wrapper.html()).toMatchSnapshot(); +}); diff --git a/packages/vant/src/toast/function-call.tsx b/packages/vant/src/toast/function-call.tsx index f23787d18..1628c3f58 100644 --- a/packages/vant/src/toast/function-call.tsx +++ b/packages/vant/src/toast/function-call.tsx @@ -1,14 +1,8 @@ import { ref, watch, getCurrentInstance, type App } from 'vue'; -import { - extend, - isObject, - inBrowser, - withInstall, - type ComponentInstance, -} from '../utils'; +import { extend, isObject, inBrowser, withInstall } from '../utils'; import { mountComponent, usePopupState } from '../utils/mount-component'; import VanToast from './Toast'; -import type { ToastType, ToastOptions } from './types'; +import type { ToastType, ToastOptions, ToastWrapperInstance } from './types'; const defaultOptions: ToastOptions = { icon: '', @@ -32,7 +26,7 @@ const defaultOptions: ToastOptions = { closeOnClickOverlay: false, }; -let queue: ComponentInstance[] = []; +let queue: ToastWrapperInstance[] = []; let allowMultiple = false; let currentOptions = extend({}, defaultOptions); @@ -83,7 +77,7 @@ function createInstance() { }, }); - return instance; + return instance as ToastWrapperInstance; } function getInstance() { @@ -97,7 +91,7 @@ function getInstance() { function Toast(options: string | ToastOptions = {}) { if (!inBrowser) { - return {} as ComponentInstance; + return {} as ToastWrapperInstance; } const toast = getInstance(); diff --git a/packages/vant/src/toast/types.ts b/packages/vant/src/toast/types.ts index dbb906823..d03904d4f 100644 --- a/packages/vant/src/toast/types.ts +++ b/packages/vant/src/toast/types.ts @@ -1,5 +1,5 @@ import { Toast } from './function-call'; -import type { TeleportProps } from 'vue'; +import type { ComponentPublicInstance, TeleportProps } from 'vue'; import type { LoadingType } from '../loading'; import type { Numeric } from '../utils'; @@ -34,3 +34,14 @@ declare module '@vue/runtime-core' { $toast: typeof Toast; } } + +export type ToastWrapperInstance = ComponentPublicInstance< + { message: Numeric }, + { + clear: () => void; + /** + * @private + */ + open: (props: Record) => void; + } +>; diff --git a/packages/vant/src/uploader/Uploader.tsx b/packages/vant/src/uploader/Uploader.tsx index 74c17ac94..3d307c085 100644 --- a/packages/vant/src/uploader/Uploader.tsx +++ b/packages/vant/src/uploader/Uploader.tsx @@ -74,7 +74,7 @@ const uploaderProps = { Numeric | [Numeric, Numeric] >, previewImage: truthProp, - previewOptions: Object as PropType, + previewOptions: Object as PropType>, previewFullImage: truthProp, maxSize: { type: [Number, String, Function] as PropType,