Vant

https://github.com/youzan/vant
Admin
Vant is a lightweight, customizable Vue UI library for mobile web apps, offering over 80 components,...
Tokens:247,479
Snippets:2,232
Trust Score:9.5
License:MIT
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### Select Date Time - Script Setup

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/picker-group/README.md

Provides the setup logic for the date/time selection example. Defines refs for date and time, and handlers for confirm/cancel that show toasts.

```javascript
import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const currentDate = ref(['2022', '06', '01']);
    const currentTime = ref(['12', '00']);

    const onConfirm = () => {
      showToast(
        `${currentDate.value.join('/')} ${currentTime.value.join(':')}`,
      );
    };

    const onCancel = () => {
      showToast('cancel');
    };

    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 5, 1),
      currentDate,
      currentTime,
      onConfirm,
      onCancel,
    };
  },
};
```

--------------------------------

### Local development setup commands

Source: https://github.com/youzan/vant/blob/main/packages/vant/docs/markdown/contribution.en-US.md

Commands to clone the Vant repository, enable pnpm, install dependencies, and start the development server. Requires Node.js >= 18.

```bash
# Clone repository
git clone git@github.com:vant-ui/vant.git

# Enable pnpm package manager
corepack enable

# Install dependencies
pnpm i

# Start development
pnpm dev
```

--------------------------------

### Select Date Range - Script Setup

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/picker-group/README.md

Provides the setup logic for the date range example. Defines start and end dates, computes endMinDate based on startDate, and includes confirm/cancel handlers.

```javascript
import { computed, ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const startDate = ref(['2022', '06', '01']);
    const endDate = ref(['2023', '06', '01']);
    const endMinDate = computed(
      () =>
        new Date(
          Number(startDate.value[0]),
          Number(startDate.value[1]) - 1,
          Number(startDate.value[2]),
        ),
    );

    const onConfirm = () => {
      showToast(`${startDate.value.join('/')} ${endDate.value.join('/')}`);
    };

    const onCancel = () => {
      showToast('cancel');
    };

    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 5, 1),
      endMinDate,
      endDate,
      startDate,
      onConfirm,
      onCancel,
    };
  },
};
```

--------------------------------

### Basic Usage - Script setup

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/date-picker/README.md

Defines the reactive data and min/max dates for the basic usage example.

```javascript
import { ref } from 'vue';

export default {
  setup() {
    const currentDate = ref(['2021', '01', '01']);
    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 5, 1),
      currentDate,
    };
  },
};
```

--------------------------------

### Install @vant/use

Source: https://github.com/youzan/vant/blob/main/packages/vant/docs/markdown/vant-use-intro.en-US.md

Commands to install the @vant/use package using various package managers.

```shell
# with npm
npm i @vant/use

# with yarn
yarn add @vant/use

# with pnpm
pnpm add @vant/use

# with Bun
bun add @vant/use
```

--------------------------------

### Overall Time Range JavaScript setup

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/time-picker/README.md

Vue setup with currentTime ref set to ['12', '00', '00'] for the Overall Time Range example.

```javascript
import { ref } from 'vue';

export default {
  setup() {
    const currentTime = ref(['12', '00', '00']);
    return { currentTime };
  },
};
```

--------------------------------

### Basic Usage of useWindowSize

Source: https://github.com/youzan/vant/blob/main/packages/vant/docs/markdown/use-window-size.en-US.md

Import useWindowSize from @vant/use and call it in the setup function to get reactive width and height refs. The values update automatically when the window resizes. Use watch to react to changes.

```javascript
import { watch } from 'vue';
import { useWindowSize } from '@vant/use';

export default {
  setup() {
    const { width, height } = useWindowSize();

    console.log(width.value); // -> width of browser window
    console.log(height.value); // -> height of browser window

    watch([width, height], () => {
      console.log('window resized');
    });
  },
};

```

--------------------------------

### Install @vant/touch-emulator

Source: https://github.com/youzan/vant/blob/main/packages/vant/docs/markdown/advanced-usage.en-US.md

Install the touch emulator to support PC browsers.

```bash
npm i @vant/touch-emulator -S
```

--------------------------------

### Show Description - HTML and setup script

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/action-sheet/README.md

Demonstrates adding a description to the action sheet using the 'description' prop. The setup script also shows adding a subname to an option.

```html
<van-action-sheet
  v-model:show="show"
  :actions="actions"
  cancel-text="Cancel"
  description="Description"
  close-on-click-action
/>
```

```javascript
import { ref } from 'vue';

export default {
  setup() {
    const show = ref(false);
    const actions = [
      { name: 'Option 1' },
      { name: 'Option 2' },
      { name: 'Option 3', subname: 'Description' },
    ];

    return {
      show,
      actions,
    };
  },
};
```

--------------------------------

### Show Icon - HTML and setup script

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/action-sheet/README.md

Demonstrates setting an icon for each option using the 'icon' field of the actions array. The template is the same structure as the basic usage, and the setup script includes icons like 'cart-o', 'shop-o', and 'star-o'.

```html
<van-cell is-link title="Show Icon" @click="show = true" />
<van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />
```

```javascript
import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const show = ref(false);
    const actions = [
      { name: 'Option 1', icon: 'cart-o' },
      { name: 'Option 2', icon: 'shop-o' },
      { name: 'Option 3', icon: 'star-o' },
    ];
    const onSelect = (item) => {
      show.value = false;
      showToast(item.name);
    };

    return {
      show,
      actions,
      onSelect,
    };
  },
};
```

--------------------------------

### Time Range JavaScript setup

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/time-picker/README.md

Vue setup with currentTime ref set to ['12', '35'] for the Time Range example.

```javascript
import { ref } from 'vue';

export default {
  setup() {
    const currentTime = ref(['12', '35']);
    return { currentTime };
  },
};
```

--------------------------------

### Install @vant/icons with Bun

Source: https://github.com/youzan/vant/blob/main/packages/vant-icons/README.md

Install the Vant Icons package using Bun.

```shell
bun add @vant/icons
```

--------------------------------

### Installation

Source: https://github.com/youzan/vant/blob/main/packages/vant/docs/markdown/vant-use-intro.en-US.md

Commands to install the @vant/use package using various package managers.

```APIDOC
## Install @vant/use

### Description
Install the @vant/use package to use Vant's composition APIs.

### Methods

#### npm
```shell
npm i @vant/use
```

#### yarn
```shell
yarn add @vant/use
```

#### pnpm
```shell
pnpm add @vant/use
```

#### Bun
```shell
bun add @vant/use
```
```

--------------------------------

### Quickstart: Import and register Vant Button

Source: https://github.com/youzan/vant/blob/main/README.md

Shows the quickstart steps for using Vant in a Vue app: import the component and its style, then register it with app.use().

```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);
```

--------------------------------

### Default Keyboard Example

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/number-keyboard/README.md

Shows a basic NumberKeyboard with a cell trigger. The keyboard is shown when the cell is touched, and hides on blur. Input and delete events are handled by the setup functions.

```html
<van-cell @touchstart.stop="show = true">Show Keyboard</van-cell>
<van-number-keyboard
  :show="show"
  @blur="show = false"
  @input="onInput"
  @delete="onDelete"
/>
```

```js
import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const show = ref(true);
    const onInput = (value) => showToast(value);
    const onDelete = () => showToast('delete');

    return {
      show,
      onInput,
      onDelete,
    };
  },
};
```

--------------------------------

### Install BackTop component

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/back-top/README.md

Registers the BackTop component globally using app.use. Refer to the component registration guide for more ways.

```js
import { createApp } from 'vue';
import { BackTop } from 'vant';

const app = createApp();
app.use(BackTop);
```

--------------------------------

### Switch theme with setup script

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/config-provider/README.md

Provides the JavaScript setup logic for dynamically switching the theme. The theme ref is initially set to 'light' and changes to 'dark' after a one-second delay.

```JavaScript
export default {
  setup() {
    const theme = ref('light');

    setTimeout(() => {
      theme.value = 'dark';
    }, 1000);

    return { theme };
  },
};
```

--------------------------------

### Basic Usage - HTML template and setup script

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/action-sheet/README.md

Shows how to set up the ActionSheet with the 'actions' prop and handle the 'select' event. The template uses a van-cell to trigger the sheet, and the setup function defines the actions and the select handler.

```html
<van-cell is-link title="Basic Usage" @click="show = true" />
<van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />
```

```javascript
import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const show = ref(false);
    const actions = [
      { name: 'Option 1' },
      { name: 'Option 2' },
      { name: 'Option 3' },
    ];
    const onSelect = (item) => {
      show.value = false;
      showToast(item.name);
    };

    return {
      show,
      actions,
      onSelect,
    };
  },
};
```

--------------------------------

### Install postcss-mobile-forever

Source: https://github.com/youzan/vant/blob/main/packages/vant/docs/markdown/advanced-usage.en-US.md

Install the plugin to transform px units to viewport units.

```bash
npm i postcss-mobile-forever -D
```

--------------------------------

### Install Vant with yarn, pnpm, or Bun

Source: https://github.com/youzan/vant/blob/main/README.md

Install Vant using yarn, pnpm, or Bun. Each command adds the latest Vant version to the project.

```bash
# with yarn
yarn add vant

# with pnpm
pnpm add vant

# with Bun
bun add vant
```

--------------------------------

### Install @vant/icons with pnpm

Source: https://github.com/youzan/vant/blob/main/packages/vant-icons/README.md

Install the Vant Icons package using pnpm.

```shell
pnpm add @vant/icons
```

--------------------------------

### Using Components in script setup

Source: https://github.com/youzan/vant/blob/main/packages/vant/docs/markdown/advanced-usage.en-US.md

Vant components can be used directly in script setup without explicit registration.

```xml
<script setup>
  import { Button } from 'vant';
</script>

<template>
  <Button />
</template>
```

--------------------------------

### Basic Usage: Vue setup with useRect

Source: https://github.com/youzan/vant/blob/main/packages/vant/docs/markdown/use-rect.en-US.md

Imports useRect from @vant/use and calls it in onMounted to get the element's bounding rect.

```js
import { ref, onMounted } from 'vue';
import { useRect } from '@vant/use';

export default {
  setup() {
    const root = ref();

    onMounted(() => {
      const rect = useRect(root);
      console.log(rect); // -> the size of an element and its position relative to the viewport
    });

    return { root };
  },
};
```

--------------------------------

### Install @vant/icons with npm

Source: https://github.com/youzan/vant/blob/main/packages/vant-icons/README.md

Install the Vant Icons package using npm.

```shell
npm i @vant/icons
```

--------------------------------

### Installation

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/sticky/README.md

Register the Sticky component globally using app.use.

```APIDOC
## Install

Register component globally via `app.use`.

```js
import { createApp } from 'vue';
import { Sticky } from 'vant';

const app = createApp();
app.use(Sticky);
```
```

--------------------------------

### Install @vant/popperjs

Source: https://github.com/youzan/vant/blob/main/packages/vant-popperjs/README.md

Commands to install the package using various package managers.

```shell
# with npm
npm i @vant/popperjs

# with yarn
yarn add @vant/popperjs

# with pnpm
pnpm add @vant/popperjs

# with Bun
bun add @vant/popperjs
```

--------------------------------

### Install @vant/icons with yarn

Source: https://github.com/youzan/vant/blob/main/packages/vant-icons/README.md

Install the Vant Icons package using yarn.

```shell
yarn add @vant/icons
```

--------------------------------

### Basic Usage with v-model and Setup

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/sidebar/README.md

Shows a basic sidebar with three items and the corresponding Vue setup script that provides the active index via ref. The v-model binds the selected item index.

```HTML
<van-sidebar v-model="active">
  <van-sidebar-item title="Title" />
  <van-sidebar-item title="Title" />
  <van-sidebar-item title="Title" />
</van-sidebar>
```

```JavaScript
import { ref } from 'vue';

export default {
  setup() {
    const active = ref(0);
    return { active };
  },
};
```

--------------------------------

### Installation

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/signature/README.md

Registers the Signature component globally using app.use.

```APIDOC
## Installation

### Register Component

```js
import { createApp } from 'vue';
import { Signature } from 'vant';

const app = createApp();
app.use(Signature);
```
```

--------------------------------

### Install stylelint and config for Vant Cli 5.0

Source: https://github.com/youzan/vant/blob/main/packages/vant/docs/markdown/release-note-v4.en-US.md

Command to install stylelint and the Vant stylelint config, which are no longer installed by default in Vant Cli 5.0.

```bash
npm add stylelint@13 @vant/stylelint-config
```

--------------------------------

### Install Tab and Tabs

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/tab/README.md

Registers the Tab and Tabs components globally using app.use().

```js
import { createApp } from 'vue';
import { Tab, Tabs } from 'vant';

const app = createApp();
app.use(Tab);
app.use(Tabs);
```

--------------------------------

### Install @vant/nuxt module

Source: https://github.com/youzan/vant/blob/main/packages/vant/docs/markdown/quickstart.en-US.md

Commands to install the @vant/nuxt module using various package managers.

```bash
# with npm
npm i @vant/nuxt -D

# with yarn
yarn add @vant/nuxt -D

# with pnpm
pnpm add @vant/nuxt -D

# with Bun
bun add @vant/nuxt -D
```

--------------------------------

### Install Icon component

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/icon/README.md

Registers the Icon component globally using app.use.

```js
import { createApp } from 'vue';
import { Icon } from 'vant';

const app = createApp();
app.use(Icon);
```

--------------------------------

### Install Space component

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/space/README.md

Registers the Space component globally using app.use.

```js
import { createApp } from 'vue';
import { Space } from 'vant';

const app = createApp();
app.use(Space);
```

--------------------------------

### Install Vant with npm

Source: https://github.com/youzan/vant/blob/main/README.md

Install Vant using npm. Use `npm i vant` for Vue 3 projects and `npm i vant@latest-v2` for Vue 2 projects.

```bash
# install latest Vant for Vue 3 project
npm i vant

# install Vant 2 for Vue 2 project
npm i vant@latest-v2
```

--------------------------------

### Install Vant 4 and @vant/compat via npm, yarn, pnpm, or bun

Source: https://github.com/youzan/vant/blob/main/packages/vant/docs/markdown/migrate-from-v3.en-US.md

Install Vant 4 and the compatibility package @vant/compat using your preferred package manager. The commands are shown for npm, yarn, pnpm, and bun.

```bash
# Install via npm
npm add vant@^4 @vant/compat@^1

# Install via yarn
yarn add vant@^4 @vant/compat@^1

# Install via pnpm
pnpm add vant@^4 @vant/compat@^1

# Install via Bun
bun add vant@^4 @vant/compat@^1
```

--------------------------------

### With Popup - Script

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/picker/README.md

Defines columns, state, and confirm handler for the Popup example.

```js
import { ref } from 'vue';

export default {
  setup() {
    const columns = [
      { text: 'Delaware', value: 'Delaware' },
      { text: 'Florida', value: 'Florida' },
      { text: 'Wenzhou', value: 'Wenzhou' },
      { text: 'Indiana', value: 'Indiana' },
      { text: 'Maine', value: 'Maine' },
    ];
    const fieldValue = ref('');
    const pickerValue = ref<Numeric[]>([]);
    const showPicker = ref(false);

    const onConfirm = ({ selectedValues, selectedOptions }) => {
      showPicker.value = false;
      pickerValue.value = selectedValues;
      fieldValue.value = selectedOptions[0].text;
    };

    return {
      columns,
      onConfirm,
      fieldValue,
      showPicker,
    };
  },
};
```

--------------------------------

### Install Button component

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/button/README.md

Registers the Button component globally using app.use.

```js
import { createApp } from 'vue';
import { Button } from 'vant';

const app = createApp();
app.use(Button);
```

--------------------------------

### Install Pagination component

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/pagination/README.md

Registers the Pagination component globally using app.use.

```js
import { createApp } from 'vue';
import { Pagination } from 'vant';

const app = createApp();
app.use(Pagination);
```

--------------------------------

### Use RollingTextInstance ref to call start method

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/rolling-text/README.md

Use a template ref to get the RollingText instance and call its start method.

```ts
import { ref } from 'vue';
import type { RollingTextInstance } from 'vant';

const rollingTextRef = ref<RollingTextInstance>();

rollingTextRef.value?.start();
```

--------------------------------

### Install DatePicker component

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/date-picker/README.md

Registers the DatePicker component globally via app.use.

```javascript
import { createApp } from 'vue';
import { DatePicker } from 'vant';

const app = createApp();
app.use(DatePicker);
```

--------------------------------

### Get current language with useCurrentLang

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/locale/README.md

Example of using useCurrentLang to get the current language and log its value. The comment shows the expected output 'en-US'.

```ts
import { useCurrentLang } from 'vant';

const currentLang = useCurrentLang();

console.log(currentLang.value); // --> 'en-US'
```

--------------------------------

### Columns Type - Script setup

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/date-picker/README.md

Defines the columnsType array and related data for the columns type example.

```javascript
import { ref } from 'vue';

export default {
  setup() {
    const currentDate = ref(['2021', '01']);
    const columnsType = ['year', 'month'];
    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 5, 1),
      currentDate,
      columnsType,
    };
  },
};
```

--------------------------------

### Basic vant.config.mjs example

Source: https://github.com/youzan/vant/blob/main/packages/vant-cli/docs/config.md

Shows the minimal structure of vant.config.mjs with name, build.site.publicPath, and site configuration including title, logo, description, and left navigation.

```javascript
export default {
  // component library name
  name: 'demo-ui',
  // bundle config
  build: {
    site: {
      publicPath: '/demo-ui/',
    },
  },
  // documentation site config
  site: {
    // title
    title: 'Demo UI',
    // logo
    logo: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png',
    // description
    description: '示例组件库',
    // left nav
    nav: [
      {
        title: 'example',
        items: [
          {
            path: 'home',
            title: 'home',
          },
        ],
      },
      {
        title: 'basic components',
        items: [
          {
            path: 'my-button',
            title: 'MyButton',
          },
        ],
      },
    ],
  },
};
```

--------------------------------

### Install SubmitBar with app.use

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/submit-bar/README.md

Registers the SubmitBar component globally using Vue's app.use. Refer to the component registration guide for other registration methods.

```JavaScript
import { createApp } from 'vue';
import { SubmitBar } from 'vant';

const app = createApp();
app.use(SubmitBar);
```

--------------------------------

### Use useWindowSize Composable

Source: https://github.com/youzan/vant/blob/main/packages/vant/docs/markdown/vant-use-intro.en-US.md

Example demonstrating how to import and use the useWindowSize composable to track browser window dimensions.

```js
import { useWindowSize } from '@vant/use';

const { width, height } = useWindowSize();

console.log(width.value); // -> window width
console.log(height.value); // -> window height
```

--------------------------------

### Basic Usage with v-model

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/radio/README.md

Basic usage: use v-model to bind the name of the checked radio. The template and setup script are shown together as one example.

```html
<van-radio-group v-model="checked">
  <van-radio name="1">Radio 1</van-radio>
  <van-radio name="2">Radio 2</van-radio>
</van-radio-group>
```

```js
import { ref } from 'vue';

export default {
  setup() {
    const checked = ref('1');
    return { checked };
  },
};
```

--------------------------------

### Install NoticeBar with app.use

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/notice-bar/README.md

Registers the NoticeBar component globally via app.use. Requires Vue and the Vant library.

```javascript
import { createApp } from 'vue';
import { NoticeBar } from 'vant';

const app = createApp();
app.use(NoticeBar);
```

--------------------------------

### Use CountDownInstance with Vue ref

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/count-down/README.md

Shows how to get a CountDown instance using a template ref and call its start method. The ref is typed with CountDownInstance and used with optional chaining.

```ts
import { ref } from 'vue';
import type { CountDownInstance } from 'vant';

const countDownRef = ref<CountDownInstance>();

countDownRef.value?.start();
```

--------------------------------

### Install NavBar with app.use

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/nav-bar/README.md

Registers the NavBar component globally using the Vue app's use method. Refer to the component registration guide for alternative registration approaches.

```js
import { createApp } from 'vue';
import { NavBar } from 'vant';

const app = createApp();
app.use(NavBar);
```

--------------------------------

### Use DropdownMenuInstance and DropdownItemInstance refs

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/dropdown-menu/README.md

Shows how to get component instances using Vue refs and call their methods. The example creates refs for both DropdownMenu and DropdownItem, then calls close() and toggle() respectively.

```ts
import { ref } from 'vue';
import type { DropdownMenuInstance, DropdownItemInstance } from 'vant';

const dropdownMenuRef = ref<DropdownMenuInstance>();
const dropdownItemRef = ref<DropdownItemInstance>();

dropdownMenuRef.value?.close();
dropdownItemRef.value?.toggle();
```

--------------------------------

### Indeterminate checkbox script

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/checkbox/README.md

Vue 3 setup script for the indeterminate checkbox example. It defines the list, refs for check-all state, checked results, and indeterminate flag, and provides change handlers to update the state.

```javascript
import { ref } from 'vue';

export default {
  setup() {
    const list = ['a', 'b', 'c', 'd']

    const isCheckAll = ref(false);
    const checkedResult = ref(['a', 'b', 'd']);
    const isIndeterminate = ref(true);

    const checkAllChange = (val: boolean) => {
      checkedResult.value = val ? list : []
      isIndeterminate.value = false
    }

    const checkedResultChange = (value: string[]) => {
      const checkedCount = value.length
      isCheckAll.value = checkedCount === list.length
      isIndeterminate.value = checkedCount > 0 && checkedCount < list.length
    }

    return {
      list,
      isCheckAll,
      checkedResult,
      checkAllChange,
      isIndeterminate,
      checkedResultChange
    };
  },
};
```

--------------------------------

### Custom anchors with v-model:height

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/floating-panel/README.md

Sets custom anchor positions (100px, 40%, 70% of screen height) and binds the current height via v-model:height. The template and setup script are shown together as one example.

```html
<van-floating-panel v-model:height="height" :anchors="anchors">
  <div style="text-align: center; padding: 15px">
    <p>Panel Show Height {{ height.toFixed(0) }} px</p>
  </div>
</van-floating-panel>
```

```js
import { ref } from 'vue';

export default {
  setup() {
    const anchors = [
      100,
      Math.round(0.4 * window.innerHeight),
      Math.round(0.7 * window.innerHeight),
    ];
    const height = ref(anchors[0]);

    return { anchors, height };
  },
};
```

--------------------------------

### Install DropdownMenu and DropdownItem Components

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/dropdown-menu/README.md

Registers the DropdownMenu and DropdownItem components globally using app.use.

```js
import { createApp } from 'vue';
import { DropdownMenu, DropdownItem } from 'vant';

const app = createApp();
app.use(DropdownMenu);
app.use(DropdownItem);
```

--------------------------------

### Rsbuild configuration example

Source: https://github.com/youzan/vant/blob/main/packages/vant-cli/docs/config.md

Create an rsbuild.config.mjs or rsbuild.config.ts file in the same directory as vant.config.mjs. Vant CLI automatically reads this file to configure the documentation site build.

```javascript
// rsbuild.config.mjs or rsbuild.config.ts
export default {
  plugins: [
    // Configure Rsbuild plugins
  ],
  dev: {
    // Options related to local development
  },
  html: {
    // Options related to HTML generation
  },
  // Other options
};

```

--------------------------------

### Basic Usage - Script

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/cascader/README.md

Provides the script for the basic usage example, defining the options, state, and the onFinish handler that updates the field value.

```javascript
import { ref } from 'vue';

export default {
  setup() {
    const show = ref(false);
    const fieldValue = ref('');
    const cascaderValue = ref('');
    const options = [
      {
        text: 'Zhejiang',
        value: '330000',
        children: [{ text: 'Hangzhou', value: '330100' }],
      },
      {
        text: 'Jiangsu',
        value: '320000',
        children: [{ text: 'Nanjing', value: '320100' }],
      },
    ];
    const onFinish = ({ selectedOptions }) => {
      show.value = false;
      fieldValue.value = selectedOptions.map((option) => option.text).join('/');
    };

    return {
      show,
      options,
      onFinish,
      fieldValue,
      cascaderValue,
    };
  },
};
```

--------------------------------

### Install Lazyload with app.use

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/lazyload/README.md

Registers the Lazyload component globally via app.use. The second call shows how to pass options, such as enabling lazyComponent.

```js
import { createApp } from 'vue';
import { Lazyload } from 'vant';

const app = createApp();
app.use(Lazyload);

// with options
app.use(Lazyload, {
  lazyComponent: true,
});
```

--------------------------------

### Basic Usage

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/contact-edit/README.md

Demonstrates how to use the ContactEdit component in a template with props and event handlers.

```APIDOC
## Basic Usage

### Description
Shows a basic example of using the ContactEdit component with contact info, edit mode, default contact switch, and save/delete event handlers.

### Template
```html
<van-contact-edit
  is-edit
  show-set-default
  :contact-info="editingContact"
  set-default-label="Set as the default contact"
  @save="onSave"
  @delete="onDelete"
/>
```

### Script
```js
import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const editingContact = ref({
      tel: '',
      name: '',
    });
    const onSave = (contactInfo) => showToast('Save');
    const onDelete = (contactInfo) => showToast('Delete');
    return {
      onSave,
      onDelete,
      editingContact,
    };
  },
};
```
```

--------------------------------

### Start Position

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/circle/README.md

Configure the starting position of the progress bar using the start-position prop.

```html
<van-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  text="Left"
  start-position="left"
/>
<van-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  text="Right"
  start-position="right"
/>
<van-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  text="Bottom"
  start-position="bottom"
/>
```

--------------------------------

### Basic usage JavaScript setup

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/time-picker/README.md

Vue setup function that defines the currentTime ref as ['12', '00'].

```javascript
import { ref } from 'vue';

export default {
  setup() {
    const currentTime = ref(['12', '00']);
    return { currentTime };
  },
};
```

--------------------------------

### Install Collapse and CollapseItem

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/collapse/README.md

Registers the Collapse and CollapseItem components globally via app.use. Requires Vue 3 and the Vant library.

```js
import { createApp } from 'vue';
import { Collapse, CollapseItem } from 'vant';

const app = createApp();
app.use(Collapse);
app.use(CollapseItem);
```

--------------------------------

### Close Icon examples

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/popup/README.md

Demonstrates the closeable prop, custom close icon via close-icon, and icon position via close-icon-position.

```html
<van-popup
  v-model:show="show"
  closeable
  position="bottom"
  :style="{ height: '30%' }"
/>
<!-- Custom Icon -->
<van-popup
  v-model:show="show"
  closeable
  close-icon="close"
  position="bottom"
  :style="{ height: '30%' }"
/>
<!-- Icon Position -->
<van-popup
  v-model:show="show"
  closeable
  close-icon-position="top-left"
  position="bottom"
  :style="{ height: '30%' }"
/>
```

--------------------------------

### Install China Area Data

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/area/README.md

Install the official Vant china area data package using your preferred package manager.

```bash
# with npm
npm i @vant/area-data

# with yarn
yarn add @vant/area-data

# with pnpm
pnpm add @vant/area-data

# with Bun
bun add @vant/area-data
```

--------------------------------

### Install PullRefresh component

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/pull-refresh/README.md

Registers the PullRefresh component globally using app.use. This is the standard way to install the component in a Vue 3 application.

```js
import { createApp } from 'vue';
import { PullRefresh } from 'vant';

const app = createApp();
app.use(PullRefresh);
```

--------------------------------

### 位置支持值

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/popover/README.md

placement 属性支持的值及其含义。

```bash
top           # Top middle
top-start     # Top left
top-end       # Top right
left          # Left middle
left-start    # Left top
left-end      # Left bottom
right         # Right middle
right-start   # Right top
right-end     # Right bottom
bottom        # Bottom middle
bottom-start  # Bottom left
bottom-end    # Bottom right
```

--------------------------------

### Standalone badge examples

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/badge/README.md

Displays badges without a child element, using the standalone mode. The second example combines content with max.

```html
<van-badge :content="20" />

<van-badge :content="200" max="99" />
```

--------------------------------

### Install Vant CLI via npm, yarn, pnpm, or Bun

Source: https://github.com/youzan/vant/blob/main/packages/vant-cli/README.md

Install Vant CLI as a dev dependency using your preferred package manager.

```shell
# via npm
npm i @vant/cli -D

# via yarn
yarn add @vant/cli -D

# via pnpm
pnpm add @vant/cli -D

# via Bun
bun add @vant/cli -D
```

--------------------------------

### Basic Usage - Script

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/picker/README.md

Defines columns and event handlers for the basic usage example.

```js
import { showToast } from 'vant';

export default {
  setup() {
    const columns = [
      { text: 'Delaware', value: 'Delaware' },
      { text: 'Florida', value: 'Florida' },
      { text: 'Wenzhou', value: 'Wenzhou' },
      { text: 'Indiana', value: 'Indiana' },
      { text: 'Maine', value: 'Maine' },
    ];
    const onConfirm = ({ selectedValues }) => {
      showToast(`Value: ${selectedValues.join(',')}`);
    };
    const onChange = ({ selectedValues }) => {
      showToast(`Value: ${selectedValues.join(',')}`);
    };
    const onCancel = () => showToast('Cancel');

    return {
      columns,
      onChange,
      onCancel,
      onConfirm,
    };
  },
};
```

--------------------------------

### Install List component

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/list/README.md

Registers the List component globally with the Vue app. Use this after installing Vant to make the component available throughout the app.

```js
import { createApp } from 'vue';
import { List } from 'vant';

const app = createApp();
app.use(List);
```

--------------------------------

### Install Grid and GridItem

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/grid/README.md

Registers the Grid and GridItem components globally via app.use. Requires Vue's createApp and the vant package.

```js
import { createApp } from 'vue';
import { Grid, GridItem } from 'vant';

const app = createApp();
app.use(Grid);
app.use(GridItem);
```

--------------------------------

### Install CouponCell and CouponList

Source: https://github.com/youzan/vant/blob/main/packages/vant/src/coupon-list/README.md

Registers the CouponCell and CouponList components globally via app.use. Required before using the components in templates.

```js
import { createApp } from 'vue';
import { CouponCell, CouponList } from 'vant';

const app = createApp();
app.use(CouponCell);
app.use(CouponList);
```
Tokens:
Raw