### Run and Debug Project

Source: https://github.com/tencent/tdesign-mobile-vue/wiki/mobile-vue：组件升级指引

Start the development server to run and debug the project, including checking official example code and interactive behavior.

```bash
npm run dev
```

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

### Install Project Dependencies

Source: https://github.com/tencent/tdesign-mobile-vue/wiki/mobile-vue：组件升级指引

Install all necessary project dependencies using npm.

```bash
npm i
```

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

### Guide Props

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/guide/guide.md

Props available for the Guide component, controlling its behavior and appearance.

```APIDOC
## Guide Props

### backButtonProps
- **Type**: Object
- **Default**: -
- **Description**: Props for the back button. Example: `{ content: 'Back', theme: 'default' }`. TS Type: `ButtonProps`
- **Required**: N

### counter
- **Type**: Slot / Function
- **Default**: -
- **Description**: Custom rendering for the counter part. TS Type: `TNode<{ current: number; total: number }>`.

### current
- **Type**: Number
- **Default**: -
- **Description**: Current step, supports `v-model` or `v-model:current`.
- **Required**: N

### defaultCurrent
- **Type**: Number
- **Default**: -
- **Description**: Non-controlled property for the current step.
- **Required**: N

### finishButtonProps
- **Type**: Object
- **Default**: -
- **Description**: Props for the finish button. Example: `{ content: 'Finish', theme: 'primary' }`. TS Type: `ButtonProps`
- **Required**: N

### hideCounter
- **Type**: Boolean
- **Default**: false
- **Description**: Whether to hide the counter.
- **Required**: N

### hideSkip
- **Type**: Boolean
- **Default**: false
- **Description**: Whether to hide the skip button.
- **Required**: N

### highlightPadding
- **Type**: Number
- **Default**: 8
- **Description**: Padding for the highlight box.
- **Required**: N

### mode
- **Type**: String
- **Default**: popover
- **Description**: Type of the guide box. Options: `popover`, `dialog`.
- **Required**: N

### nextButtonProps
- **Type**: Object
- **Default**: -
- **Description**: Props for the next button. Example: `{ content: 'Next', theme: 'primary' }`. TS Type: `ButtonProps`.
- **Required**: N

### showOverlay
- **Type**: Boolean
- **Default**: true
- **Description**: Whether to show the overlay.
- **Required**: N

### skipButtonProps
- **Type**: Object
- **Default**: -
- **Description**: Props for the skip button. Example: `{ content: 'Skip', theme: 'default' }`. TS Type: `ButtonProps`.
- **Required**: N

### steps
- **Type**: Array
- **Default**: -
- **Description**: Defines each step's content, including highlighted nodes, relative positions, and text. TS Type: `Array<GuideStep>`.
- **Required**: N

### zIndex
- **Type**: Number
- **Default**: 999999
- **Description**: Layer level of the tooltip.
- **Required**: N
```

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

### GuideConfig Interface

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/config-provider/config-provider.en-US.md

Configuration options for the Guide component.

```APIDOC
## GuideConfig

### Properties

- **back** (String): Text for the back button. Default: '-'. Required: No.
- **finish** (String): Text for the finish button. Default: '-'. Required: No.
- **next** (String): Text for the next button. Default: '-'. Required: No.
- **skip** (String): Text for the skip button. Default: '-'. Required: No.
```

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

### Guide Props

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/guide/guide.en-US.md

Props available for the Guide component. These control the overall behavior and appearance of the guide, including navigation buttons, step display, and overlay.

```APIDOC
## Guide Props

### backButtonProps
- **Type**: Object
- **Default**: -
- **Description**: Configuration for the back button. Typescript: `ButtonProps`
- **Required**: N

### counter
- **Type**: Slot / Function
- **Default**: -
- **Description**: Slot for displaying the step counter. Typescript: `TNode<{ current: number; total: number }>`
- **Required**: N

### current
- **Type**: Number
- **Default**: -
- **Description**: `v-model` and `v-model:current` are supported for controlling the current step.
- **Required**: N

### defaultCurrent
- **Type**: Number
- **Default**: -
- **Description**: Uncontrolled property to set the initial step.
- **Required**: N

### finishButtonProps
- **Type**: Object
- **Default**: -
- **Description**: Configuration for the finish button. Typescript: `ButtonProps`
- **Required**: N

### hideCounter
- **Type**: Boolean
- **Default**: false
- **Description**: Hides the step counter.
- **Required**: N

### hideSkip
- **Type**: Boolean
- **Default**: false
- **Description**: Hides the skip button.
- **Required**: N

### highlightPadding
- **Type**: Number
- **Default**: 8
- **Description**: Padding around the highlighted element.
- **Required**: N

### mode
- **Type**: String
- **Default**: popover
- **Description**: Display mode for the guide. Options: `popover`, `dialog`.
- **Required**: N

### nextButtonProps
- **Type**: Object
- **Default**: -
- **Description**: Configuration for the next button. Typescript: `ButtonProps`
- **Required**: N

### showOverlay
- **Type**: Boolean
- **Default**: true
- **Description**: Controls whether an overlay is shown behind the guide content.
- **Required**: N

### skipButtonProps
- **Type**: Object
- **Default**: -
- **Description**: Configuration for the skip button. Typescript: `ButtonProps`
- **Required**: N

### steps
- **Type**: Array
- **Default**: -
- **Description**: Array of step configurations. Typescript: `Array<GuideStep>`
- **Required**: N

### zIndex
- **Type**: Number
- **Default**: 999999
- **Description**: z-index value for the guide elements.
- **Required**: N

### onBack
- **Type**: Function
- **Default**: -
- **Description**: Callback function when the back button is clicked. Typescript: `(context: { e: MouseEvent, current: number, total: number  }) => void`
- **Required**: N

### onChange
- **Type**: Function
- **Default**: -
- **Description**: Callback function when the current step changes. Typescript: `(current: number, context?: { e: MouseEvent,  total: number }) => void`
- **Required**: N

### onFinish
- **Type**: Function
- **Default**: -
- **Description**: Callback function when the guide is finished. Typescript: `(context: { e: MouseEvent, current: number, total: number  }) => void`
- **Required**: N

### onNextStepClick
- **Type**: Function
- **Default**: -
- **Description**: Callback function when the next step button is clicked. Typescript: `(context: { e: MouseEvent, next: number, current: number, total: number  }) => void`
- **Required**: N

### onSkip
- **Type**: Function
- **Default**: -
- **Description**: Callback function when the skip button is clicked. Typescript: `(context: { e: MouseEvent, current: number, total: number  }) => void`
- **Required**: N
```

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

### Install Auto-Import Dependencies

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/site/docs/getting-started.en-US.md

Install the necessary packages for automatic on-demand component and API imports.

```bash
npm install -D @tdesign-vue-next/auto-import-resolver unplugin-vue-components unplugin-auto-import
```

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

### GuideStep Configuration

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/guide/guide.md

Defines the structure and properties for each step in the Guide component.

```APIDOC
## GuideStep

### backButtonProps
- **Type**: Object
- **Default**: -
- **Description**: Custom props for the current step's back button. TS Type: `ButtonProps`.
- **Required**: N

### body
- **Type**: String / Slot / Function
- **Default**: -
- **Description**: Content of the current step's tooltip. TS Type: `string | TNode`.
- **Required**: N

### content
- **Type**: Slot / Function
- **Default**: -
- **Description**: Custom content for the guide popup. If provided, other props except `placement`, `offset`, and `element` are ignored. TS Type: `TNode`.
- **Required**: N

### element
- **Type**: String / Function
- **Default**: -
- **Description**: Required. The element to highlight. If a string, it's treated as a selector. Example: `'#tdesign'` or `() => document.querySelector('#tdesign')`. TS Type: `AttachNode`.
- **Required**: Y

### highlightContent
- **Type**: Slot / Function
- **Default**: -
- **Description**: Custom highlight box (only effective when `mode` is `popover`). TS Type: `TNode`.
- **Required**: N

### highlightPadding
- **Type**: Number
- **Default**: -
- **Description**: Padding for the highlight box.
- **Required**: N

### mode
- **Type**: String
- **Default**: -
- **Description**: Type of the guide box. Options: `popover`, `dialog`.
- **Required**: N

### nextButtonProps
- **Type**: Object
- **Default**: -
- **Description**: Custom props for the current step's next button. TS Type: `ButtonProps`.
- **Required**: N

### offset
- **Type**: Array
- **Default**: -
- **Description**: Offset relative to `placement`. Example: `[-10, 20]` or `['10px', '8px']`. TS Type: `Array<string | number>`.
- **Required**: N

### placement
- **Type**: String
- **Default**: 'top'
- **Description**: Position of the guide box relative to the highlighted element (only effective when `mode` is `popover`). TS Type: `StepPopoverPlacement`.
- **Required**: N

### popoverProps
- **Type**: Object
- **Default**: -
- **Description**: Props passed to the Popover component. Valid when `mode=popover`. TS Type: `PopoverProps`.
- **Required**: N

### showOverlay
- **Type**: Boolean
- **Default**: true
- **Description**: Whether to show the overlay.
- **Required**: N

### skipButtonProps
- **Type**: Object
- **Default**: -
- **Description**: Custom props for the current step's skip button. TS Type: `ButtonProps`.
- **Required**: N

### title
- **Type**: String / Slot / Function
- **Default**: -
- **Description**: Title content for the current step. TS Type: `string | TNode`.
- **Required**: N
```

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

### On-Demand Import with Plugin: Basic Setup

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/site/docs/getting-started.en-US.md

Configure your Vue application to automatically import TDesign components using `unplugin-vue-components` and `unplugin-auto-import`. This example shows the basic setup without specific build tool configurations.

```javascript
import { createApp } from 'vue';
// import global design variables
import 'tdesign-mobile-vue/es/style/index.css';

const app = createApp(App);
```

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

### Install Project Dependencies

Source: https://github.com/tencent/tdesign-mobile-vue/wiki/mobile-vue：示例代码改造指引

Install project dependencies using Yarn. It is recommended to use Yarn for dependency management in this project.

```bash
yarn install
```

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

### GuideStep Configuration

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/guide/guide.en-US.md

Defines the structure and properties for each individual step within the Guide component.

```APIDOC
## GuideStep

### backButtonProps
- **Type**: Object
- **Default**: -
- **Description**: Configuration for the back button within a specific step. Typescript: `ButtonProps`
- **Required**: N

### body
- **Type**: String / Slot / Function
- **Default**: -
- **Description**: The main content of the step. Typescript: `string | TNode`
- **Required**: N

### content
- **Type**: Slot / Function
- **Default**: -
- **Description**: Custom content slot for the step. Typescript: `TNode`
- **Required**: N

### element
- **Type**: String / Function
- **Default**: -
- **Description**: Selector or function to identify the element to highlight for this step. Required. Typescript: `AttachNode`
- **Required**: Y

### highlightContent
- **Type**: Slot / Function
- **Default**: -
- **Description**: Custom content slot for the highlighted area. Typescript: `TNode`
- **Required**: N

### highlightPadding
- **Type**: Number
- **Default**: -
- **Description**: Padding around the highlighted element for this step.
- **Required**: N

### mode
- **Type**: String
- **Default**: -
- **Description**: Display mode for this step. Options: `popover`, `dialog`.
- **Required**: N

### nextButtonProps
- **Type**: Object
- **Default**: -
- **Description**: Configuration for the next button within this step. Typescript: `ButtonProps`
- **Required**: N

### offset
- **Type**: Array
- **Default**: -
- **Description**: Offset for the step's positioning. Note: This API is under discussion and should not be used yet. Typescript: `Array<string | number>`
- **Required**: N

### placement
- **Type**: String
- **Default**: 'top'
- **Description**: Placement of the popover relative to the highlighted element. Typescript: `StepPopoverPlacement`
- **Required**: N

### popoverProps
- **Type**: Object
- **Default**: -
- **Description**: Props for the Popover component when `mode = popover`. Typescript: `PopoverProps`
- **Required**: N

### showOverlay
- **Type**: Boolean
- **Default**: true
- **Description**: Controls whether an overlay is shown for this specific step.
- **Required**: N

### skipButtonProps
- **Type**: Object
- **Default**: -
- **Description**: Configuration for the skip button within this step. Typescript: `ButtonProps`
- **Required**: N

### title
- **Type**: String / Slot / Function
- **Default**: -
- **Description**: Title of the current step. Typescript: `string | TNode`
- **Required**: N
```

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

### Guide Events

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/guide/guide.md

Events emitted by the Guide component.

```APIDOC
## Guide Events

### back
- **Parameters**: `(context: { e: MouseEvent, current: number, total: number })`
- **Description**: Triggered when the back button is clicked.

### change
- **Parameters**: `(current: number, context?: { e: MouseEvent, total: number })`
- **Description**: Triggered when the current step changes.

### finish
- **Parameters**: `(context: { e: MouseEvent, current: number, total: number })`
- **Description**: Triggered when the finish button is clicked.

### next-step-click
- **Parameters**: `(context: { e: MouseEvent, next: number, current: number, total: number })`
- **Description**: Triggered when the next step button is clicked.

### skip
- **Parameters**: `(context: { e: MouseEvent, current: number, total: number })`
- **Description**: Triggered when the skip button is clicked.
```

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

### Guide Events

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/guide/guide.en-US.md

Events emitted by the Guide component, triggered by user interactions or state changes.

```APIDOC
## Guide Events

### back
- **Params**: `(context: { e: MouseEvent, current: number, total: number  })`
- **Description**: Triggered when the back button is clicked.

### change
- **Params**: `(current: number, context?: { e: MouseEvent,  total: number })`
- **Description**: Triggered when the current step changes.

### finish
- **Params**: `(context: { e: MouseEvent, current: number, total: number  })`
- **Description**: Triggered when the guide is completed.

### next-step-click
- **Params**: `(context: { e: MouseEvent, next: number, current: number, total: number  })`
- **Description**: Triggered when the next step button is clicked.

### skip
- **Params**: `(context: { e: MouseEvent, current: number, total: number  })`
- **Description**: Triggered when the skip button is clicked.
```

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

### Install TDesign Mobile Vue via npm

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/site/docs/getting-started.md

Use npm to install the TDesign mobile Vue component library. This is the recommended method for development.

```bash
npm i tdesign-mobile-vue
```

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

### Update Demo Snapshots and Run Tests

Source: https://github.com/tencent/tdesign-mobile-vue/wiki/mobile-vue：组件升级指引

If demo examples are modified, first update the demo snapshots, then run tests. Submit a PR only after tests pass. This command updates snapshots.

```bash
npm run test:snap-update
```

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

### DrawerOptions

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/drawer/drawer.md

Options for configuring the Drawer, often used for updates or initial setup.

```APIDOC
## DrawerOptions

### Description
Options for configuring the Drawer, often used for updates or initial setup.

### Properties

- **className** (String) - Optional - Custom class names for the drawer. Example: 't-class-drawer-first t-class-drawer-second'.
- **style** (String / Object) - Optional - Style properties for the drawer. Accepts CSS text or a style object. TS Type: `string | Styles`.
- `Omit<DrawerProps, 'attach'>` - Inherits all properties from `DrawerProps` except for 'attach'.
```

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

### Update Demo Snapshots and Run Tests

Source: https://github.com/tencent/tdesign-mobile-vue/wiki/mobile-vue：示例代码改造指引

Commands to update demo snapshots and run tests. This is a crucial step after making changes to demo examples to ensure consistency and correctness before submitting a Pull Request.

```bash
// 更新 demo 快照
npm run test:demo
npm run test:snap-update

// 执行测试
npm run test
```

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

### Install Icon Package

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/icon/icon.md

Install the independent Icon package for direct use in your project. The tdesign-mobile-vue package also includes the icon component for direct use via `t-icon`.

```bash
npm install tdesign-icons-vue-next
```

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

### Get All Icon Names

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/icon/icon.md

You can obtain a list of all available icon names by importing the `manifest` from `tdesign-icons-vue-next`.

```javascript
import { manifest } from 'tdesign-icons-vue-next';

console.log(Object.keys(manifest));
```

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

### Initialize and Update Submodules

Source: https://github.com/tencent/tdesign-mobile-vue/wiki/mobile-vue：组件升级指引

Run these commands to initialize and update Git submodules for the project.

```bash
git submodule init && git submodule update
```

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

### Execute Project Tests

Source: https://github.com/tencent/tdesign-mobile-vue/wiki/mobile-vue：组件升级指引

Run the project's test suite.

```bash
npm run test
```

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

### DrawerInstance Methods

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/drawer/drawer.md

Methods available on the Drawer instance for programmatic control.

```APIDOC
## DrawerInstance Methods

### Description
Methods available on the Drawer instance for programmatic control.

### Methods

- **destroy** - Destroys the drawer instance.
- **hide** - Hides the drawer.
- **show** - Shows the drawer.
- **update** - Updates the drawer content with new props. Parameters: `(props: DrawerOptions)`.
```

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

### Import All Icons

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/icon/icon.md

Import all icons at once. This method is simpler but may increase the final product size. Icons support various size units and CSS for color control.

```vue
<template>
  <t-icon name="add" />
  <t-icon name="home" style="color: red;" />
  <t-icon name="user" size="large" />
</template>

<script setup lang="ts">
import 'tdesign-icons-vue-next/es/style'; // 引入 iconfont.css
</script>
```

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

### Configure Webpack for Automatic Imports with TDesign

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/site/docs/getting-started.md

Set up Webpack to automatically import TDesign components and APIs using `unplugin-vue-components` and `unplugin-auto-import`. Requires installing resolver and plugin packages.

```javascript
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { TDesignResolver } = require('@tdesign-vue-next/auto-import-resolver');
module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [TDesignResolver({
        library: 'mobile-vue'
      })],
    }),
    Components({
      resolvers: [TDesignResolver({
        library: 'mobile-vue'
      })],
    }),
  ],
};
```

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

### Run Vitest Unit Test UI

Source: https://github.com/tencent/tdesign-mobile-vue/wiki/mobile-vue：单元测试指引

Launch the Vitest UI for an interactive testing experience. You can run all tests or specify a particular component.

```bash
npm run test:unit-gui
```

```bash
npm run test:unit-gui button
```

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

### Configure Vite for Automatic Imports with TDesign

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/site/docs/getting-started.md

Set up Vite to automatically import TDesign components and APIs using `unplugin-vue-components` and `unplugin-auto-import`. Requires installing resolver and plugin packages.

```javascript
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { TDesignResolver } from '@tdesign-vue-next/auto-import-resolver';
export default {
  plugins: [
    // ...
    AutoImport({
      resolvers: [TDesignResolver({
        library: 'mobile-vue'
      })],
    }),
    Components({
      resolvers: [TDesignResolver({
        library: 'mobile-vue'
      })],
    }),
  ],
};
```

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

### DialogInstance

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/dialog/dialog.en-US.md

Methods available on a Dialog instance.

```APIDOC
## DialogInstance

### Description

Methods available on a Dialog instance.

### Methods

- **destroy** - params: `-` - return: `-` - description: required
- **hide** - params: `-` - return: `-` - description: required
- **show** - params: `-` - return: `-` - description: required
- **update** - params: `(props: DialogOptions)` - return: `-` - description: required
```

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

### Install TDesign Mobile Vue via Browser CDN

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/site/docs/getting-started.md

Include TDesign's JavaScript and CSS files via CDN for use in a browser. Note that this method is not recommended for production due to optimization limitations.

```html
<!-- vue 3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<link rel="stylesheet" href="https://unpkg.com/tdesign-mobile-vue/dist/tdesign.min.css" />
<script src="https://unpkg.com/tdesign-mobile-vue/dist/tdesign.min.js"></script>
...
<script>
  Vue.createApp({}).use(TDesign).mount('#app');
</script>
```

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

### Integrate TDesign Mobile Vue into Vue App

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/README.md

Import and use the TDesign plugin in your Vue 3 application. This setup is recommended for projects using build tools that support tree-shaking for on-demand component loading.

```javascript
import { createApp } from 'vue';
import TDesign from 'tdesign-mobile-vue';

const app = createApp(App);
app.use(TDesign);
```

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

### Initialize Touch Emulator for TDesign

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/site/mobile.html

This script initializes the Touch Emulator for TDesign, which is necessary for simulating touch events in non-touch environments. Ensure this script is loaded before any touch-dependent TDesign components are used.

```javascript
!function(a){var b=a.createElement("script");b.onload=function(){TouchEmulator();},b.src="https://tdesign.gtimg.com/js/touch-emulator.js",a.body.appendChild(b)}(document);
```

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

### NoticeBar Props

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/notice-bar/notice-bar.en-US.md

Configuration options for the NoticeBar component.

```APIDOC
## NoticeBar Props

### Description
Configuration options for the NoticeBar component.

### Props
- **content** (string | Array | Slot | Function) - Optional - The content to display in the notice bar. Can be a string, an array of strings, a slot, or a function.
- **direction** (string) - Optional, default: 'horizontal' - The display direction of the notice bar. Options: 'horizontal', 'vertical'.
- **interval** (number) - Optional, default: 2000 - The interval for automatic scrolling in milliseconds.
- **marquee** (boolean | object) - Optional, default: false - Enables or configures marquee scrolling. Can be a boolean or an object with `speed`, `loop`, and `delay` properties.
- **operation** (string | Slot | Function) - Optional - Content or slot for the operation area of the notice bar.
- **prefixIcon** (boolean | Slot | Function) - Optional, default: true - Renders a prefix icon. Can be a boolean to use default, or a slot/function for custom icon.
- **suffixIcon** (Slot | Function) - Optional - Slot for a suffix icon.
- **theme** (string) - Optional, default: 'info' - The theme of the notice bar. Options: 'info', 'success', 'warning', 'error'.
- **visible** (boolean) - Optional, default: false - Controls the visibility of the notice bar. `v-model` and `v-model:visible` are supported.
- **defaultVisible** (boolean) - Optional, default: false - Uncontrolled property to set the initial visibility.

### Events
- **onChange** (function) - Callback function triggered when the notice bar's content changes or auto-plays. Receives `current` (number) and `context` ({ source: NoticeBarChangeSource }).
- **onClick** (function) - Callback function triggered when the notice bar is clicked. Receives `trigger` (NoticeBarTrigger).
```

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

### Toast Options

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/toast/toast.md

Options for configuring the Toast component, including attachment and styling.

```APIDOC
## ToastOptions

### Description

Options for configuring the Toast component, including attachment and styling.

### Properties

- **attach** (String / Function) - Optional - Default: 'body' - Specifies the attachment node. If a String, it's treated as a selector. Example: 'body' or `() => document.body`. TS Type: `AttachNode`. See [Common Type Definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts).
- **className** (String) - Optional - Default: '-' - Class name for the toast container. Example: 't-class-toast-first t-class-toast-second'.
- **style** (String / Object) - Optional - Default: '-' - Style attribute for the toast container. Accepts [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText). TS Type: `string | Styles`. See [Common Type Definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts).
- **`ToastProps`** - Inherits all properties from `ToastProps`.
```

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

### ImageViewer Instance Functions

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/image-viewer/image-viewer.md

Methods available on the ImageViewer component instance.

```APIDOC
## ImageViewerInstanceFunctions Component Instance Methods

| Name | Parameters | Return Value | Description |
|---|---|---|---|
| swipeTo | `(index: number, options?: SwiperToOptions)` | - | `1.13.2`. Switches to the specified preview image position. |
```

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

### Form Instance Functions

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/form/form.en-US.md

Methods available on the Form component instance.

```APIDOC
## Form Instance Functions

### clearValidate
- **Params**: `(fields?: Array<keyof FormData>)`
- **Return**: -
- **Description**: required

### reset
- **Params**: `(params?: FormResetParams<FormData>)`
- **Return**: -
- **Description**: required. [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/form/type.ts). `interface FormResetParams<FormData> { type?: 'initial' | 'empty'; fields?: Array<keyof FormData> }`

### setValidateMessage
- **Params**: `(message: FormValidateMessage<FormData>)`
- **Return**: -
- **Description**: required. [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/form/type.ts). `type FormValidateMessage<FormData> = { [field in keyof FormData]: FormItemValidateMessage[] }` `interface FormItemValidateMessage { type: 'warning' | 'error'; message: string }`

### submit
- **Params**: `(params?: { showErrorMessage?: boolean })`
- **Return**: -
- **Description**: required

### validate
- **Params**: `(params?: FormValidateParams)`
- **Return**: `Promise<FormValidateResult<FormData>>`
- **Description**: required. [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/form/type.ts). `interface FormValidateParams { fields?: Array<string>; showErrorMessage?: boolean; trigger?: ValidateTriggerType }` `type ValidateTriggerType = 'blur' | 'change' | 'all'`

### validateOnly
- **Params**: `(params?: Pick<FormValidateParams, 'fields' | 'trigger'>)`
- **Return**: `Promise<FormValidateResult<FormData>>`
- **Description**: required
```

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

### Dialog Plugin

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/dialog/dialog.md

How to use the Dialog plugin globally or via `this.$dialog`.

```APIDOC
## Dialog Plugin

### Description
Usage of the Dialog plugin, accessible globally or via `this.$dialog`.

### Usage

Call the plugin with options:
```javascript
this.$dialog(options: DialogOptions)
```

This method returns a `DialogInstance`.
```

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

### InputConfig Interface

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/config-provider/config-provider.en-US.md

Configuration options for the Input component.

```APIDOC
## InputConfig

### Properties

- **placeholder** (String): Placeholder text. Default: '-'. Required: No.
```

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

### DrawerPlugin

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/drawer/drawer.md

Plugin for showing drawers programmatically, accessible via `this.$drawer`.

```APIDOC
## DrawerPlugin

### Description
Plugin for showing drawers programmatically, accessible via `this.$drawer`.

### Parameters

- **options** - The configuration options for the drawer. TS Type: `DrawerOptions`.
```

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

### Steps Component Props

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/steps/steps.en-US.md

Props for configuring the Steps component.

```APIDOC
## Steps Props

| Name | Type | Default | Description | Required |
|---|---|---|---|---|
| current | String / Number | - | `v-model` and `v-model:current` is supported | N |
| defaultCurrent | String / Number | - | uncontrolled property | N |
| currentStatus | String | process | options: default/process/finish/error | N |
| layout | String | horizontal | options: horizontal/vertical | N |
| readonly | Boolean | undefined | - | N |
| sequence | String | positive | options: positive/reverse | N |
| theme | String | default | options: default/dot | N |
| onChange | Function |  | Typescript：`(current: string \| number, previous: string \| number, context?: { e?: MouseEvent }) => void`<br/> | N
```

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

### Loading Plugin

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/loading/loading.en-US.md

Information about the Loading plugin and its usage.

```APIDOC
## LoadingPlugin

### Description
Provides a plugin for global loading state management, accessible via `this.$loading`.

### Parameters

#### options
- **Type**: `Function`
- **Default**: `-`
- **Description**: Required parameter to configure the loading plugin. Typescript: `boolean | TdLoadingProps`.

### Return Value

- **Type**: `LoadingInstance`
- **Description**: An instance of the loading component with a `hide` method. `interface LoadingInstance { hide: () => void }`
```

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

### QRCodeConfig Interface

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/config-provider/config-provider.en-US.md

Configuration options for the QRCode component.

```APIDOC
## QRCodeConfig

### Properties

- **expiredText** (String): Description text for when the QR code has expired. Default: '-'. Required: No.
- **refreshText** (String): Description text for refreshing the QR code. Default: '-'. Required: No.
- **scannedText** (String): Description text when the QR code has been scanned. Default: '-'. Required: No.
```

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

### Overlay Props

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/overlay/overlay.md

Configuration options for the Overlay component.

```APIDOC
## Overlay Props

### backgroundColor
- **Type**: String
- **Default**: -
- **Description**: The background color of the overlay.
- **Required**: N

### customStyle
- **Type**: String
- **Default**: -
- **Description**: Custom styles for the overlay. Has lower priority than other properties.
- **Required**: N

### duration
- **Type**: Number
- **Default**: 300
- **Description**: The background color transition duration in milliseconds.
- **Required**: N

### preventScrollThrough
- **Type**: Boolean
- **Default**: true
- **Description**: Whether to prevent background scrolling. When scrolling is prevented, content within the overlay will also not be scrollable.
- **Required**: N

### visible
- **Type**: Boolean
- **Default**: false
- **Description**: Whether the overlay is visible.
- **Required**: N

### zIndex
- **Type**: Number
- **Default**: 1000
- **Description**: The z-index of the overlay.
- **Required**: N

### onClick
- **Type**: Function
- **Default**: -
- **Description**: Click event handler for the overlay.
- **TS Type**: `(context: { e: MouseEvent }) => void`
- **Required**: N
```

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

### Toast Options

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/toast/toast.en-US.md

Additional options for configuring the Toast component, including attachment, styling, and extending base props.

```APIDOC
## ToastOptions

### Description
Additional options for configuring the Toast component, including attachment, styling, and extending base props.

### Props

- **attach** (String / Function) - Optional - Typescript: `AttachNode`. See [common definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts). Defaults to 'body'.
- **className** (String) - Optional - Defaults to '-'.
- **style** (String / Object) - Optional - Typescript: `string | Styles`. See [common definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts).
- **ToastProps** - Optional - Extends `ToastProps`.
```

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

### Execute Specific Component Unit Tests

Source: https://github.com/tencent/tdesign-mobile-vue/wiki/mobile-vue：单元测试指引

Run unit tests for a single component, like 'Button', to reduce execution time. This is useful during development.

```bash
npm run test:unit button
```

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

### Import Reset Styles

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/site/docs/getting-started.md

Import the reset CSS file if your project relies on the previous reset styles, available from version 0.25.0 onwards.

```javascript
import 'tdesign-mobile-vue/dist/reset.css';
```

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

### GlobalConfigProvider Configuration Options

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/config-provider/config-provider.md

The `globalConfig` object can contain properties to configure individual components.

```APIDOC
## GlobalConfigProvider

### actionSheet

- **Type**: Object
- **Default**: -
- **Description**: Action sheet global configuration. TS Type: `ActionSheetConfig`
- **Required**: No

### calendar

- **Type**: Object
- **Default**: -
- **Description**: Calendar component global configuration. TS Type: `CalendarConfig`
- **Required**: No

### cascader

- **Type**: Object
- **Default**: -
- **Description**: Cascader component global configuration. TS Type: `CascaderConfig`
- **Required**: No

### classPrefix

- **Type**: String
- **Default**: t
- **Description**: CSS class name prefix.
- **Required**: No

### dateTimePicker

- **Type**: Object
- **Default**: -
- **Description**: Date time picker global configuration. TS Type: `DateTimePickerConfig`
- **Required**: No

### dropdownMenu

- **Type**: Object
- **Default**: -
- **Description**: Dropdown menu global configuration. TS Type: `DropdownMenuConfig`
- **Required**: No

### guide

- **Type**: Object
- **Default**: -
- **Description**: Guide global configuration. TS Type: `GuideConfig`
- **Required**: No

### list

- **Type**: Object
- **Default**: -
- **Description**: List component global configuration. TS Type: `ListConfig`
- **Required**: No

### picker

- **Type**: Object
- **Default**: -
- **Description**: Picker component global configuration. TS Type: `PickerConfig`
- **Required**: No

### pullDownRefresh

- **Type**: Object
- **Default**: -
- **Description**: Pull down refresh global configuration. TS Type: `PullDownRefreshConfig`
- **Required**: No

### qrcode

- **Type**: Object
- **Default**: -
- **Description**: QR code global configuration. TS Type: `QRCodeConfig`
- **Required**: No

### rate

- **Type**: Object
- **Default**: -
- **Description**: Rate component global configuration. TS Type: `RateConfig`
- **Required**: No

### tabBar

- **Type**: Object
- **Default**: -
- **Description**: Tab bar global configuration. TS Type: `TabBarConfig`
- **Required**: No

### table

- **Type**: Object
- **Default**: -
- **Description**: Table component global configuration. TS Type: `TableConfig`
- **Required**: No

### upload

- **Type**: Object
- **Default**: -
- **Description**: Upload component global configuration. TS Type: `UploadConfig`
- **Required**: No
```

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

### Input Component Properties

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/input/input.en-US.md

This section details the various properties available for configuring the Input component. These properties allow for customization of alignment, input behavior, appearance, and more.

```APIDOC
## Input Component Properties

This section details the various properties available for configuring the Input component. These properties allow for customization of alignment, input behavior, appearance, and more.

### Properties

- **align** (String) - Optional - Text align type. Options: left/center/right. Default: `left`
- **allowInputOverMax** (Boolean) - Optional - Allow to continue input on value length is over `maxlength` or `maxcharacter`. Default: `false`
- **autocomplete** (String) - Optional - Attribute of input element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).
- **autofocus** (Boolean) - Optional - Autofocus on first rendered. Default: `false`
- **borderless** (Boolean) - Optional - Input without border. Default: `false`
- **clearTrigger** (String) - Optional - Show clear icon, clicked to clear input value. Options: always / focus. Default: `always`
- **clearable** (Boolean) - Optional - Show clear icon, clicked to clear input value. Default: `false`
- **cursorColor** (String) - Optional - Default: `#0052d9`
- **disabled** (Boolean) - Optional - Make input to be disabled.
- **enterkeyhint** (String) - Optional - Attribute of input element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint). Options: enter/done/go/next/previous/search/send.
- **extra** (Slot / Function) - Optional - Typescript: `TNode`. See [common.ts](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts).
- **format** (Function) - Optional - Input value formatter. `type=number` does not work. If you need to format numbers, `InputNumber` Component might be better. Typescript: `InputFormatType`. See [type.ts](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/input/type.ts).
- **label** (String / Slot / Function) - Optional - Text on the left of input. Typescript: `string | TNode`. See [common.ts](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts).
- **layout** (String) - Optional - Options: vertical/horizontal. Default: `horizontal`
- **maxcharacter** (Number) - Optional - 
- **maxlength** (String / Number) - Optional - 
- **name** (String) - Optional - 
- **placeholder** (String) - Optional - 
- **prefixIcon** (Slot / Function) - Optional - Typescript: `TNode`. See [common.ts](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts).
- **readonly** (Boolean) - Optional - 
- **size** (String) - Optional - `deprecated`. Options: small/medium. Typescript: `'medium' | 'small'`. Default: `small`
- **spellCheck** (Boolean) - Optional - Attribute of input element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/spellcheck). Default: `false`
- **status** (String) - Optional - Options: default/success/warning/error. Default: `default`
- **suffix** (String / Slot / Function) - Optional - Suffix content before suffixIcon. Typescript: `string | TNode`. See [common.ts](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts).
- **suffixIcon** (Slot / Function) - Optional - Suffix icon of input. Typescript: `TNode`. See [common.ts](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts).
- **tips** (String / Slot / Function) - Optional - Tips on the bottom of input, different `status` can make tips to be different color. Typescript: `string | TNode`. See [common.ts](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts).
- **type** (String) - Optional - Type attribute of input element. If you are using `type=number`, `InputNumber` Component might be better. Options: text/number/url/tel/password/search/submit/hidden. Default: `text`
- **value** (String / Number) - Optional - Input value. `v-model` and `v-model:value` is supported. Typescript: `InputValue`. See [type.ts](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/input/type.ts).
- **defaultValue** (String / Number) - Optional - Input value. Uncontrolled property. Typescript: `InputValue`. See [type.ts](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/input/type.ts).

```

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

### BaseTableInstanceFunctions

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/table/table.md

Methods available on the BaseTable component instance.

```APIDOC
## BaseTableInstanceFunctions

### refreshTable

- **Description**: Refreshes the entire table. This method is required.
- **Parameters**: None.
- **Returns**: None.
```

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

### On-Demand Import: Single Component

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/site/docs/getting-started.en-US.md

Import individual components on demand to optimize bundle size, especially when using build tools with tree-shaking.

```javascript
import { createApp } from 'vue';
import { Button as TButton } from 'tdesign-mobile-vue';
import App from './app.vue';

// import global design variables
import 'tdesign-mobile-vue/es/style/index.css';

const app = createApp(App);
app.use(TButton);
```

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

### DropdownMenuConfig Interface

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/config-provider/config-provider.en-US.md

Configuration options for the DropdownMenu component.

```APIDOC
## DropdownMenuConfig

### Properties

- **confirm** (String): Text for the confirm button. Default: '-'. Required: No.
- **reset** (String): Text for the reset button. Default: '-'. Required: No.
```

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

### Basic Usage: Register All Components

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/site/docs/getting-started.en-US.md

Register all TDesign components globally for easy access. Suitable for projects that extensively use TDesign components.

```javascript
import { createApp } from 'vue';
import TDesign from 'tdesign-mobile-vue';
import App from './app.vue';

// import global design variables
import 'tdesign-mobile-vue/es/style/index.css';

const app = createApp(App);
app.use(TDesign);
```

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

### View Unit Test Coverage Report

Source: https://github.com/tencent/tdesign-mobile-vue/wiki/mobile-vue：单元测试指引

Generate and view a detailed unit test coverage report to identify untested code. The report is typically available at '/test/unit/coverage/index.html'.

```bash
npm run test:unit-coverage
```

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

### Drawer Props

Source: https://github.com/tencent/tdesign-mobile-vue/blob/develop/src/drawer/drawer.md

Props for configuring the Drawer component.

```APIDOC
## Drawer Props

### Description
Props for configuring the Drawer component.

### Props

- **attach** (String / Function) - Optional - The node to which the drawer is mounted. Defaults to the component's own position. If a String, it's treated as a selector. Example: 'body' or `() => document.body`. TS Type: `AttachNode`.
- **closeOnOverlayClick** (Boolean) - Optional - Whether to close the drawer when the overlay is clicked. Default: `true`.
- **destroyOnClose** (Boolean) - Optional - Whether to destroy the node when the drawer is closed. Default: `false`.
- **footer** (Slot / Function) - Optional - The footer content of the drawer. TS Type: `TNode`.
- **items** (Array) - Optional - List items within the drawer. TS Type: `DrawerItem[]`, where `interface DrawerItem { title: string; icon?: TNode; }`.
- **overlayProps** (Object) - Optional - Properties for the overlay, passed to the overlay component. TS Type: `OverlayProps`.
- **placement** (String) - Optional - The direction of the drawer. Options: 'left'/'right'. Default: 'right'.
- **showOverlay** (Boolean) - Optional - Whether to display the overlay. Default: `true`.
- **title** (String / Slot / Function) - Optional - The title of the drawer. TS Type: `string | TNode`.
- **visible** (Boolean) - Optional - Whether the component is visible. Default: `false`.
- **zIndex** (Number) - Optional - The z-index of the drawer. Default: `1500`.
- **onClose** (Function) - Optional - Triggered when the drawer is closed. TS Type: `(trigger: DrawerTriggerSource) => void`, where `DrawerTriggerSource = 'overlay'`.
- **onItemClick** (Function) - Optional - Triggered when an item in the drawer list is clicked. TS Type: `(index: number, item: DrawerItem, context: { e: MouseEvent }) => void`.
- **onOverlayClick** (Function) - Optional - Triggered when the overlay is clicked, if the overlay exists. TS Type: `(context: { e: MouseEvent }) => void`.
```