Tui Plus Vapor

https://yundie.xyz/tuiplusvapor/
Admin
Tui Plus Vapor is a modern, high-performance UI component library tailored for UniApp X, featuring...
Tokens:18,704
Snippets:282
Trust Score:4
Update:1 month ago
Show doc for...
Tokens:
Raw
### Touchstart Event

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Example of attaching a touchstart event listener.

```typescript
element.addEventListener("touchstart", (event: ITuiTouchEvent) => {
  console.log("触摸开始", event.clientX, event.clientY);
});
```

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

### Get Bounding Client Rect

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Method signature and usage for retrieving element dimensions and position.

```typescript
getBoundingClientRect() : TuiDOMRect
```

```typescript
const rect = element.getBoundingClientRect();
console.log("元素位置:", rect.x, rect.y);
console.log("元素尺寸:", rect.width, rect.height);
```

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

### Get element by ID

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Retrieves an element instance from the engine by its unique ID.

```ts
const element = engine.getElementById("my-element");
if (element != null) {
  element.style.backgroundColor = "#ff0000";
}
```

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

### Initialize basic layout

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Demonstrates creating a root container, adding text and buttons, and rendering the element tree.

```typescript
import { TuiEngine } from "@/uni_modules/tui-entine";
import { ITuiEngine } from "@/uni_modules/tui-entine/types";

let eng: ITuiEngine | null = null;

function initFinished(engine: ITuiEngine) {
  eng = engine;

  // 创建根容器
  const root = engine.createView();
  root.style.width = engine.width;
  root.style.height = engine.height;
  root.style.backgroundColor = "#ffffff";
  root.style.padding = 20;

  // 创建标题
  const title = engine.createText();
  title.value = "欢迎使用 tui-entine";
  title.style.fontSize = 24;
  title.style.color = "#333333";
  title.style.marginBottom = 20;

  // 创建内容容器
  const content = engine.createView();
  content.style.flexDirection = "column";
  content.style.flex = 1;

  // 创建按钮
  const button = engine.createButton();
  button.value = "点击我";
  button.style.width = 200;
  button.style.height = 44;
  button.style.backgroundColor = "#2979ff";
  button.style.color = "#ffffff";
  button.style.borderRadius = 8;
  button.style.marginTop = 20;

  // 添加点击事件
  button.addEventListener("click", (event) => {
    console.log("按钮被点击");
  });

  // 组装元素树
  content.appendChild(title, button);
  root.appendChild(content);

  // 绘制
  engine.draw(root, null);
}
```

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

### 引入编译产物

Source: https://yundie.xyz/tuiplusvapor/style/index.html

在 App.uvue 中引入生成的样式文件。

```scss
@import url("./uni_modules/tui-vitex/autocss.css");
```

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

### Create and configure a view element

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Creates a container node using createView and sets its basic layout and style properties.

```ts
const view = engine.createView();
view.style.width = 100;
view.style.height = 100;
view.style.backgroundColor = "#f0f0f0";
```

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

### Create and configure a button element

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Creates a button element using createButton and sets its text and style properties.

```ts
const button = engine.createButton();
button.value = "点击我";
button.style.width = 120;
button.style.height = 40;
button.style.backgroundColor = "#2979ff";
button.style.color = "#ffffff";
button.style.borderRadius = 8;
```

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

### Create and configure an image element

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Creates an image element using createImage and sets its source and load event handler.

```ts
const image = engine.createImage();
image.src = "/static/logo.png";
image.style.width = 100;
image.style.height = 100;
image.onload = (event) => {
  console.log("图片加载完成", event.detail.width, event.detail.height);
};
```

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

### 配置 AI 技能安装目录

Source: https://yundie.xyz/tuiplusvapor/guide/skills.html

将下载的技能文件夹放置到 HBuilder X AI 插件的指定配置路径中。

```text
%APPDATA%\HBuilder X\extensions\hbuilderx-ai-chat\uni-agent\config\skills\
```

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

### UI Rendering and Updates

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Core methods for creating UI components and updating their state in the engine.

```APIDOC
## engine.createView()
Creates a new container view element.

## engine.createText()
Creates a new text element.

## engine.createButton()
Creates a new button element.

## engine.draw(root, parent)
Initializes the rendering of the element tree.

## engine.updateElement(element, redraw)
Updates an existing element's properties. 
- **element** (ITuiElement) - The element to update.
- **redraw** (boolean) - Whether to trigger a full redraw.
```

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

### Initialize tui-entine in a Vue component

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Demonstrates the typical workflow of initializing the engine, creating a view and text element, and performing the initial draw within a t-canvas-engine component.

```vue
<template>
  <t-canvas-engine
    @initFinished="initFinished"
    @touchstart="touchstart"
    @touchmove="touchmove"
    @touchend="touchend"
  ></t-canvas-engine>
</template>

<script setup lang="uts">
import { TuiEngine } from "@/uni_modules/tui-entine";
import { ITuiEngine, ITuiElement } from "@/uni_modules/tui-entine/types";

let eng: ITuiEngine | null = null;

function initFinished(engine: ITuiEngine) {
  eng = engine;

  // 创建根容器
  const root = engine.createView();
  root.style.width = engine.width;
  root.style.height = engine.height;
  root.style.backgroundColor = "#ffffff";
  root.style.justifyContent = "center";
  root.style.alignItems = "center";

  // 创建文本元素
  const title = engine.createText();
  title.value = "Hello tui-entine";
  title.style.fontSize = 16;
  title.style.color = "#333333";

  // 组装元素树
  root.appendChild(title);

  // 绘制
  engine.draw(root, null);
}
</script>
```

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

### Create and configure a text element

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Creates a text element using createText and configures its content and appearance.

```ts
const text = engine.createText();
text.value = "Hello World";
text.style.fontSize = 16;
text.style.color = "#333333";
text.style.textAlign = "center";
```

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

### createButton

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Creates a new button element.

```APIDOC
## createButton()

### Description
Creates a new button element for user interaction.

### Signature
`createButton() : ITuiButton`

### Returns
- **ITuiButton** - The created button element instance.

### Properties
- **value** (string) - The button label text.
- **disabled** (boolean) - Whether the button is disabled.
- **loading** (boolean) - Whether the button is in a loading state.
```

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

### 删除 TuiPlus 技能文件夹

Source: https://yundie.xyz/tuiplusvapor/guide/skills.html

通过删除以下路径中的文件夹来卸载对应的 TuiPlus 技能。

```text
%APPDATA%\HBuilder X\extensions\hbuilderx-ai-chat\uni-agent\config\skills\tuiplus-ui\
%APPDATA%\HBuilder X\extensions\hbuilderx-ai-chat\uni-agent\config\skills\tuiplus-autocss\
%APPDATA%\HBuilder X\extensions\hbuilderx-ai-chat\uni-agent\config\skills\tuiplus-api\
%APPDATA%\HBuilder X\extensions\hbuilderx-ai-chat\uni-agent\config\skills\tuiplus-charts\
```

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

### Define Theme Variables

Source: https://yundie.xyz/tuiplusvapor/guide/index.html

Configure light and dark mode design tokens in theme.json to support the built-in theme system.

```json
{
  "light": {
    "primaryNormal": "#2979ff",
    "textPrimary": "#303133",
    "backgroundColor": "#ffffff"
  },
  "dark": {
    "primaryNormal": "#0000ff",
    "textPrimary": "#E5E5E5",
    "backgroundColor": "#1F1F1F"
  }
}
```

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

### 查看技能目录结构

Source: https://yundie.xyz/tuiplusvapor/guide/skills.html

展示安装后的技能文件在配置目录下的完整层级结构。

```text
%APPDATA%\HBuilder X\extensions\hbuilderx-ai-chat\uni-agent\config\skills\
├── tuiplus-ui\
│   └── SKILL.md
├── tuiplus-autocss\
│   ├── SKILL.md
│   └── docs\
│       ├── index.md
│       ├── theme.md
│       ├── uts.md
│       ├── flex.md
│       ├── size.md
│       ├── text.md
│       ├── background.md
│       ├── border.md
│       ├── animation.md
│       ├── position.md
│       ├── skin.md
│       └── other.md
├── tuiplus-api\
│   ├── SKILL.md
│   └── docs\
│       ├── intro.md
│       ├── crypto.md
│       ├── http.md
│       ├── store.md
│       ├── ocr.md
│       ├── pinyin.md
│       ├── tts.md
│       ├── sqlite.md
│       ├── animation.md
│       ├── color.md
│       ├── css.md
│       ├── debounce.md
│       ├── throttle.md
│       ├── random.md
│       ├── text.md
│       ├── time.md
│       ├── video-thumb.md
│       └── verify.md
└── tuiplus-charts\
    ├── SKILL.md
    └── docs\
        ├── index.md
        ├── opts.md
        ├── event.md
        ├── xAxis.md
        ├── yAxis.md
        ├── legend.md
        ├── title.md
        ├── tooltip.md
        ├── markLine.md
        ├── categories.md
        ├── demos\
        │   ├── arcbar.md
        │   ├── area.md
        │   ├── bar.md
        │   ├── bubble.md
        │   ├── candle.md
        │   ├── column.md
        │   ├── funnel.md
        │   ├── gauge.md
        │   ├── line.md
        │   ├── map.md
        │   ├── mix.md
        │   ├── mount.md
        │   ├── pie.md
        │   ├── radar.md
        │   ├── ring.md
        │   ├── rose.md
        │   ├── scatter.md
        │   └── word.md
        └── extra\
            ├── arcbar.md
            ├── area.md
            ├── bar.md
            ├── bubble.md
            ├── candle.md
            ├── column.md
            ├── funnel.md
            ├── gauge.md
            ├── line.md
            ├── map.md
            ├── mix.md
            ├── mount.md
            ├── pie.md
            ├── radar.md
            ├── ring.md
            ├── rose.md
            ├── scatter.md
            └── word.md
```

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

### Handle Touch Events

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Basic implementation for routing touch events to the engine.

```typescript
function touchstart(e: TuiTouchEvent) {
  engine.handleTouchEvent(e);
}

function touchmove(e: TuiTouchEvent) {
  engine.handleTouchEvent(e);
}

function touchend(e: TuiTouchEvent) {
  engine.handleTouchEvent(e);
}
```

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

### handleTouchEvent

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Processes touch events for the engine.

```APIDOC
## handleTouchEvent(e)

### Description
Processes incoming touch events to trigger interactions within the engine.

### Parameters
- **e** (TuiTouchEvent) - The touch event object.
```

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

### 组件开发最佳实践

Source: https://yundie.xyz/tuiplusvapor/style/index.html

使用 external-class 暴露样式扩展点，以适应严格的组件样式隔离。

```vue
<template>
  <view class="button" :class="[buttonClass]">
    <text :class="[textClass]">Hello VaporCSS</text>
  </view>
</template>

<script setup>
 defineOptions({
	styleIsolation: 'app-and-page',
	externalClasses: ['button-class', 'text-class'] // 暴露按钮样式扩展点 // 暴露文本样式扩展点
})
 const props = withDefaults(defineProps<>(), {
	 buttonClass: String,
     textClass: String
});
</script>

<style scoped>
.button {
  /* 基础样式 */
}
.text {
  /* 基础文本样式 */
}
</style>
```

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

### Size Styling

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Interface definition and usage for setting element size constraints.

```typescript
interface ITuiStyle {
  // 尺寸
  width?: number;
  height?: number;
  minWidth?: number;
  minHeight?: number;
  maxWidth?: number;
  maxHeight?: number;
}
```

```typescript
element.style.width = 100;
element.style.height = 50;
element.style.minWidth = 80;
element.style.maxWidth = 200;
```

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

### Event Handling

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Methods for attaching event listeners to elements to handle user interactions like touch and click.

```APIDOC
## element.addEventListener(type, listener)

### Description
Registers an event handler for specific interactions on an element.

### Supported Events
- **touchmove**: Triggered when the user moves their finger on the element.
- **touchend**: Triggered when the user lifts their finger from the element.
- **click**: Triggered when a short touch interaction occurs (duration < 300ms, movement < 10px).

### Parameters
- **type** (string) - Required - The event name ('touchmove', 'touchend', 'click').
- **listener** (function) - Required - Callback function receiving an ITuiTouchEvent object.
```

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

### Create complex layout

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Constructs a layout with a header and a dynamically generated list of cards.

```typescript
function createComplexLayout(engine: ITuiEngine) {
  const root = engine.createView();
  root.style.width = engine.width;
  root.style.height = engine.height;
  root.style.backgroundColor = "#f5f5f5";

  // 创建头部
  const header = engine.createView();
  header.style.height = 60;
  header.style.backgroundColor = "#2979ff";
  header.style.justifyContent = "center";
  header.style.alignItems = "center";

  const headerText = engine.createText();
  headerText.value = "标题";
  headerText.style.fontSize = 18;
  headerText.style.color = "#ffffff";

  header.appendChild(headerText);

  // 创建内容区
  const content = engine.createView();
  content.style.flex = 1;
  content.style.padding = 20;

  // 创建多个卡片
  for (let i = 0; i < 3; i++) {
    const card = engine.createView();
    card.style.backgroundColor = "#ffffff";
    card.style.borderRadius = 8;
    card.style.padding = 15;
    card.style.marginBottom = 15;

    const cardTitle = engine.createText();
    cardTitle.value = `卡片 ${i + 1}`;
    cardTitle.style.fontSize = 16;
    cardTitle.style.color = "#333333";
    cardTitle.style.marginBottom = 10;

    card.appendChild(cardTitle);
    content.appendChild(card);
  }

  // 组装元素树
  root.appendChild(header, content);

  // 绘制
  engine.draw(root, null);
}
```

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

### 手动控制 t-action-menu 显示

Source: https://yundie.xyz/tuiplusvapor/components/t-action-menu.html

通过 ref 获取组件实例并调用 show 方法，实现对菜单显示状态的程序化控制。

```vue
<template>
  <t-action-menu ref="actionMenuRef" title="请选择">
    <template v-slot:button>
      <t-button @click="openMenu">打开菜单</t-button>
    </template>
    <t-col>
      <text>自定义内容</text>
    </t-col>
  </t-action-menu>
</template>

<script setup>
const actionMenuRef = ref<ComponentPublicInstance | null>(null)

function openMenu() {
  actionMenuRef.value?.$callMethod('show')
}
</script>
```

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

### 配置 vite.config.ts 接入插件

Source: https://yundie.xyz/tuiplusvapor/compiler/index.html

在 Vite 配置文件中引入 TuiCollector 插件以启用编译增强功能。

```typescript
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import TuiCollector from './uni_modules/tui-vitex';

export default defineConfig({
    devSourcemap: true,
    plugins: [
        TuiCollector(),
        uni()
    ]
});
```

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

### createView

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Creates a new view element (container node) for the layout tree.

```APIDOC
## createView()

### Description
Creates a new view element (container node) to act as a container in the layout tree.

### Signature
`createView() : ITuiView`

### Returns
- **ITuiView** - The created view element instance.
```

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

### createImage

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Creates a new image element.

```APIDOC
## createImage()

### Description
Creates a new image element for rendering images on the canvas.

### Signature
`createImage() : ITuiImage`

### Returns
- **ITuiImage** - The created image element instance.

### Properties
- **src** (string) - The image source path.
- **mode** (string) - The image display mode (default: 'scaleToFill').
- **onload** (function) - Callback triggered when the image loads successfully.
- **onerror** (function) - Callback triggered when an error occurs during loading.
```

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

### createText

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Creates a new text element.

```APIDOC
## createText()

### Description
Creates a new text element for rendering strings.

### Signature
`createText() : ITuiText`

### Returns
- **ITuiText** - The created text element instance.

### Properties
- **value** (string) - The text content.
- **values** (string[]) - Multi-line text content.
```

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

### 圆弧进度条配置数据

Source: https://yundie.xyz/tuiplusvapor/charts/index.html

展示如何通过本地 UTS 文件定义圆弧进度条的配置项。

```typescript
export default [
	{
		name: '圆弧进度条+渐变色',
		option: {
			animation: true,
			dataLabel: true,
			extra: {
				arcbar: {
					backgroundColor: '#E9E9E9',
					endAngle: 0.25,
					gap: 2,
					linearType: 'custom',
					startAngle: 0.75,
					type: 'default',
					width: 12
				}
			},
			series: [
				{
					color: '#2fc25b',
					data: [{ value: 0.8 }],
					name: '正确率'
				}
			],
			subtitle: {
				color: '#666666',
				fontSize: 25,
				name: '正确率'
			},
			title: {
				color: '#2fc25b',
				fontSize: 35,
				name: '80%'
			},
			type: 'arcbar'
		}
	}
]
```

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

### Positioning Styling

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Interface definition and usage for setting element positioning.

```typescript
interface ITuiStyle {
  // 定位
  left?: number;
  right?: number;
  top?: number;
  bottom?: number;
  position?: string; // 'absolute' | 'relative'
}
```

```typescript
element.style.position = "absolute";
element.style.left = 10;
element.style.top = 20;
```

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

### 配置主题系统

Source: https://yundie.xyz/tuiplusvapor/style/index.html

通过 theme.json 定义全局主题变量，如颜色、圆角和间距。

```json
{
  "id": "DefaultMode",
  "name": "默认主题",
  "unit": "rpx",
  "primarynormal": "#2979ff",
  "successnormal": "#19be6b",
  "warningnormal": "#ff9900",
  "errornormal": "#fa3534",
  "colornormal": "#333333",
  "radiusmedium": 16,
  "paddingmedium": 20
  // 更多配置...
}
```

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

### 使用 Base64 编解码 API

Source: https://yundie.xyz/tuiplusvapor/utsapi/intro.html

从 uni_modules 导入编解码函数并进行调用。确保已在 DCloud 插件市场正确导入 TuiPlus 插件。

```javascript
import { encodeBase64, decodeBase64 } from '@/uni_modules/tui-common'
encodeBase64('')
decodeBase64('')
```

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

### draw

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Renders the element tree to the Canvas.

```APIDOC
## draw(e, css)

### Description
Performs the initial rendering of the element tree onto the Canvas.

### Parameters
- **e** (ITuiElement) - The root element to render.
- **css** (UTSJSONObject | null) - Optional CSS style configuration.
```

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

### 组件使用方式

Source: https://yundie.xyz/tuiplusvapor/style/index.html

通过 external-class 属性传递 VaporCSS 类名来定制组件样式。

```vue
<template>
  <t-button
    text=" VaporCSS 类名"
    button-class="bg-primary c-white p-4 r-20"
    text-class="font-medium"
  >
    也可以使用写在style中的类名
  </t-button>
</template>
```

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

### 多图表配置示例

Source: https://yundie.xyz/tuiplusvapor/charts/index.html

通过设置 multiChart 为 true，在单个 Canvas 画布中绘制多个图表。

```html
<template>
  <view class="container">
    <t-xcharts
      ref="chart"
      :option="chartOption"
    ></t-xcharts>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const chart = ref(null);
const chartOption = ref({
  multiChart: true,
  charts: [
    {
      type: 'column',
      series: [{
        data: [10, 20, 30, 40, 50]
      }],
      categories: ['A', 'B', 'C', 'D', 'E'],
      position: {
        x: 0,
        y: 0,
        width: '50%',
        height: '100%'
      }
    },
    {
      type: 'line',
      series: [{
        data: [50, 40, 30, 20, 10]
      }],
      categories: ['A', 'B', 'C', 'D', 'E'],
      position: {
        x: '50%',
        y: 0,
        width: '50%',
        height: '100%'
      }
    }
  ]
});
</script>
```

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

### 基本使用 t-xcharts 组件

Source: https://yundie.xyz/tuiplusvapor/charts/index.html

在页面中引入 t-xcharts 组件并配置基础图表数据。

```html
<template>
  <view class="container">
    <t-xcharts
      ref="chart"
      :option="chartOption"
      @init="onChartInit"
    ></t-xcharts>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const chart = ref(null);
const chartOption = ref({
  type: 'column',
  series: [{
    data: [10, 20, 30, 40, 50]
  }],
  categories: ['A', 'B', 'C', 'D', 'E']
});

function onChartInit() {
  console.log('图表初始化完成');
}
</script>
```

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

### Flex Layout Styling

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Interface definition and usage for Flexbox layout properties.

```typescript
interface ITuiStyle {
  // Flex 布局
  flex?: number;
  flexDirection?: string;
  flexWrap?: string;
  justifyContent?: string;
  alignItems?: string;
  alignSelf?: string;
  alignContent?: string;
}
```

```typescript
// Flex 容器
container.style.display = "flex";
container.style.flexDirection = "row";
container.style.justifyContent = "center";
container.style.alignItems = "center";

// Flex 子元素
child.style.flex = 1;
child.style.alignSelf = "center";
```

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

### 使用原子化样式类

Source: https://yundie.xyz/tuiplusvapor/compiler/index.html

在模板中直接使用预定义的原子化样式类进行布局和样式设置。

```html
<view class="tbg-pn tp-m">
  <text class="ttl1">Hello World</text>
</view>
```

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

### 使用 t-page 简化条件编译

Source: https://yundie.xyz/tuiplusvapor/compiler/index.html

通过使用 t-page 组件，编译器会自动根据平台将组件转换为对应的原生组件，从而避免手动编写条件编译代码。

```html
<!-- 旧版代码 -->
<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex:1">
  <!-- #endif -->
  
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>


<!-- 新版代码不用写条件编译 -->
<template>
 <t-page>
    
 </t-page>
</template>
<!-- 在APP端，`t-page`会编译为`scroll-view`， -->
<template>
 <t-page>
    
 </t-page>
</template>

<!-- 在其它端会编译为`view`。 -->
<template>
 <view>
    
 </view>
</template>
```

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

### t-action-menu Component API

Source: https://yundie.xyz/tuiplusvapor/components/t-action-menu.html

Overview of the t-action-menu component properties, events, slots, and methods.

```APIDOC
## Props

| 属性名 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| `title` | 菜单顶部标题文本 | `string` | `'标题'` |
| `buttonText` | 底部取消区域文本 | `string` | `'取消'` |
| `contentClass` | 内容容器自定义样式类 | `any` | `''` |

## Slots

| 插槽名 | 说明 |
| --- | --- |
| `default` | 菜单主体内容区域 |
| `button` | 触发弹出的按钮区域 |

## Methods

| 方法名 | 说明 |
| --- | --- |
| `show` | 调用内部 `t-popup` 的 `show` 方法，用于切换菜单显示状态 |

## Events

| 事件名 | 说明 |
| --- | --- |
| `click` | 点击时触发 |
| `transitionend` | 动画结束时触发 |
| `initFinished` | 组件初始化完成时触发 |
```

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

### Transform Styling

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Interface definition and usage for transformation and opacity properties.

```typescript
interface ITuiTransform {
  translateX?: number;
  translateY?: number;
  scaleX?: number;
  scaleY?: number;
  rotate?: number;
  skewX?: number;
  skewY?: number;
}

interface ITuiStyle {
  transform?: ITuiTransform;
  opacity?: number;
  rotateX?: number;
  rotateY?: number;
}
```

```typescript
element.style.transform = {
  translateX: 50,
  translateY: 100,
  scaleX: 1.5,
  rotate: Math.PI / 4,
};
element.style.opacity = 0.8;
```

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

### Add Event Listener

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Method signature and usage for attaching event listeners to elements.

```typescript
addEventListener(type : string, listener : (event : ITuiTouchEvent) => void) : number
```

```typescript
const listenerId = element.addEventListener("click", (event) => {
  console.log("元素被点击", event.clientX, event.clientY);
});
```

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

### Text Styling

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Interface definition and usage for text-related styles.

```typescript
interface ITuiStyle {
  // 文本样式
  fontSize?: number;
  lineHeight?: number;
  lines?: number;
  textAlign?: string;
  verticalAlign?: string;
  color?: string;
  fontWeight?: string;
  fontFamily?: string;
  letterSpacing?: number;
  textOverflow?: string;
  whiteSpace?: string;
  wordBreak?: string;
}
```

```typescript
text.style.fontSize = 16;
text.style.lineHeight = 1.5;
text.style.color = "#333333";
text.style.textAlign = "center";
text.style.textOverflow = "ellipsis";
text.style.lines = 2;
```

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

### t-action-menu 基础用法示例

Source: https://yundie.xyz/tuiplusvapor/components/t-action-menu.html

展示了如何使用 t-action-menu 实现列表选择、分享面板以及自定义样式菜单，通过 button 插槽定义触发按钮。

```vue
<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mb-15"
				title="ActionMenu"
				subTitle="从底部操作菜单(分享等菜单)-插槽用法灵活布局"></t-card>
		<t-action-menu title="请选择"
					   class=""
					   button-text="取消">
			<template v-slot:button>
				<t-button type="primary"
						  class="mb-15">菜单</t-button>
			</template>
			<view class="mtb-10">
				<t-row :class="[`tpl fc tvg mb-2px`]"
					   :hover="true"
					   v-for="i in 3">
					<text>选项{{i}}</text>
				</t-row>
			</view>
		</t-action-menu>
		<t-action-menu title="分享到"
					   :content-class="`trm-lr`"
					   button-text="取消">
			<template v-slot:button>
				<t-button type="error"
						  class="mb-15">分享</t-button>
			</template>
			<t-row :class="`mtb-5 tvg h-120`">
				<swiper class="twh-100%">
					<swiper-item class="fl faic fjcc">
						<view class="faic mlr-20-20"
							  hover-class="o-0.7">
							<image class="twh-30 mb-5"
								   src="/static/image/qq.png"></image>
							<text>QQ</text>
						</view>
						<view class="faic mlr-20-20"
							  hover-class="o-0.7">
							<image class="twh-30 mb-5"
								   src="/static/image/zfb.png"></image>
							<text>支付宝</text>
						</view>
						<view class="faic mlr-20-20"
							  hover-class="o-0.7">
							<image class="twh-30 mb-5"
								   src="/static/image/dy.png"></image>
							<text>抖音</text>
						</view>
					</swiper-item>
					<swiper-item class="fl faic fjcc">
						<view class="faic mlr-20-20">
							<image class="twh-30 mb-5"
								   src="/static/image/tb.png"></image>
							<text>淘宝</text>
						</view>
						<view class="faic mlr-20-20">
							<image class="twh-30 mb-5"
								   src="/static/image/tm.png"></image>
							<text>天猫</text>
						</view>
						<view class="faic mlr-20-20">
							<image class="twh-30 mb-5"
								   src="/static/image/jd.png"></image>
							<text>京东</text>
						</view>
						<view class="faic mlr-20-20">
							<image class="twh-30 mb-5"
								   src="/static/image/pdd.png"></image>
							<text>拼多多</text>
						</view>
					</swiper-item>
				</swiper>
			</t-row>
		</t-action-menu>
		<t-action-menu title="请选择"
					   button-text="取消">
			<template v-slot:button>
				<t-button type="success"
						  class="mb-15">设置样式</t-button>
			</template>
			<view :class="`mtb-5`">
				<t-row :class="`p-15 fc tvg mb-2px`"
					   :hover="true"
					   v-for="i in 5">
					<text>选项{{i}}</text>
				</t-row>
			</view>
		</t-action-menu>
		<view class="h-2000"></view>
	</view>
</template>
<script setup>
	function test() {

	}
</script>
```

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

### measureText

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Calculates the width of a text string.

```APIDOC
## measureText(text, fontSize)

### Description
Measures the width of a given text string based on the provided font size.

### Parameters
- **text** (string) - The text to measure.
- **fontSize** (number) - The font size to use for measurement.

### Returns
- **number** - The calculated width of the text.
```

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

### 页面开发示例

Source: https://yundie.xyz/tuiplusvapor/style/index.html

在页面中直接使用 VaporCSS 类名处理布局和样式。

```vue
<view class="f faic fjcb p-4 bg-white"
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: space-between;
      padding: 4rpx;
      background-color: white;
  <text class="s-40 sta-c">
      font-size: 40rpx;
      text-align: center;
  </text>
  <button class="bg-primary c-white">
      background-color: primary;
      color: white;
  </button>
</view>
```

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

### Border Styling

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Interface definition and usage for border properties.

```typescript
interface ITuiStyle {
  // 边框
  borderWidth?: number;
  borderLeftWidth?: number;
  borderRightWidth?: number;
  borderTopWidth?: number;
  borderBottomWidth?: number;
  borderColor?: string;
  borderTopColor?: string;
  borderBottomColor?: string;
  borderLeftColor?: string;
  borderRightColor?: string;
  borderRadius?: number;
  borderTopLeftRadius?: number;
  borderTopRightRadius?: number;
  borderBottomLeftRadius?: number;
  borderBottomRightRadius?: number;
}
```

```typescript
element.style.borderWidth = 1;
element.style.borderColor = "#e0e0e0";
element.style.borderRadius = 8;
```

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

### 使用 VaporCSS 类名

Source: https://yundie.xyz/tuiplusvapor/style/index.html

在模板中直接使用 VaporCSS 提供的原子化类名。

```vue
<template>
  <view class="p-4 bg-primary c-white r-20"> Hello VaporCSS! </view>
</template>
```

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

### Draw element tree to Canvas

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Renders the element tree to the canvas, optionally applying a CSS configuration object.

```ts
// 首次绘制
engine.draw(root, null);

// 带样式配置绘制
const styles = {
  ".container": {
    backgroundColor: "#ffffff",
  },
};
engine.draw(root, styles);
```

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

### SVG 自动编译为 Image

Source: https://yundie.xyz/tuiplusvapor/compiler/index.html

编译器会自动将模板中的 SVG 代码块转换为字符串并嵌入到 image 组件的 src 属性中，以支持 UVUE 环境。

```html
<!-- 写法 -->
<view class="card-title">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
                <circle cx="9" cy="7" r="4" />
                <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
                <path d="M16 3.13a4 4 0 0 1 0 7.75" />
              </svg>
              活跃用户
</view>

<!-- 编译为UVUE支持的代码 -->

<view class="card-title">
            <image :src="`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
                <circle cx="9" cy="7" r="4" />
                <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
                <path d="M16 3.13a4 4 0 0 1 0 7.75" />
              </svg>`" />
             
              活跃用户
</view>
```

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

### Handle click event

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Registers a listener for click events, which are automatically generated by the engine under specific touch conditions.

```typescript
element.addEventListener("click", (event: ITuiTouchEvent) => {
  console.log("元素被点击", event.clientX, event.clientY);
});
```

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

### Handle touchmove event

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Registers a listener for touch movement events on an element.

```typescript
element.addEventListener("touchmove", (event: ITuiTouchEvent) => {
  console.log("触摸移动", event.clientX, event.clientY);
});
```

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

### addEventListener

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Registers an event listener for a specific event type on the element.

```APIDOC
## addEventListener

### Description
Adds an event listener to the element.

### Signature
`addEventListener(type : string, listener : (event : ITuiTouchEvent) => void) : number`

### Parameters
- **type** (string) - Required - Event type ('touchstart', 'touchmove', 'touchend', 'click').
- **listener** (function) - Required - The callback function to execute when the event triggers.

### Returns
- **number** - The unique ID of the event listener.
```

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

### 自定义主题配置

Source: https://yundie.xyz/tuiplusvapor/compiler/index.html

可以在 TuiCollector 初始化时传入 theme 选项来覆盖默认的主题配置。

```typescript
TuiCollector({
    theme: { /* 自定义主题 */ }
})
```

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

### appendChild

Source: https://yundie.xyz/tuiplusvapor/renderer/index.html

Adds one or more child elements to the current element.

```APIDOC
## appendChild

### Description
Adds child elements to the current element.

### Signature
`appendChild(...spreadChild : ITuiElement[]) : void`

### Parameters
- **spreadChild** (ITuiElement[]) - Required - Array of child elements to add.
```
Tokens:
Raw