T-ui-Plus

https://github.com/wocwin/t-ui-plus
Admin
T-ui-Plus is a component library that re-encapsulates Element-Plus components for Vue3 and...
Tokens:22,207
Snippets:159
Trust Score:8.6
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Plugins for Automatic Imports

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/guide/quickstart.md

Install necessary npm packages for enabling automatic imports of components and APIs, including plugins for Vue, Element-Plus, and T-UI-Plus resolvers.

```shell
pnpm install -D unplugin-vue-components unplugin-auto-import @t-ui-plus/resolver
```

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

### Install T-UI-Plus with Package Managers

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/guide/installation.md

Install the @wocwin/t-ui-plus library using your preferred package manager. This is the recommended method for most projects.

```sh
pnpm install @wocwin/t-ui-plus -S
```

```sh
yarn add @wocwin/t-ui-plus
```

```sh
npm install @wocwin/t-ui-plus    -S
```

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

### Automatic Imports: Vite Configuration

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/guide/quickstart.md

Configure Vite's build process to automatically import components and APIs from Element-Plus and T-UI-Plus using unplugin-vue-components and unplugin-auto-import.

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { TuiPlusResolver } from '@t-ui-plus/resolver'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver(), TuiPlusResolver()]
    })
  ]
})
```

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

### Automatic Imports: Webpack Configuration

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/guide/quickstart.md

Configure Webpack's build process to automatically import components and APIs from Element-Plus and T-UI-Plus using unplugin-vue-components and unplugin-auto-import.

```javascript
// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
const { TuiPlusResolver } = require('@t-ui-plus/resolver')

module.exports = {
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [TuiPlusResolver(), ElementPlusResolver()]
    })
  ]
}
```

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

### Vue TSConfig: Enable Global Component Type Support

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/guide/quickstart.md

Configure your tsconfig.json file to enable Volar's support for global component types provided by T-UI-Plus.

```json
{
  "compilerOptions": {
    // ...
    "types": ["@wocwin/t-ui-plus/index.d.ts"]
  }
}
```

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

### Run Local VitePress Component Documentation

Source: https://github.com/wocwin/t-ui-plus/blob/master/README.md

Starts the local development server for the documentation website, which is built with Vue 3 and Vite.

```shell
// docs项目(文档demo示例)基于vue3+vite项目
npm run docs:dev

```

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

### TModuleForm - Detail Examples

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TModuleForm/base.md

Illustrates various detail view functionalities and configurations within TModuleForm.

```APIDOC
## TModuleForm - Detail Examples

### Basic Detail Usage
Demonstrates the fundamental setup for displaying details.

### Detail Span Setting
Shows how to configure the span for detail items, affecting layout.

### Detail Tooltip
Illustrates adding tooltips to detail items for additional information.

### Module Slot Usage
Covers using slots for custom content within detail modules.

### Value Slot Usage
Shows how to use slots to customize the display of specific detail values.

### Module Collapse Disabled
Example of disabling the collapse functionality for detail modules.

### Module Title Right Slot Usage
Usage of the `detailTitleBtn` slot for content to the right of the detail module title.
```

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

### TModuleForm - Form Examples

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TModuleForm/base.md

Illustrates various form-related functionalities and configurations within TModuleForm.

```APIDOC
## TModuleForm - Form Examples

### Basic Form Usage
Demonstrates the fundamental form setup.

### Form Slot Usage
Shows how to integrate custom slots within the form.

### Form Expansion State
Illustrates controlling whether the form module is expanded or collapsed.

### Form Alignment
Details on configuring label alignment within the form.

### Form Validation
Covers setting up and managing form validation rules.

### Validation Error Messages
Explains how to display and customize validation error messages.

### Custom Footer Buttons
Provides examples of creating custom buttons in the form's footer.

### Displaying Tabs
Shows how to display tabs, specifically noting their appearance in the last module and the `isTabMargin` prop for separation.

### Custom Return Event
Demonstrates how to implement custom logic for the back event (`isGoBackEvent`).

### No Back Icon
Example of hiding the back icon in the header (`isShowBack`).

### Title Right Slot Usage
Usage of the `extra` slot for content to the right of the title.

### Module Title Right Slot Usage
Usage of the `titleBtn` slot for content to the right of the module title.

### Hide Header
Example of hiding the entire header section using the `isShowHeader` prop.
```

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

### Automatic Imports: Vue CLI Configuration

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/guide/quickstart.md

Configure Vue CLI's build process (vue.config.js) to automatically import components and APIs from Element-Plus and T-UI-Plus using unplugin-vue-components and unplugin-auto-import.

```javascript
// vue.config.js
const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
const { TuiPlusResolver } = require('@t-ui-plus/resolver')

module.exports = defineConfig({
  // ...
  configureWebpack: {
    plugins: [
      // ...
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [TuiPlusResolver(), ElementPlusResolver()]
      })
    ]
  }
})
```

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

### Install @t-ui-plus/resolver using pnpm

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/guide/resolver.md

This command installs the @t-ui-plus/resolver package using the pnpm package manager. It is a prerequisite for integrating t-ui-plus components into your project.

```shell
pnpm i @t-ui-plus/resolver
```

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

### Include T-UI-Plus via unpkg CDN

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/guide/installation.md

Directly import T-UI-Plus and its dependencies (Vue 3, Element Plus) into your HTML file using the unpkg CDN. This makes the library available globally as `TuiPlus`.

```html
<head>
  <!-- 导入element-plus样式 -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <!-- 导入vue3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- 导入element-plus -->
  <script src="//unpkg.com/element-plus"></script>

  <!-- 导入t-ui-plus样式 -->
  <link rel="stylesheet" href="//unpkg.com/@wocwin/t-ui-plus/index.css" />
  <!--导入t-ui-plus"  -->
  <script src="//unpkg.com/@wocwin/t-ui-plus"></script>
</head>
```

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

### Install Dependencies with pnpm

Source: https://github.com/wocwin/t-ui-plus/blob/master/README.md

Installs project dependencies globally and for the current project using pnpm. Requires Node.js 18.x+ and pnpm 7.x+.

```shell
npm install -g pnpm

# 安装依赖
pnpm install --registry=https://registry.npmjs.org/
>pnpm config get registry 查看当前指向源

# 如果安装依赖失败，可以尝试使用淘宝镜像  --registry=https://registry.npmmirror.com/
>pnpm config set registry https://registry.npmmirror.com/ 切换淘宝镜像源
>pnpm install

```

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

### Include T-UI-Plus via jsDelivr CDN

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/guide/installation.md

Directly import T-UI-Plus and its dependencies (Vue 3, Element Plus) into your HTML file using the jsDelivr CDN. This makes the library available globally as `TuiPlus`.

```html
<head>
  <!-- 导入element-plus样式 -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css" />
  <!-- 导入vue3 -->
  <script src="//cdn.jsdelivr.net/npm/vue@3"></script>
  <!-- 导入element-plus -->
  <script src="//cdn.jsdelivr.net/npm/element-plus"></script>

  <!-- 导入t-ui-plus样式 -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@wocwin/t-ui-plus/index.css" />
  <!--导入t-ui-plus"  -->
  <script src="//cdn.jsdelivr.net/npm/@wocwin/t-ui-plus"></script>
</head>
```

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

### On-Demand Import: CSS and Component Usage

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/guide/quickstart.md

This snippet shows how to import T-UI-Plus CSS globally and how to import specific components (TDetail, TForm) within a single Vue component's script section.

```javascript
// 在main.js中按下引入
import '@wocwin/t-ui-plus/index.css'
// 单个.vue文件引入
<script setup lang="ts">
  import {TDetail, TForm} from "@wocwin/t-ui-plus"
</script>
```

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

### TQueryCondition Basic Usage Example

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TQueryCondition/base.md

Demonstrates the fundamental implementation of the TQueryCondition component.

```html
<t-query-condition
  :opts="opts"
  @submit="conditionEnter"
  @handleEvent="handleEvent"
  :loading="loading"
/>
```

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

### Global Usage: Register T-UI-Plus and Element-Plus in Vue

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/guide/quickstart.md

This code snippet demonstrates how to globally register the T-UI-Plus component library and Element-Plus, including icons and locale settings, in a Vue.js application's main entry file (main.ts).

```javascript
import { createApp } from "vue"
import App from "./App.vue"
import ElementPlus from "element-plus"
import "element-plus/dist/index.css"
import "element-plus/theme-chalk/dark/css-vars.css"
import locale from "element-plus/es/locale/lang/zh-cn"
// element-plus图标
import * as ElementPlusIconsVue from "@element-plus/icons-vue"
import TuiPlus from "@wocwin/t-ui-plus"
import "@wocwin/t-ui-plus/index.css"
const app = createApp(App)
// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
// 注册ElementPlus
app.use(ElementPlus, {
  locale // 语言设置
  // size: Cookies.get('size') || 'medium' // 尺寸设置
})
app.use(TuiPlus)
app.mount("#app")
```

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

### TQueryCondition Tsx Usage Example

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TQueryCondition/base.md

Provides an example of using the TQueryCondition component with Tsx syntax, specifically demonstrating label rendering.

```html
<!-- TQueryCondition/labelRender -->
```

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

### TQueryCondition Get Ref for Single Option

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TQueryCondition/base.md

Explains how to obtain the ref for a specific option within `opts` using the `getRefs` event. Also covers resetting values via `handleEvent` and directly manipulating `queryState`.

```javascript
// TQueryCondition/getRefs
// 1. Obtain the ref set for an option in opts through the getRefs event;
// 2. Reset method (call handleEvent): handleEventChangeRef.value.handleEvent({isChange:true, val: "" }, "workshopNum")
// 3. Obtain the queryState through the ref of TQueryCondition and assign null to the value you need to reset.
```

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

### Configure Vite for T-UI-Plus AutoImport and Components

Source: https://github.com/wocwin/t-ui-plus/blob/master/README.md

Configures Vite to automatically import Element Plus and T-UI Plus components and resolvers. Ensure Vite and related plugins are installed.

```typescript
  // vite.config.ts
  import { defineConfig } from 'vite'
  import AutoImport from 'unplugin-auto-import/vite'
  import Components from 'unplugin-vue-components/vite'
  import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  import { TuiPlusResolver } from '@t-ui-plus/resolver'

  export default defineConfig({
    // ...
    plugins: [
      // ...
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver(), TuiPlusResolver()]
      })
    ]
  })
```

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

### Configure Vue CLI for T-UI-Plus AutoImport and Components

Source: https://github.com/wocwin/t-ui-plus/blob/master/README.md

Configures Vue CLI (webpack) to automatically import Element Plus and T-UI Plus components and resolvers. Ensure Vue CLI and related plugins are installed.

```javascript
const { defineConfig } = require('@vue/cli-service')
  const AutoImport = require('unplugin-auto-import/webpack')
  const Components = require('unplugin-vue-components/webpack')
  const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
  const { TuiPlusResolver } = require('@t-ui-plus/resolver')

  module.exports = defineConfig({
    // ...
    configureWebpack: {
      plugins: [
        // ...
        AutoImport({
          resolvers: [ElementPlusResolver()]
        }),
        Components({
          resolvers: [TuiPlusResolver(), ElementPlusResolver()]
        })
      ]
    }
  })
```

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

### TStepWizard - Base Usage

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TStepWizard/base.md

Demonstrates the fundamental usage of the TStepWizard component.

```APIDOC
## TStepWizard - Base Usage

### Description
This section showcases the basic implementation of the TStepWizard component.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Request Body
- **stepData** (Array) - Required - Array of step objects for configuration.
- **active** (Number) - Optional - The currently active step index. Defaults to 0.
- **successTitle** (String) - Optional - The title displayed upon successful completion of the last step.

### Request Example
```html
<t-step-wizard
  :stepData="stepData"
  :active="active"
  :successTitle="successTitle"
  @complete="complete"
>
  <template #first>First Step</template>
  <!-- ... other steps -->
</t-step-wizard>
```

### Response
#### Success Response (200)
N/A (Component Behavior)

#### Response Example
N/A (Component Behavior)
```

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

### TQueryCondition - Basic Usage

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TQueryCondition/base.md

Demonstrates the fundamental usage of the TQueryCondition component.

```APIDOC
## TQueryCondition - Basic Usage

### Description
This section covers the basic setup and usage of the TQueryCondition component.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```html
<t-query-condition>
  <!-- Component content -->
</t-query-condition>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A (Component Usage)
```

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

### TStepWizard - Parameters

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TStepWizard/base.md

Detailed configuration parameters for the TStepWizard component, inheriting from Element Plus el-steps and el-step.

```APIDOC
## TStepWizard - Configuration Parameters

### Description
This section details the configurable parameters for the TStepWizard component, including its own properties and those inherited from Element Plus's el-steps and el-step.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Request Body
- **stepData** (Array) - Required - Data source for the steps.
  - **id** (Number) - Required - Unique identifier for the step.
  - **title** (String) - Required - Text displayed for the step title.
  - **slotName** (String) - Optional - Name of the scoped slot for each step.
  - **icon** (String) - Optional - Icon to display for the step (uses Element Plus built-in icons).
  - **description** (String) - Optional - Description text for the step.
  - **btnArr** (Array) - Optional - Array of buttons for the current step.
    - **btnTitle** (String) - Required - Text displayed on the button.
    - **params** (String/Number) - Optional - Parameters to pass with the button click.
    - **fn** (function) - Required - The function to execute when the button is clicked.
  - **isShowLastSuccess** (Boolean) - Optional - Whether to show the default icon on the last step. Defaults to `true`.
  - **active** (Number) - Optional - Sets the currently active step. Defaults to `0`.
  - **lastBtnArr** (Array) - Optional - Array of buttons for the final step if multiple are needed. If not provided, a single 'Complete' button is shown.
    - **btnTitle** (String) - Required - Text displayed on the button.
    - **params** (String/Number) - Optional - Parameters to pass with the button click.
    - **fn** (function) - Required - The function to execute when the button is clicked.
  - **lastBtnTitle** (String) - Optional - The text for the completion button on the final step. Defaults to '完成'.
  - **successTitle** (String) - Optional - The success message displayed on the final step.
```

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

### Basic Usage of TInput

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TInput/base.md

Demonstrates the fundamental usage of the TInput component for general text input.

```html
<t-input v-model="inputVlaue" />
```

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

### TQueryCondition - Dropdown for More Options

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TQueryCondition/base.md

Demonstrates how to enable a dropdown to display more query conditions using `isDropDownSelectMore` and `popoverAttrs`.

```APIDOC
## TQueryCondition - Dropdown for More Options

### Description
Enable a dropdown menu to display additional query conditions by setting `isDropDownSelectMore` to `true`. The `popoverAttrs` prop allows customization of the dropdown's appearance and behavior.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```html
<t-query-condition :isDropDownSelectMore="true" :popoverAttrs="{ title: 'Advanced Filters' }">
  <!-- Component content -->
</t-query-condition>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A (Component Usage)
```

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

### Configure Vite with TuiPlusResolver

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/guide/resolver.md

This TypeScript code snippet demonstrates how to configure Vite for automatic component imports using the TuiPlusResolver. It shows the necessary imports and the plugin configuration within vite.config.ts. The `importStyle` option can be set to 'css' or 'scss'.

```typescript
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'

import { TuiPlusResolver } from '@t-ui-plus/resolver'

export default defineConfig({
  // ...
  plugins: [
    Components({
      resolvers: [TuiPlusResolver({ importStyle: 'css' })]
    })
  ]
})
```

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

### Amount Input with Chinese Tip

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TInput/base.md

Illustrates enabling a Chinese tooltip for amount inputs. Note that `isTip` cannot be used concurrently with `showThousands`.

```html
<t-input inputType="amount" isTip />
```

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

### TModuleForm - Basic Usage

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TModuleForm/base.md

Demonstrates the fundamental usage of the TModuleForm component for both form editing and detail viewing.

```APIDOC
## TModuleForm - Basic Usage

### Description
This section covers the basic implementation of the TModuleForm component, showcasing its dual capabilities for form editing and detail display.

### Usage Examples

**Form Mode:**
```html
<t-module-form title="模块表单组件运用" ref="sourceForm" :formOpts="formOpts" :submit="submit" />
```

**Detail Mode:**
```html
<t-module-form title="模块详情组件运用" ref="sourceDetail" handleType="desc" :descData="descData" />
```

### Attributes Inherited
This component inherits attributes from `t-form` and `t-detail`.
```

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

### TTable: Basic Usage

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TTable/base.md

Demonstrates the fundamental usage of the TTable component for displaying data. No specific dependencies are required beyond the TTable component itself.

```vue
<!-- TTable/base -->
<template>
  <t-table :data="tableData">
    <t-table-column v-for="(col, index) in columns" :key="index" :prop="col.prop" :label="col.label"></t-table-column>
  </t-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const tableData = ref([
  { id: 1, name: 'John Doe', age: 30 },
  { id: 2, name: 'Jane Smith', age: 25 },
]);

const columns = ref([
  { prop: 'id', label: 'ID' },
  { prop: 'name', label: 'Name' },
  { prop: 'age', label: 'Age' },
]);
</script>
```

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

### Slot Usage in TInput

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TInput/base.md

Explains how to utilize slots within the TInput component, mirroring the slot usage patterns found in `el-input`.

```html
<t-input>
  <template #prefix>Icon</template>
  <template #suffix>Unit</template>
</t-input>
```

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

### TQueryCondition - Integration with Custom Components

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TQueryCondition/base.md

Shows how to use TQueryCondition in conjunction with custom-built components.

```APIDOC
## TQueryCondition - Integration with Custom Components

### Description
Illustrates the process of integrating the TQueryCondition component with your own custom-developed components.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```html
<t-query-condition>
  <!-- Usage with custom components -->
</t-query-condition>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A (Component Usage)
```

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

### Custom Input Formatting and Parsing

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TInput/base.md

Demonstrates using `formatter` to display input values in a specific format, often used in conjunction with `parser`.

```html
<t-input :formatter="customFormatter" :parser="customParser" />
```

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

### TStepWizard - Simplified Style

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TStepWizard/base.md

Shows how to apply a concise style to the TStepWizard component, disabling certain layout options.

```APIDOC
## TStepWizard - Simplified Style

### Description
Enables a simplified, clean style for the TStepWizard. Note that `align-center`, `description`, `direction`, and `space` props will be ignored when this style is active.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Request Body
- **simple** (Boolean) - Optional - Enables the simplified style. If true, other layout props are ignored.

### Request Example
```html
<t-step-wizard
  :stepData="stepData"
  simple
>
  <!-- ... -->
</t-step-wizard>
```

### Response
#### Success Response (200)
N/A (Component Behavior)

#### Response Example
N/A (Component Behavior)
```

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

### TQueryCondition Show More Conditions as Dropdown

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TQueryCondition/base.md

Demonstrates enabling the dropdown mode for showing more conditions in TQueryCondition using `isDropDownSelectMore`. Includes default `popoverAttrs` configuration.

```html
<!-- TQueryCondition/isDropDownSelectMore -->
```

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

### TStepWizard 基础用法示例

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TStepWizard/base.md

展示了 TStepWizard 组件的基础用法，通过 `:stepData` 和 `:active` 属性绑定数据和当前激活步骤，并提供了默认的插槽内容。

```html
<t-step-wizard
  :stepData="stepData"
  :active="active"
  :successTitle="successTitle"
  @complete="complete"
>
  <template #first>第一步骤</template>
  .....
</t-step-wizard>
```

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

### TQueryCondition - Expansion and Collapse

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TQueryCondition/base.md

Explains how to control the expansion and collapse behavior of the query conditions, including default expansion.

```APIDOC
## TQueryCondition - Expansion and Collapse

### Description
Control the expansion and collapse state of the query conditions. The `isExpansion` prop can be used to set the default expansion state.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```html
<t-query-condition :isExpansion="true">
  <!-- Component content -->
</t-query-condition>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A (Component Usage)
```

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

### T-UI Plus Component Properties

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TSelectTable/base.md

Configuration properties for the T-UI Plus component, including remote search, loading states, and more.

```APIDOC
## T-UI Plus Component Properties

### Description
Properties that can be configured for the T-UI Plus component.

### Properties

#### Boolean Properties
- **remote** (Boolean) - Optional - Whether to enable remote search. Defaults to `false`.
- **tableLoading** (Boolean) - Optional - Controls the loading state of the table. Defaults to `false`.

#### String Properties
- **loadingText** (String) - Optional - Text displayed when the table is loading. Defaults to `'加载中...'`.

#### Function Properties
- **remoteMethod** (Function) - Optional - Custom function for remote search. It receives the search input value as an argument.
```

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

### TQueryCondition Button Operation Usage

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TQueryCondition/base.md

Illustrates the usage of buttons within the TQueryCondition component for query operations.

```html
<!-- TQueryCondition/querybar -->
```

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

### Integer Input

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TInput/base.md

Sets up the TInput component for entering whole numbers only.

```html
<t-input inputType="integer" />
```

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

### TQueryCondition Usage with Custom Encapsulated Components

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TQueryCondition/base.md

Shows how to use the TQueryCondition component in conjunction with custom encapsulated components.

```html
<!-- TQueryCondition/comUse -->
```

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

### TQueryCondition Collapse/Expand - Default Expanded

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TQueryCondition/base.md

Shows how to set the TQueryCondition component to be expanded by default using the `isExpansion` prop.

```html
<!-- TQueryCondition/isExpansion -->
```

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

### TQueryCondition - Items Per Row Configuration

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TQueryCondition/base.md

Explains how to control the number of items displayed per row, including dynamic adjustments based on window width.

```APIDOC
## TQueryCondition - Items Per Row Configuration

### Description
Configure the number of items displayed per row. With `isShowWidthSize` enabled, `widthSize` dictates the count. If disabled, the component adjusts based on predefined window width breakpoints.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```html
<!-- Fixed 3 items per row -->
<t-query-condition :widthSize="3" :isShowWidthSize="true">
  <!-- Component content -->
</t-query-condition>

<!-- Dynamic adjustment based on width -->
<t-query-condition :isShowWidthSize="true">
  <!-- Component content -->
</t-query-condition>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A (Component Usage)
```

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

### Decimal Input with Formatting

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TInput/base.md

Enables TInput for decimal numbers, with options to set the number of decimal places.

```html
<!-- Decimal input with default 2 decimal places -->
<t-input inputType="decimal" />

<!-- Decimal input with custom decimal places -->
<t-input inputType="decimal" decimalLimit="4" />
```

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

### Textarea Input

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TInput/base.md

Shows how to use TInput as a textarea, with control over the number of rows to adjust its height.

```html
<t-input type="textarea" :rows="4" />
```

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

### Amount Input with Formatting

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TInput/base.md

Shows how to configure TInput for monetary values, including optional thousand separators and custom decimal limits. When `showThousands` is enabled, `type` must be 'text'.

```html
<!-- Basic amount input -->
<t-input inputType="amount" />

<!-- Amount input with thousand separators and 2 decimal places -->
<t-input inputType="amount" showThousands decimalLimit="2" type="text" />

<!-- Amount input with custom decimal places -->
<t-input inputType="amount" decimalLimit="4" />
```

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

### TQueryCondition Linked Usage with Third-Party Component Events

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TQueryCondition/base.md

Explains how to integrate TQueryCondition with third-party components by handling events for linked functionality.

```html
<!-- TQueryCondition/eventHandle -->
```

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

### Compound Input with Slots

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TInput/base.md

Illustrates creating a compound input field by using prepend and append slots to add elements before or after the input.

```html
<t-input>
  <template #prepend>Prefix</template>
  <template #append>Suffix</template>
</t-input>
```

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

### Input Size Adjustment

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TInput/base.md

Demonstrates how to control the visual size of the TInput component using the `size` attribute, which accepts 'medium', 'small', or 'mini'.

```html
<t-input size="medium" />
<t-input size="small" />
<t-input size="mini" />
```

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

### TQueryCondition Attributes

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TQueryCondition/base.md

Provides a detailed list of all configurable attributes (props) for the TQueryCondition component.

```APIDOC
## TQueryCondition Attributes

### Description
This section lists and describes all available attributes (props) for configuring the TQueryCondition component.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Attributes Table

| Parameter | Description | Type | Default Value |
|---|---|---|---|
| opts | Receives filter component configuration | object | N/A |
| loading | Query button loading state, required for displaying data requests | Boolean | false |
| reset | Whether to display the "Reset" button | Boolean | true |
| maxVisibleRows | Set the default number of rows to display when collapsed | Number | 1 |
| boolEnter | Whether to trigger query by pressing Enter key | Boolean | true |
| isShowOpen | Whether to display "Collapse" and "Expand" buttons | Boolean | true |
| packUpTxt | Text for the "Collapse" button | String | '收起' |
| unfoldTxt | Text for the "Expand" button | String | '展开' |
| isExpansion | Whether to expand by default | Boolean | false |
| labelWidth | Width of the label for form items | String | '120px' |
| btnCheckBind | Query button configuration (inherits all `el-button` properties) | object | `{type: primary, size: default, btnTxt:'查询'}` |
| btnResetBind | Reset button configuration (inherits all `el-button` properties) | object | `{size: default, btnTxt:'重置'}` |
| isFooter | Custom buttons (set `:isFooter="false"` to hide buttons) | Boolean | true |
| configChangedReset | Whether to reset when `opts` changes (defaults to reset) | Boolean | false |
| isShowWidthSize | Whether to enable dynamic adjustment of items per row | Boolean | false |
| widthSize | Number of items to display per row, minimum value is 2 | Number | 4 |
| isDropDownSelectMore | Whether to display more conditions in a dropdown format | Boolean | false |

### Response
N/A (Component Usage)

#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A (Component Usage)
```

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

### TForm Basic Usage

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TForm/base.md

Demonstrates the basic integration and usage of the TForm component in a Vue.js application. It uses v-model for data binding and passes form configurations via the 'formOpts' prop.

```html
<t-form v-model="formOpts.ref" :formOpts="formOpts" :widthSize="2" @handleEvent="handleEvent" />
```

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

### TQueryCondition - Linked Usage (Third-Party Component Events)

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TQueryCondition/base.md

Explains how to integrate TQueryCondition with third-party components by handling events.

```APIDOC
## TQueryCondition - Linked Usage (Third-Party Component Events)

### Description
This section details how to achieve linked behavior with TQueryCondition by leveraging events from third-party components.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```html
<t-query-condition @handleEvent="handleEvent">
  <!-- Component content -->
</t-query-condition>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A (Component Usage)
```

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

### TQueryCondition - Accessing `opts` Item Refs (v1.5.1+)

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TQueryCondition/base.md

Details how to access the refs of individual `opts` items and how to reset them, introduced in v1.5.1.

```APIDOC
## TQueryCondition - Accessing `opts` Item Refs (v1.5.1+)

### Description
Access the `ref` of a specific `opts` item using the `getRefs` event. To reset a value, use `handleEvent` or directly modify the `queryState` via the component's ref.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```html
<template>
  <t-query-condition ref="queryConditionRef" @getRefs="getOptsRefs" />
  <el-button @click="resetWorkshopNum">Reset Workshop</el-button>
</template>

<script>
export default {
  data() {
    return {
      workshopNumRef: null
    }
  },
  methods: {
    getOptsRefs(refs) {
      this.workshopNumRef = refs.workshopNum;
    },
    resetWorkshopNum() {
      // Method 1: Using handleEvent
      this.$refs.queryConditionRef.handleEvent({ isChange: true, val: '' }, 'workshopNum');

      // Method 2: Direct state manipulation (use with caution)
      // if (this.workshopNumRef) {
      //   this.workshopNumRef.reset(); // Assuming a reset method exists on the ref
      // }
      // Or directly setting queryState
      // const queryState = this.$refs.queryConditionRef.queryState;
      // queryState.workshopNum = null;
    }
  }
}
</script>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A (Component Usage)
```

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

### TModuleForm - Attributes

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TModuleForm/base.md

Detailed explanation of the configurable attributes for the TModuleForm component.

```APIDOC
## TModuleForm - Attributes

### 1. Overview
TModuleForm is a component that further encapsulates the TForm and TDetail components, enabling modular display (collapsible) of form or detail pages.

### 2. Configuration Parameters (Attributes)
All attributes are inherited from `t-form` and `t-detail`.

| Parameter           | Description                                                                                                  | Type           | Default Value | 
| :------------------ | :----------------------------------------------------------------------------------------------------------- | :------------- | :------------ | 
| title               | Title for the header back button.                                                                            | string         | None          | 
| titleSlot           | Whether to use a slot for displaying the title.                                                              | Boolean        | false         | 
| subTitle            | Subtitle for the header.                                                                                     | string         | None          | 
| extra               | Operation area, located at the end of the title row (right side).                                            | slot           | None          | 
| footer              | Operation area at the bottom (default displays 'Cancel'/'Save' buttons; slots are rendered first). Set `:footer="null"` to hide the bottom operation. | String/slot    | None          | 
| isShowHeader        | Hides the header.                                                                                            | Boolean        | false         | 
| isTabMargin         | Whether tabs are separated from the module.                                                                  | Boolean        | false         | 
| tabMarginNum        | Distance for separating tabs from the module.                                                                | Number         | 10            | 
| tabs                | Whether the page needs tabs (and the tab key is a slot). Displayed only in the last module.                | Array          | None          | 
| btnCancelBind       | Cancel button configuration (inherits all `el-button` properties).                                           | object         | `{btnTxt:'Cancel'}` | 
| btnSaveBind         | Save button configuration (inherits all `el-button` properties).                                             | object         | `{type: primary, btnTxt:'Save'}` | 
| titleBold           | Whether the module title text is bold.                                                                       | Boolean        | false         | 
| isShowBack          | Header does not display the back icon.                                                                       | Boolean        | false         | 
| isGoBackEvent       | Clicking the header back (defaults to returning to the previous page; setting this value allows custom back events). | Boolean        | false         | 
| handleType          | Display mode ('edit': form operation, 'desc': detail page).                                                 | string         | edit          | 
| **edit** (handleType=edit) | Attributes for form operation in `handleType=edit` mode.                                                     | -              | -             | 
| formOpts            | Form configuration description, supports multi-group forms.                                                  | Object         | None          | 
| submit              | Returns all form data upon clicking save (data format is promise and can display loading status).            | function       | All form data | 
| **desc** (handleType=desc) | Attributes for detail page in `handleType=desc` mode.                                                      | -              | -             | 
| descColumn          | Number of columns displayed per row in the detail page (effective when `handleType=desc`).                   | Number         | 4             | 
| descData            | Detail page configuration description, supports multi-group details (effective when `handleType=desc`).      | Object         | None          | 

```

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

### TQueryCondition Items Per Row Configuration

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TQueryCondition/base.md

Explains how to configure the number of items displayed per row in TQueryCondition. Enabling `isShowWidthSize` uses `widthSize`. Without it, the display adjusts based on window width.

```html
<!-- TQueryCondition/widthSize -->
```

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

### TQueryCondition - TSX Usage

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TQueryCondition/base.md

Illustrates how to use the TQueryCondition component with TSX syntax.

```APIDOC
## TQueryCondition - TSX Usage

### Description
Provides an example of using the TQueryCondition component with TSX, potentially for custom rendering logic.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```html
// Example in TSX
<t-query-condition>
  // ... TSX specific content
</t-query-condition>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A (Component Usage)
```

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

### TQueryCondition - Custom Action Buttons

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TQueryCondition/base.md

Explains how to define custom action buttons using the `footerBtn` slot, disabling the default expansion functionality.

```APIDOC
## TQueryCondition - Custom Action Buttons

### Description
Customize the footer buttons by using the `footerBtn` slot. This also allows disabling the default "collapse and expand" functionality.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```html
<t-query-condition>
  <template #footerBtn>
    <el-button type="primary">Custom Action</el-button>
  </template>
</t-query-condition>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A (Component Usage)
```

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

### TQueryCondition - Dynamic Value Update with handleEvent

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TQueryCondition/base.md

Explains how to dynamically modify query condition values using the `handleEvent` method, introduced in v1.4.13.

```APIDOC
## TQueryCondition - Dynamic Value Update with handleEvent (v1.4.13+)

### Description
Dynamically update query condition values using the `handleEvent` method. Call `handleEventChangeRef.value.handleEvent({ isChange: true, val: 'new_value' }, 'field_name')` to modify a specific condition.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```html
<template>
  <t-query-condition ref="queryConditionRef" />
  <el-button @click="updateCondition">Update Condition</el-button>
</template>

<script>
export default {
  methods: {
    updateCondition() {
      const queryConditionRef = this.$refs.queryConditionRef;
      queryConditionRef.handleEvent({ isChange: true, val: 'W1' }, 'workshopNum');
    }
  }
}
</script>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A (Component Usage)
```

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

### TStepWizard - Vertical Layout

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TStepWizard/base.md

Illustrates how to configure the TStepWizard component for a vertical layout.

```APIDOC
## TStepWizard - Vertical Layout

### Description
This section demonstrates how to render the TStepWizard component in a vertical orientation.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
(Inherits parameters from Base Usage. Specific vertical configuration might be a prop or CSS class, not detailed here.)

### Request Example
```html
<t-step-wizard
  :stepData="stepData"
  direction="vertical"
>
  <!-- ... -->
</t-step-wizard>
```

### Response
#### Success Response (200)
N/A (Component Behavior)

#### Response Example
N/A (Component Behavior)
```

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

### TQueryCondition Dynamic Add/Remove Query Conditions

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TQueryCondition/base.md

Illustrates how to dynamically add and remove query condition items within the TQueryCondition component.

```html
<!-- TQueryCondition/dynamic -->
```

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

### TModuleForm 基本表单和详情使用

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TModuleForm/base.md

展示 TModuleForm 组件作为表单或详情页面的基本用法。适用于需要分模块展示表单数据或详情信息的场景。

```html
<!-- 第一种 表单形式 -->
<t-module-form title="模块表单组件运用" ref="sourceForm" :formOpts="formOpts" :submit="submit" />
<!-- 第二种详情展示 根据handleType-->
<t-module-form title="模块详情组件运用" ref="sourceDetail" handleType="desc" :descData="descData" />
```

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

### TQueryCondition - Button Operation Usage

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TQueryCondition/base.md

Describes how to utilize the button operations within the TQueryCondition component, such as query and reset buttons.

```APIDOC
## TQueryCondition - Button Operation Usage

### Description
This section covers the usage of the built-in button operations in TQueryCondition, including query and reset functionality.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```html
<t-query-condition @submit="onSubmit" @reset="onReset">
  <!-- Component content -->
</t-query-condition>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A (Component Usage)
```

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

### TStepWizard - Events

Source: https://github.com/wocwin/t-ui-plus/blob/master/docs/components/TStepWizard/base.md

Details the events emitted by the TStepWizard component.

```APIDOC
## TStepWizard - Events

### Description
This section describes the events that can be listened to from the TStepWizard component.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Events
- **complete**
  - **Description**: Emitted when the button on the last step is clicked.
  - **Returns**: The value of the current step.
```
Tokens:
Raw