blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 05:42:44 +08:00
Code Issues Projects Releases Wiki Activity

Merge branch 'dev' into next

Browse Source
This commit is contained in:
chenjiahan 2022-06-11 20:23:35 +08:00
commit 5d81dcb549
23 changed files with 230 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/create-vant-cli-app/generators/vue2/package.json.tpl
View File

@ -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"
},

2
packages/vant-cli/docs/directory.md
View File

@ -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.

2
packages/vant-cli/docs/directory.zh-CN.md
View File

@ -42,7 +42,7 @@ button
└─ README.md # 组件文档
```
采用这种目录结构时，组件的使用者需要分别引入 JS 和 CSS 文件，也可以通过 babel-plugin-import 自动引入样式。
采用这种目录结构时，组件的使用者需要分别引入 JS 和 CSS 文件。
通过引入样式源文件（less 或 scss）并修改样式变量，可以实现主题定制功能。

99
packages/vant/docs/markdown/quickstart.en-US.md
View File

@ -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

99
packages/vant/docs/markdown/quickstart.zh-CN.md
View File

@ -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: 配置按需引入插件后，将不允许直接导入所有组件。
### 手动按需引入组件（不推荐）
在不使用任何构建插件的情况下，可以手动引入需要使用的组件和样式。

6
packages/vant/src/dialog/Dialog.tsx
View File

@ -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}
/>
)}

4
packages/vant/src/dialog/README.md
View File

@ -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_ | - |

4
packages/vant/src/dialog/README.zh-CN.md
View File

@ -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_ | - |

2
packages/vant/src/dialog/function-call.tsx
View File

@ -56,8 +56,10 @@ Dialog.defaultOptions = {
messageAlign: '',
cancelButtonText: '',
cancelButtonColor: null,
cancelButtonDisabled: false,
confirmButtonText: '',
confirmButtonColor: null,
confirmButtonDisabled: false,
showConfirmButton: true,
showCancelButton: false,
closeOnPopstate: true,

27
packages/vant/src/dialog/test/index.spec.js
View File

@ -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'
);
});

4
packages/vant/src/dialog/types.ts
View File

@ -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;
};

7
packages/vant/src/pull-refresh/PullRefresh.tsx
View File

@ -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 = () => {

3
packages/vant/src/pull-refresh/README.md
View File

@ -127,8 +127,9 @@ Use slots to custom tips.
### Events
| Event | Description | Parameters |
| ------- | ----------------------------- | ---------- |
| --- | --- | --- |
| refresh | Emitted after pulling refresh | - |
| change `v3.5.1` | Emitted when draging or status changed | _{ status: string, distance: number }_ |
### Slots

3
packages/vant/src/pull-refresh/README.zh-CN.md
View File

@ -130,8 +130,9 @@ export default {
### Events
| 事件名 | 说明 | 回调参数 |
| ------- | -------------- | -------- |
| --- | --- | --- |
| refresh | 下拉刷新时触发 | - |
| change `v3.5.1` | 拖动时或状态改变时触发 | _{ status: string, distance: number }_ |
### Slots

11
packages/vant/src/pull-refresh/test/index.spec.ts
View File

@ -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' }],
]);
});

3
packages/vant/src/switch/README.md
View File

@ -155,8 +155,9 @@ export default {
### Slots
| Name | Description | SlotProps |
| ------------- | -------------------------- | --------- |
| ------------------- | ------------------------------- | --------- |
| node `v3.5.0` | Custom the content of node | - |
| background `v3.5.0` | Custom the background of switch | - |
### Types

3
packages/vant/src/switch/README.zh-CN.md
View File

@ -167,8 +167,9 @@ export default {
### Slots
| 名称 | 说明 | 参数 |
| ------------- | ---------------- | ---- |
| ------------------- | -------------------- | ---- |
| node `v3.5.0` | 自定义按钮的内容 | - |
| background `v3.5.0` | 自定义开关的背景内容 | - |
### 类型定义

1
packages/vant/src/switch/Switch.tsx
View File

@ -76,6 +76,7 @@ export default defineComponent({
onClick={onClick}
>
<div class={bem('node')}>{renderLoading()}</div>
{slots.background?.()}
</div>
);
};

24
packages/vant/src/switch/test/__snapshots__/index.spec.ts.snap
View File

@ -43,3 +43,27 @@ exports[`should apply inactive color to loading icon 1`] = `
</span>
</div>
`;
exports[`should render background slot correctly 1`] = `
<div role="switch"
class="van-switch"
tabindex="0"
aria-checked="false"
>
<div class="van-switch__node">
</div>
Custom background
</div>
`;
exports[`should render node slot correctly 1`] = `
<div role="switch"
class="van-switch"
tabindex="0"
aria-checked="false"
>
<div class="van-switch__node">
Custom node
</div>
</div>
`;

20
packages/vant/src/switch/test/index.spec.ts
View File

@ -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();
});

16
packages/vant/src/toast/function-call.tsx
View File

@ -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();

13
packages/vant/src/toast/types.ts
View File

@ -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<string, any>) => void;
}
>;

2
packages/vant/src/uploader/Uploader.tsx
View File

@ -74,7 +74,7 @@ const uploaderProps = {
Numeric | [Numeric, Numeric]
>,
previewImage: truthProp,
previewOptions: Object as PropType<ImagePreviewOptions>,
previewOptions: Object as PropType<Partial<ImagePreviewOptions>>,
previewFullImage: truthProp,
maxSize: {
type: [Number, String, Function] as PropType<UploaderMaxSize>,