### Common Project Development Scripts (Bash)

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

This Bash snippet lists various `npm run` commands available for developing, building, testing, and maintaining the tdesign-vue project. It includes scripts for starting the development server, updating assets, building the site and library, running tests (unit, e2e, node), and linting code.

```Bash
# 启动项目
npm run dev
# 更新组件库图标
npm run update:icon
# 更新网站组件单元覆盖率徽章
npm run update:coverage-badge
# 编译站点
npm run site
# 编译站点预览
npm run site:preview
# 清除 npm run build 的编译结果
npm run prebuild
# 编译组件库
pm run build
# 快速创建组件及其相关文件
pm run init
# 执行端对端测试
npm run test:e2e
# 执行端对端测试（含 UI 界面）
npm run test:e2e-gui
# 运行行单元测试用例
npm run test:unit
# 服务端渲染测试
npm run test:node
# 运行单元测试监听模式，文件发生变化时，立即执行单元测试
npm run test:watch
# 单元测试覆盖率
npm run test:coverage
# 构建产物测试
npm run test:build-files
# 自动修复 eslint 错误
npm run lint:fix
# 查看 eslint 错误
npm run lint
```

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

### Initialize TDesign Vue Project using CLI (Bash)

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

Installs the tdesign-starter-cli globally using npm and then initializes a new project using the installed CLI command.

```bash
## 1、install tdesign-starter-cli
npm i tdesign-starter-cli@latest -g

## 2、create project
td-starter init
```

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

### Project Directory Structure (Text)

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

This snippet illustrates the main directory structure of the tdesign-vue project repository. It shows the location of examples, build scripts, site code, component source code, and test files, providing an overview of the project layout.

```Text
├── examples // 组件文档与 demos
├── script // 构建代码
├── site // 站点代码
├── src // 组件代码
├── test // 测试文件
```

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

### Install Unplugin Packages for Auto Import

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

Installs the necessary development dependencies, unplugin-vue-components and unplugin-auto-import, for enabling automatic component and API imports.

```Shell
npm install -D unplugin-vue-components unplugin-auto-import
```

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

### Install TDesign Vue via npm (Vue 2.7)

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

Installs the TDesign Vue component library using npm for projects specifically using Vue 2.7.

```Shell
npm i tdesign-vue@naruto
```

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

### Install TDesign Vue via npm (Vue 2.6)

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

Installs the TDesign Vue component library using npm for projects using Vue 2.6 or earlier versions.

```Shell
npm i tdesign-vue
```

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

### Cypress E2E Test Example (JavaScript)

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

Provides a concrete example of a Cypress test case, demonstrating how to visit a page, select elements using `cy.get()`, and make assertions using `should()` and `expect()`.

```JavaScript
describe('测试按钮组件', () => {
  beforeEach(() => {
    // 打开某个页面
    cy.visit('/#/components/button');
  });
  // 测试用例定义
  it('case1: 测试三种按钮类型，内容，渲染正确的类型跟内容', function() {
    cy.get('.button')
      .should(ele => {
        expect(ele).to.have.text('按钮1');
      });
    ...
  });
  it('case2: 测试按钮尺寸，渲染正确的大小', function() {
  });
  it('case3: 测试带图标按钮，按钮内容里的图标位置', function() {
  });
  it('case4: 测试loading状态的按钮', function() {
  });
});
```

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

### Installing TDesign Vue via npm (Shell)

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

This snippet provides the npm commands to install the tdesign-vue package for different Vue 2 versions (2.6 and 2.7). It is a prerequisite for using the library in a project.

```shell
npm i tdesign-vue  // for vue 2.6
npm i tdesign-vue@naruto  // for vue 2.7
```

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

### Running E2E Tests via CLI (Shell)

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

Starts the Cypress end-to-end tests from the command line.

```Shell
npm run cypress
```

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

### Initializing New Component (Bash)

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

This Bash command uses the project's `npm run init` script to quickly create the necessary files and structure for a new component named 'button'. It streamlines the process of adding a new component to the library.

```Bash
npm run init button
```

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

### Configuring Component Documentation Routes (JS)

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

This JavaScript snippet demonstrates the structure for configuring routes for component documentation pages within the site's configuration file. Each component's documentation (an MD file) is mapped to a route using its name and a dynamic import.

```JavaScript
{
  title: '基础组件',
  type: 'component', // 组件文档
  children: [
    {
      title: 'Button 按钮',
      name: 'button',
      component: () => import(`@/examples/components/button/button.md`),
    },
    {
      title: 'Icon 图标',
      name: 'icon',
      component: () => import(`@/examples/components/icon/icon.md`),
    },
    ...
  ],
},
```

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

### Install TDesign Vue via npm

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

Installs the TDesign Vue component library package using the npm package manager. This is the standard way to add the library to your project dependencies.

```shell
npm i tdesign-vue
```

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

### Custom Upload Method Response Examples (JS)

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

Examples demonstrating the expected return structure for the `requestMethod` property in JavaScript/JSON format, showing success and failure states, including single and multiple file results.

```JavaScript
{ status: 'fail', error: '上传失败', response }
```

```JavaScript
{ status: 'success', response: { url: 'https://tdesign.gtimg.com/site/avatar.jpg' } }
```

```JavaScript
{ status: 'success', files: [{ url: 'https://xxx.png', name: 'xxx.png' }]}
```

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

### Referencing Demo in Markdown Doc (Markdown)

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

This Markdown snippet shows the syntax used to embed a component demo within its documentation file. The `{{ base }}` syntax references a specific demo file (e.g., `base.vue` or `base.jsx`) located in the component's `demos` directory, optionally followed by a description in brackets.

```Markdown
{{ base }}
[demo 描述（可不填）]
```

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

### Example Usage of scrollToElement Method

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

An example demonstrating how to use the `scrollToElement` instance method for virtual scrolling scenarios. It shows how to scroll to a specific row index with optional offset, duration, and scroll behavior.

```JavaScript
scrollToElement({ index: 100, top: 80, time: 200, behavior: 'smooth' })
```

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

### Basic TDesign Vue 2 Integration

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

Imports the TDesign Vue library and its global styles, then registers it as a Vue plugin to make all components available application-wide. This is the basic setup for using TDesign components.

```javascript
import Vue from 'vue';
import TDesign from 'tdesign-vue';
// 引入组件库全局样式资源
import 'tdesign-vue/es/style/index.css';

Vue.use(TDesign);
```

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

### Invoking TDesign Drawer Plugin in Vue

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

Creates and shows a Drawer instance using the TDesign plugin method available on the Vue instance. Requires the TDesign Drawer plugin to be installed and registered.

```Vue
this.$drawer(options)
```

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

### Configuring Global Message Plugin Settings (JavaScript)

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

This snippet demonstrates how to apply global configuration settings to the TDesign Vue Message plugin. It shows examples using both the plugin method (this.$message.config) and the functional method (MessagePlugin.config) to set the message placement, attachment node, offset, and z-index.

```javascript
this.$message.config('top', 'body', [10, 20], 9999);
MessagePlugin.config('top', 'body', [10, 20], 9999);
```

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

### Importing Temporary Styles in Vue Component (JS)

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

This JavaScript snippet demonstrates how to import a temporary LESS file directly into a Vue component's script. This is useful for writing temporary styles during component development before the final shared UI styles are available. The temporary import should be removed once the shared UI styles are integrated.

```JavaScript
// button.tsx

// 先引入临时的样式文件用于开发功能，待 UI 开发完成之后需要与 UI 样式对齐并删除 less 文件
import './button.less';
```

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

### Configuring TDesign Class Prefix Globally in Vue

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

This snippet demonstrates how to import the ESM version of TDesign Vue, install it globally, and then use the <t-config-provider> component to set a custom 'classPrefix' via the 'globalConfig' prop for a specific part of your application or globally if wrapped around the root component.

```JavaScript
import Vue from 'vue'
import TDesign from 'tdesign-vue/esm'
import 'tdesign-vue/esm/style/index.js'

Vue.use(TDesign);
...

<t-config-provider :globalConfig="{ classPrefix: 'any'}">
    <t-button>TDesign to any design</t-button>
</t-config-provider>
```

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

### Setting Row Attributes with Function in Vue Table

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

Example showing how to dynamically set HTML attribute objects for table rows using a function for the `rowAttributes` property.

```JavaScript
() => [{ "draggable": true }]
```

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

### Basic Usage of TDesign Vue (Full Import)

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

Demonstrates the basic usage of TDesign Vue by importing and registering the entire library globally in a Vue application. This is suitable for projects that extensively use TDesign components.

```JavaScript
import Vue from 'vue';
import TDesign from 'tdesign-vue';

// 引入组件库的少量全局样式变量
import 'tdesign-vue/es/style/index.css';

Vue.use(TDesign);
```

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

### Customizing Cell Merging Function in Vue Table

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

Example of a function used with `rowspanAndColspan` or `rowspanAndColspanInFooter` to define cell merging based on row and column parameters.

```JavaScript
({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }
```

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

### Importing TDesign Vue Reset CSS

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

This JavaScript snippet demonstrates how to import the `reset.css` file from the `dist` directory of `tdesign-vue`. This is required for projects that still depend on the built-in reset styles after version 0.43.0.

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

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

### On-Demand Usage of TDesign Vue (Manual Import)

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

Shows how to manually import specific TDesign components to reduce bundle size, leveraging tree-shaking capabilities of build tools like Webpack or Rollup.

```JavaScript
import { Button as TButton } from 'tdesign-vue';

// 引入组件库的少量全局样式变量
import 'tdesign-vue/es/style/index.css';

Vue.use(TButton);
```

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

### Setting Single Row Attribute Object in Vue Table

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

Example showing how to set a single HTML attribute object for table rows using the `rowAttributes` property.

```JavaScript
{ draggable: true }
```

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

### Setting Multiple Row Attributes Array in Vue Table

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

Example showing how to set multiple HTML attribute objects for table rows using an array for the `rowAttributes` property.

```JavaScript
[{ "draggable": true }, { "title": '超出省略显示' }]
```

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

### Import TDesign Vue via Browser

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

Includes TDesign Vue, Vue, and Vue Composition API directly in an HTML file using CDN links. This method is not recommended for production due to version and CDN stability issues.

```HTML
<link rel="stylesheet" href="https://unpkg.com/tdesign-vue/dist/tdesign.min.css" />
<script src="https://unpkg.com/vue@2.6/dist/vue.js"></script>
<script src="https://unpkg.com/@vue/composition-api@1.7.0/dist/vue-composition-api.prod.js"></script>
<script src="https://unpkg.com/tdesign-vue/dist/tdesign.min.js"></script>
...
<script>
  Vue.use(TDesign);
</script>
```

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

### Running E2E Tests via GUI (Shell)

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

Launches the Cypress GUI, allowing interactive execution and debugging of end-to-end tests.

```Shell
npm run cypress-gui
```

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

### Using Custom Validator for Non-Empty Check in TDesign Vue Form

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

Example of a general custom `validator` function to check if a value is not empty. This is an alternative to the `required` rule for custom logic.

```JavaScript
{ validator: (val) => val.length > 0, message: '请输入内容'}
```

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

### Generating Demo Unit Tests (Shell)

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

Runs a script to automatically generate unit test files for component demos if they are missing.

```Shell
npm run test:demo
```

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

### Using Telnumber Rule in TDesign Vue Form

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

Example of using the built-in `telnumber` rule to validate a value as a Chinese mobile phone number. Includes a custom error message.

```JavaScript
{ telnumber: true, message: '请输入正确的手机号码' }
```

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

### CSS Box Sizing Reset Style

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

This CSS snippet shows the global box model setting (`box-sizing: border-box;`) that was previously included in `reset.less` before version 0.43.0. Projects depending on this specific reset style may need to import it separately.

```CSS
*,
*::before,
*::after {
  box-sizing: border-box;
}
```

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

### Running Unit Tests (Shell)

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

Executes the unit tests for the project. Unit test files are located in the `__test__` directory within each component's source folder.

```Shell
npm run test:unit
```

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

### Using Enum Rule in TDesign Vue Form

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

Example of using the built-in `enum` rule to check if a field's value is one of the specified values in the array. Includes a custom error message.

```JavaScript
{ enum: ['primary', 'info', 'warning'], message: '值只能是 primary/info/warning 中的一种' }
```

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

### Using Vue Composition API with TDesign Vue

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

This snippet shows how to register the Vue Composition API plugin in your main.js file. This is necessary when using TDesign Vue components that internally rely on the Composition API, especially when using local registration.

```JavaScript
// main.js
import Vue from 'vue';
import VueCompositionAPI from '@vue/composition-api';

Vue.use(VueCompositionAPI);
Vue.use(otherPlugin);
```

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

### Using Custom Validator for Min Length in TDesign Vue Form

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

Example of a custom `validator` function to check if a value's length is greater than or equal to 10 characters, treating all characters as length 1. Provides a custom error message.

```JavaScript
{ validator: (val) => val.length >= 10, message: '内容文本长度至少为 10 个字' }
```

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

### Running TDesign Vue Tests (Shell)

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

Provides the main npm scripts for executing different types of tests and managing test artifacts within the TDesign Vue project.

```Shell
# Run all tests
npm run test

# Run unit tests
npm run test:unit

# Run server-side rendering tests
npm run test:node

# Generate test coverage report
npm run test:coverage

# Update snapshot
npm run test:update
```

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

### Using Custom Validator for Max Length in TDesign Vue Form

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

Example of a custom `validator` function to check if a value's length is less than or equal to 10 characters, treating all characters as length 1. Provides a custom error message.

```JavaScript
{ validator: (val) => val.length <= 10, message: '内容文本长度不能超过 10 个字' }
```

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

### TypeScript Definition for Tips Prop

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

Specifies the possible types for the 'tips' prop, which can be a simple string or a TNode for custom rendering.

```TypeScript
string | TNode
```

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

### Configure Unplugin Auto Import in Vite

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

Adds and configures the unplugin-auto-import and unplugin-vue-components plugins with the TDesign resolver in the Vite configuration file to enable automatic import of TDesign components.

```JavaScript
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { TDesignResolver } from 'unplugin-vue-components/resolvers';

export default {
  plugins: [
    // ...
    AutoImport({
      resolvers: [TDesignResolver()],
    }),
    Components({
      resolvers: [TDesignResolver()],
    }),
  ],
};
```

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

### Using Custom Validator for Exact Length in TDesign Vue Form

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

Example of a custom `validator` function to check if a value's length is exactly 10 characters, treating all characters (including Chinese) as length 1. Provides a custom error message.

```JavaScript
{ validator: (val) => val.length === 10, message: '内容文本长度只能是 10 个字' }
```

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

### 实现图标选择器 - Vue

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

介绍如何在 Vue 项目中结合 TDesign 的 `Select` 组件实现一个图标选择器，用于需要用户选择图标的业务场景。

```Vue
{{ icon-select }}
```

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

### 全量引入图标 - Vue

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

说明如何在 Vue 项目中全量引入 TDesign 图标。介绍了如何设置图标尺寸（支持多种单位）和颜色（通过 CSS style 属性）。

```Vue
{{ base }}
```

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

### Label/Tips Prop Type (TypeScript)

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

Defines the possible TypeScript types for the `label` and `tips` props, allowing either a string or a TNode for custom content.

```TypeScript
string | TNode
```

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

### Steps options Prop Type (TypeScript)

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

Describes the expected TypeScript type for the `options` prop of the TDesign Vue Steps component. This prop allows defining steps using an array of objects conforming to the `TdStepItemProps` interface, providing an alternative to using individual `StepItem` components.

```TypeScript
Array<TdStepItemProps>
```

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

### Configuring Less Prefix in Vite (vite.config.js)

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

Shows how to configure the Less preprocessor in vite.config.js for a Vite project to modify the @prefix variable. This variable should match the classPrefix set in the global configuration to ensure styles are applied correctly.

```JavaScript
// vite.config.js 
{
    css: {
        preprocessorOptions: {
            less: {
                modifyVars: {
                    '@prefix': 'any',// 请注意需要与classPrefix保持一致
                },
                javascriptEnabled: true,
            },
        }
    }
}
```

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

### Setting TDesign Component Prefix via ConfigProvider (Vue)

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

Demonstrates how to change the default 't' component prefix using the <t-config-provider> component and its globalConfig.classPrefix property. This requires using the ESM build of tdesign-vue and coordinating with Less variable modifications.

```JavaScript
import Vue from 'vue'
import TDesign from 'tdesign-vue/esm'
import 'tdesign-vue/esm/style/index.js'

Vue.use(TDesign);

...

<t-config-provider :globalConfig="{ classPrefix: 'any'}">
    <t-button>TDesign to any design</t-button>
</t-config-provider>
```

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

### Showing a TDesign Drawer Instance

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

Shows a previously hidden Drawer instance. This method is typically called after creating an instance or hiding it.

```JavaScript
DrawerInstance.show()
```

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

### 按需引入图标 - Vue

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

介绍如何在 Vue 项目中按需引入单个 TDesign SVG 图标。这种方式有助于减少最终产物的大小。组件内部开发也采用此方式。

```Vue
{{ single }}
```

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

### Cypress BDD Test Structure (JavaScript)

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

Illustrates the basic structure for writing Cypress end-to-end tests using the Behavior-Driven Development (BDD) style with `describe`, `beforeEach`, and `it` blocks.

```JavaScript
describe('测试按钮组件', () => {
  beforeEach(() => {
    // 打开某个页面
    cy.visit('/#/components/button');
  });
  // 测试用例定义
  it('case1: 测试三种按钮类型，内容，渲染正确的类型跟内容', function() {
  });
  it('case2: 测试按钮尺寸，渲染正确的大小', function() {
  });
  it('case3: 测试带图标按钮，按钮内容里的图标位置', function() {
  });
  it('case4: 测试loading状态的按钮', function() {
  });
});
```

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

### Configure Unplugin Auto Import in Webpack

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

Adds and configures the unplugin-auto-import and unplugin-vue-components plugins with the TDesign resolver in the Webpack configuration file to enable automatic import of TDesign components.

```JavaScript
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { TDesignResolver } = require('unplugin-vue-components/resolvers');

module.exports = {
  // ...
  plugins: [
    AutoImport.default({
      resolvers: [TDesignResolver()],
    }),
    Components.default({
      resolvers: [TDesignResolver()],
    }),
  ],
};
```

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

### Creating Dialog Instances

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

Illustrates how to obtain a reference to a Dialog instance after invoking it via the plugin or function method. This instance can then be used to control the dialog programmatically.

```JavaScript
DialogInstance = this.$dialog(options)
```

```JavaScript
DialogInstance = DialogPlugin(options)
```

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

### Configure Vue Composition API for Plugin Auto Import (Vue 2.6)

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

Imports and uses the Vue Composition API plugin, which is required for automatic component import plugins like unplugin-vue-components in Vue 2.6 projects. It must be the first plugin used.

```JavaScript
import VueCompositionAPI from '@vue/composition-api';
// 引入组件库的少量全局样式变量
import 'tdesign-vue/es/style/index.css';

Vue.use(VueCompositionAPI); // 必须是项目的第一个 use
```

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

### Running Unit Tests for Specific Component (Shell)

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

Allows running unit tests only for a specified component, useful for debugging or focusing on changes.

```Shell
npm run test:unit button
```

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

### TypeScript Definition for Size Limit

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

Defines the structure for specifying file size limits, including the size value, unit, and an optional message. It also defines the allowed size units.

```TypeScript
interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string }
type SizeUnitArray = ['B', 'KB', 'MB', 'GB']
type SizeUnit = SizeUnitArray[number]
```

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

### Controlling Dialog Instances with Methods

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

Details the methods available on a Dialog instance (`DialogInstance`) for programmatic control. Includes methods for destroying, hiding, showing, and updating the dialog.

```JavaScript
DialogInstance.destroy()
```

```JavaScript
DialogInstance.hide()
```

```JavaScript
DialogInstance.show()
```

```JavaScript
DialogInstance.update()
```

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

### Running Server-Side Rendering Tests (Shell)

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

Executes SSR tests which compare rendering snapshots in a Node.js environment against existing jsdom snapshots.

```Shell
npm run test:node
```

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

### Checking Test Coverage (Shell)

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

Generates an HTML report showing the test coverage, located at `/test/unit/coverage/index.html`, to identify areas needing more tests.

```Shell
npm run test:coverage
```

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

### Accessing Drawer Plugin Instance

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

This snippet illustrates how the TDesign Drawer plugin instance can be accessed directly within a Vue component's context. It provides a convenient way to programmatically control drawer instances created via the plugin API.

```JavaScript
this.$drawer
```

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

### Invoking Dialog as a Function

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

Shows how to use the Dialog component by directly calling the `DialogPlugin` function. Provides options for standard, confirm, and alert dialogs.

```JavaScript
DialogPlugin(options)
```

```JavaScript
DialogPlugin.confirm(options)
```

```JavaScript
DialogPlugin.alert(options)
```

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

### Iconfont 图标高级用法 - Vue

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

说明如何在 Vue 项目中为 TDesign Iconfont 图标组件传入自定义 URL 加载新图标。强调自定义图标需要使用全称命名，并说明如何禁用默认图标加载。

```Vue
{{ iconfont-enhanced }}
```

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

### 使用 Iconfont 图标 - Vue

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

介绍如何在 Vue 项目中使用 TDesign 支持的 Iconfont 图标。使用 Iconfont 需要单独引入相应的图标组件。

```Vue
{{ iconfont }}
```

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

### Configuring Less Prefix in Vite for TDesign

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

This configuration for vite.config.js demonstrates how to modify the Less variable '@prefix' using the css.preprocessorOptions.less setting. This ensures that the component styles generated by Less align with the custom 'classPrefix' configured in the Vue application.

```JavaScript
// vite.config.js
{
    css: {
        preprocessorOptions: {
            less: {
                modifyVars: {
                    '@prefix': 'any', // should be the same as classPrefix
                },
                javascriptEnabled: true,
            },
        }
    }
}
```

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

### Configuring Column Resize Limits in Vue Table

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

Demonstrates how to configure minimum and maximum widths for column resizing using the `resize` property within a column definition object in the `columns` array.

```JavaScript
columns: [{ resize: { minWidth: 120, maxWidth: 300 } }]
```

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

### TypeScript Definition for onOneFileSuccess Event

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

Defines the signature for the 'onOneFileSuccess' event handler, triggered when a single file is uploaded successfully.

```TypeScript
(context: Pick<SuccessContext, 'e' | 'file' | 'response' | 'XMLHttpRequest'>) => void
```

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

### SVG 图标高级用法 - Vue

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

说明如何在 Vue 项目中为 TDesign SVG 图标组件传入自定义 URL 加载新图标。强调自定义图标需要使用全称命名，并说明如何禁用默认图标加载。

```Vue
{{ enhanced }}
```

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

### Calendar Props API (Vue)

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

Lists the available properties that can be passed to the TDesign Vue Calendar component to configure its behavior and appearance. Includes type, default value, description, and whether the prop is required.

```markdown
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
cell | String / Slot / Function | - | 单元格插槽。TS 类型：`string \| TNode<CalendarCell>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
cellAppend | String / Slot / Function | - | 单元格插槽，在原来的内容之后追加。TS 类型：`string \| TNode<CalendarCell>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
controllerConfig | Boolean / Object | undefined | 右上角控制器配置。支持全局配置。值为 false 则表示不显示控制器，值为 true 则显示控制器默认配置，值类型为 CalendarController 则显示为自定义控制器配置。TS 类型：`boolean \| CalendarController` | N
fillWithZero | Boolean | true | 小于 10 的日期，是否使用 '0' 填充。支持全局配置。默认表现为 `01` `02`，值为 false 表现为 `1` `2` `9` | N
firstDayOfWeek | Number | 1 | 第一天从星期几开始，仅在日历展示维度为月份时（mode = month）有效。默认为 1。可选项：1/2/3/4/5/6/7 | N
format | String | 'YYYY-MM-DD' | 用于格式化日期，决定事件参数 formattedFilterDate 的输出值。[详细文档](https://day.js.org/docs/en/display/format) | N
head | String / Slot / Function | - | 头部插槽（左上角处，默认不显示任何内容）。TS 类型：`string \| TNode<ControllerOptions>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
isShowWeekendDefault | Boolean | true | 默认是否显示周末 | N
mode | String | month | 日历展示维度。可选项：month/year | N
month | String / Number | - | 控制当前面板展示月份，优先级高于 `controllerConfig.month` | N
multiple | Boolean | - | 是否高亮多个日期单元格 | N
preventCellContextmenu | Boolean | false | 是否禁用单元格右键默认系统菜单 | N
range | Array | - | 用于设置日历的年月份显示范围，[范围开始，范围结束]。TS 类型：`Array<CalendarValue>` | N
theme | String | full | 日历风格。可选项：full/card | N
value | String / Array / Date | - | 当前高亮的日期。TS 类型：`CalendarValue \| CalendarValue[]` `type CalendarValue = string \| Date`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/calendar/type.ts) | N
week | Array / Slot / Function | - | 用于自定义日历星期呈现方式。CalendarWeek.day 表示当前是星期几。示例一：['周一', '周二', '周三', '周四', '周五', '星期六', '星期天']。示例二：`({ day }) => '周' + day`。TS 类型：`Array<string> \| TNode<CalendarWeek>` `interface CalendarWeek { day: WeekDay }` `type WeekDay = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/calendar/type.ts) | N
year | String / Number | - | 控制当前面板展示年份，优先级高于 `controllerConfig.year` | N
onCellClick | Function |  | TS 类型：`(options: { cell: CalendarCell; e: MouseEvent }) => void`\n日历单元格点击时触发 | N
onCellDoubleClick | Function |  | TS 类型：`(options: { cell: CalendarCell; e: MouseEvent }) => void`\n日历单元格双击时触发 | N
onCellRightClick | Function |  | TS 类型：`(options: { cell: CalendarCell; e: MouseEvent }) => void`\n日历单元格右击时触发 | N
onControllerChange | Function |  | TS 类型：`(options: ControllerOptions) => void`\n右上角控件组选中值有变化的时候触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/calendar/type.ts)。\n`interface ControllerOptions { filterDate: Date; formattedFilterDate: string; mode: string; isShowWeekend: boolean }`\n | N
onMonthChange | Function |  | TS 类型：`(options: { month: string; year: string }) => void`\n月份切换时触发 | N
```

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

### TDesign Vue Tree insertAfter/insertBefore Method Typescript Params

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

Typescript definition for the parameters of the `insertAfter` and `insertBefore` instance methods. It takes a target node value and the new data item to insert.

```Typescript
(value: TreeNodeValue, newData: T)
```

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

### Using TDesign Vue in Vue 2 Application (JavaScript)

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

This JavaScript snippet demonstrates how to import and register the TDesign Vue library and its default styles within a Vue 2 application. This makes the TDesign components available globally.

```javascript
import Vue from 'vue';
import TDesign from 'tdesign-vue';

import 'tdesign-vue/es/style/index.css';

Vue.use(TDesign);
```

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

### Define Props for PaginationMini Component Vue

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

This section outlines the properties (props) available for the TDesign Vue PaginationMini component, a simplified version of the pagination. It covers configuration for button states, layout, visibility, size, tips, and appearance.

```text
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
disabled | Boolean / Object | - | 按钮禁用配置。TS 类型：`boolean \| JumperDisabledConfig` `type JumperDisabledConfig = { prev?: boolean; current?: boolean; next?: boolean; }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/pagination/type.ts) | N
layout | String | horizontal | 按钮方向。可选项：horizontal/vertical | N
showCurrent | Boolean | true | 是否展示当前按钮。TS 类型：`boolean` | N
size | String | medium | 按钮尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
tips | Object | - | 提示文案配置，值为 `true` 显示默认文案；值为 `false` 不显示提示文案；值类型为对象则单独配置文案内容。TS 类型：`boolean \| JumperTipsConfig` `type JumperTipsConfig = { prev?: string; current?: string; next?: string; }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/pagination/type.ts) | N
variant | String | text | 按钮形式。可选项：text/outline | N
onChange | Function |  | TS 类型：`(context: {e: MouseEvent, trigger: JumperTrigger}) => void`<br/>按钮点击事件回调。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/pagination/type.ts)。<br/>`type JumperTrigger = 'prev' \| 'current' \| 'next'`<br/> | N
```

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

### TypeScript Definition for onChange Event

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

Defines the signature and context for the 'onChange' event, triggered when uploaded files change. It includes the new file list and context details about the change trigger, file, and response.

```TypeScript
(value: Array<T>, context: UploadChangeContext) => void
interface UploadChangeContext { e?: MouseEvent | ProgressEvent; response?: any; trigger: UploadChangeTrigger; index?: number; file?: UploadFile; files?: UploadFile[] }
type UploadChangeTrigger = 'add' | 'remove' | 'abort' | 'progress-success' | 'progress' | 'progress-fail'
```

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

### TypeScript Definition for onProgress Event

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

Defines the signature and context for the 'onProgress' event, providing details about the upload progress, including the file, current files, percentage, and progress type.

```TypeScript
(options: ProgressContext) => void
interface ProgressContext { e?: ProgressEvent; file?: UploadFile; currentFiles: UploadFile[]; percent: number; type: UploadProgressType; XMLHttpRequest?: XMLHttpRequest }
type UploadProgressType = 'real' | 'mock'
```

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

### TypeScript Definition for onFail Event

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

Defines the signature and context for the 'onFail' event, triggered when file upload fails. It provides details about the failed files, current files, response, and the specific file that failed.

```TypeScript
(options: UploadFailContext) => void
interface UploadFailContext { e?: ProgressEvent; failedFiles: UploadFile[]; currentFiles: UploadFile[]; response?: any; file: UploadFile; XMLHttpRequest?: XMLHttpRequest}
```

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

### TDesign Vue Tree onLoad/load Event Typescript Signature

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

Typescript signature for the `onLoad` and `load` event handlers. It receives a context object containing the node that was loaded.

```Typescript
(context: { node: TreeNodeModel<T> }) => void
```

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

### StepItem TNode Prop Type (TypeScript)

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

Indicates the TypeScript type for several props (`content`, `default`, `extra`, `icon`, `title`) in the TDesign Vue StepItem component. The `TNode` type signifies that the prop can accept a string, a Vue slot, or a function that returns renderable content.

```TypeScript
string | TNode
```

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

### TypeScript Definition for onPreview Event

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

Defines the signature for the 'onPreview' event handler, triggered when a preview element is clicked.

```TypeScript
(options: { file: UploadFile; index: number; e: MouseEvent }) => void
```

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

### Defining SuccessContext Interface in TypeScript

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

Defines the structure of the context object provided when files are successfully uploaded. It includes details about the event, file(s), response, and XMLHttpRequest.

```TypeScript
interface SuccessContext { e?: ProgressEvent; file?: UploadFile; fileList?: UploadFile[]; currentFiles?: UploadFile[]; response?: any; results?: SuccessContext[]; XMLHttpRequest?: XMLHttpRequest }
```

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

### SizeLimitObj and SizeUnit Types (TS)

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

TypeScript types defining the structure for the `sizeLimit` property when specified as an object, including the size value, unit, and an optional message. Also defines the possible size units.

```TypeScript
interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string }
```

```TypeScript
type SizeUnitArray = ['B', 'KB', 'MB', 'GB']
```

```TypeScript
type SizeUnit = SizeUnitArray[number]
```

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

### TypeScript Definition for onCancelUpload Event

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

Defines the signature for the 'onCancelUpload' event handler, which is a function that takes no arguments and returns void.

```TypeScript
() => void
```

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

### Alert Component Props API (Vue)

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

This table lists the available properties (props) for configuring the TDesign Vue Alert component, including their types, default values, descriptions, and whether they are required. It covers options for content, appearance, and behavior.

```Markdown
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
close | String / Boolean / Slot / Function | false | 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
default | String / Slot / Function | - | 内容，同 message。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
icon | Slot / Function | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
maxLine | Number | 0 | 内容显示最大行数，超出的内容会折叠收起，用户点击后再展开。值为 0 表示不折叠 | N
message | String / Slot / Function | - | 内容（子元素）。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
operation | Slot / Function | - | 跟在告警内容后面的操作区。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
theme | String | info | 组件风格。可选项：success/info/warning/error | N
title | String / Slot / Function | - | 标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
onClose | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`\n关闭按钮点击时触发 | N
onClosed | Function |  | TS 类型：`(context: { e: TransitionEvent }) => void`\n告警提示框关闭动画结束后触发 | N
```

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

### Steps onChange Prop Type (TypeScript)

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

Defines the TypeScript signature for the `onChange` prop function in the TDesign Vue Steps component. This function is called when the current step changes, providing the new and previous step values and an optional mouse event context.

```TypeScript
(current: string | number, previous: string | number, context?: { e?: MouseEvent }) => void
```

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

### Handle Async Loading Click in TDesign Vue Table

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

Triggered when the async loading text is clicked. Provides context about the current loading status.

```TypeScript
(context: { status: 'loading' | 'load-more' }) => void
```

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

### onAsyncLoadingClick Event Signature - TypeScript

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

Documents the signature for the `onAsyncLoadingClick` event, triggered when the async loading area is clicked. The context object indicates the loading status.

```TypeScript
(context: { status: 'loading' | 'load-more' }) => void
```

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

### Defining ProgressContext Interface in TypeScript

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

Defines the structure of the context object provided during the upload progress event. It includes details about the event, file, current files, percentage complete, and progress type.

```TypeScript
interface ProgressContext { e?: ProgressEvent; file?: UploadFile; currentFiles: UploadFile[]; percent: number; type: UploadProgressType; XMLHttpRequest?: XMLHttpRequest }
```

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

### Handling Upload Progress in TDesign Vue Upload (TS)

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

Triggered when the upload progress changes. This includes both real progress (for larger files) and mock progress (for smaller files or when configured). The context provides the percentage, file details, and the type of progress ('real' or 'mock').

```ts
(options: ProgressContext) => void
interface ProgressContext { e?: ProgressEvent; file?: UploadFile; currentFiles: UploadFile[]; percent: number; type: UploadProgressType; XMLHttpRequest?: XMLHttpRequest }
type UploadProgressType = 'real' | 'mock'
```

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

### Configuring Less Prefix in vue-cli (vue.config.js)

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

Shows how to configure the Less loader in vue.config.js for a Vue CLI project to modify the @prefix variable. This variable should match the classPrefix set in the global configuration to ensure styles are applied correctly.

```JavaScript
// vue.config.js
{
    css: {
        loaderOptions: {
            less: {
                lessOptions: {
                    modifyVars: {
                     '@prefix': 'any',// 请注意需要与classPrefix保持一致
                    },
                    javascriptEnabled: true,
                },
            },
        }
    }
}
```

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

### Updating Unit Test Snapshots (Shell)

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

Updates the snapshot files for unit tests when expected changes occur due to code modifications.

```Shell
npm run test:unit-update
```

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

### Handling Preview Click in TDesign Vue Upload (TS)

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

Triggered when a user clicks on an image preview. Provides the file object being previewed, its index in the list, and the original mouse event.

```ts
(options: { file: UploadFile; index: number; e: MouseEvent }) => void
```

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

### Updating SSR Test Snapshots (Shell)

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

Updates the snapshot files for server-side rendering tests when expected changes occur.

```Shell
npm run test:node-update
```

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

### Alert Component Events API (Vue)

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

This table outlines the events emitted by the TDesign Vue Alert component, detailing the event names, parameters provided in the event context, and a description of when each event is triggered.

```Markdown
名称 | 参数 | 描述
-- | -- | --
close | `(context: { e: MouseEvent })` | 关闭按钮点击时触发
closed | `(context: { e: TransitionEvent })` | 告警提示框关闭动画结束后触发
```

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

### TypeScript Type for Progress color Prop

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

Defines the possible types for the `color` prop of the Progress component, allowing a single string, an array of strings, or a record mapping strings to strings.

```TypeScript
string | Array<string> | Record<string, string>
```