Wot UI

https://wot-ui.cn
Admin
Wot UI is a high-value, lightweight uni-app component library developed with Vue3 and TypeScript,...
Tokens:277,100
Snippets:3,165
Trust Score:4.4
Update:4 months ago
Show doc for...
Tokens:
Raw
### MCP Server Client Configuration Example

Source: https://wot-ui.cn/guide/open-wot.html

Example JSON configuration for a client to connect to the Wot UI MCP Server. This specifies the command and arguments to start the server.

```json
{
  "mcpServers": {
    "wot-ui": {
      "command": "wot",
      "args": ["mcp"]
    }
  }
}
```

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

### Open Wot CLI Quick Start Commands

Source: https://wot-ui.cn/guide/open-wot.html

A set of common commands to quickly interact with the Open Wot CLI for listing components, getting information, viewing demos, and accessing documentation.

```bash
wot list
wot info Button
wot demo Button basic
wot doc Button
wot token Button
wot changelog
```

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

### Install Wot UI with npm

Source: https://wot-ui.cn/llms-full.txt

Install Wot UI using npm, yarn, or pnpm.

```bash
npm i @wot-ui/ui
```

```bash
yarn add @wot-ui/ui
```

```bash
pnpm add @wot-ui/ui
```

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

### Install Dependencies

Source: https://wot-ui.cn/guide/templates.html

Install the necessary project dependencies using pnpm after opening the project folder.

```bash
pnpm install
```

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

### Opacity Class Examples

Source: https://wot-ui.cn/guide/unocss-preset.html

Shows examples of applying opacity utility classes.

```css
wot-opacity-disabled
wot-opacity-main
```

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

### Install @uni-ku/root with pnpm

Source: https://wot-ui.cn/component/config-provider.html

Install the @uni-ku/root package as a development dependency using pnpm.

```bash
pnpm add -D @uni-ku/root
```

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

### Install @uni-ku/root with yarn

Source: https://wot-ui.cn/component/config-provider.html

Install the @uni-ku/root package as a development dependency using yarn.

```bash
yarn add -D @uni-ku/root
```

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

### Install @uni-ku/root with npm

Source: https://wot-ui.cn/component/config-provider.html

Install the @uni-ku/root package as a development dependency using npm.

```bash
npm i -D @uni-ku/root
```

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

### Initialize and Open Image Preview

Source: https://wot-ui.cn/llms-full.txt

Import and use the useImagePreview hook to get the previewImage function. Call previewImage with an array of image URLs and a starting position.

```typescript
import { useImagePreview } from '@/uni_modules/wot-ui'

const { previewImage } = useImagePreview()

const openPreview = () => {
  previewImage({
    images: [
      'https://example.com/image1.jpg',
      'https://example.com/image2.jpg',
      'https://example.com/image3.jpg'
    ],
    startPosition: 0
  })
}
```

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

### Run Development Server

Source: https://wot-ui.cn/guide/templates.html

Start the development server to run the uni-app project using pnpm.

```bash
pnpm dev
```

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

### Basic Image Preview Setup

Source: https://wot-ui.cn/llms-full.txt

Set up a button to trigger the image preview and include the `wd-image-preview` component instance in your HTML.

```html
<wd-button @click="handlePreview">预览图片</wd-button>
<wd-image-preview />
```

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

### Vue 3 Script Setup 使用 virtualHost 解决小程序渲染问题

Source: https://wot-ui.cn/guide/common-problems.html

在 Vue 3 Script Setup 组件中设置 `options.virtualHost: true` 以解决微信小程序自定义组件渲染时多一级节点的问题。

```typescript
// vue3 script setup 使用virtualHost
<script lang="ts">
export default {
  // 将自定义节点设置成虚拟的，更加接近Vue组件的表现，可以去掉微信小程序自定义组件多出的最外层标签
  options: {
    virtualHost: true
  }
}
</script>
<script lang="ts" setup>
</script>
```

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

### Install Open Wot CLI

Source: https://wot-ui.cn/guide/open-wot.html

Install the @wot-ui/cli package globally using npm. This command makes the `wot` command available in your terminal.

```bash
npm install -g @wot-ui/cli
```

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

### Install Zod

Source: https://wot-ui.cn/component/form.html

Install Zod using npm, yarn, or pnpm before using it for form validation.

```bash
npm install zod
```

```bash
yarn add zod
```

```bash
pnpm add zod
```

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

### uni_modules Installation Structure

Source: https://wot-ui.cn/llms-full.txt

The directory structure for installing Wot UI using the uni_modules method.

```bash
- uni_modules
- - - wot-ui 
```

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

### Font Weight Class Examples

Source: https://wot-ui.cn/guide/unocss-preset.html

Illustrates how to set font weights using utility classes.

```css
wot-font-medium
wot-font-semibold
```

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

### Install Zod for Validation

Source: https://wot-ui.cn/llms-full.txt

Instructions for installing the Zod library, which is recommended for type-safe validation with Wot-ui v2's zodAdapter.

```bash
npm i zod
```

```bash
yarn add zod
```

```bash
pnpm add zod
```

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

### SkeletonRowCol Configuration Examples

Source: https://wot-ui.cn/llms-full.txt

Provides examples of how to configure the `row-col` attribute for the Skeleton component, illustrating different ways to define rows, columns, and their properties.

```ts
// Three rows, displaying one column, one column, and two columns respectively
[1, 1, 2]

// Three rows, with the third row having a custom width
[1, 1, { width: '100px' }]

// The third row contains two columns, each with a set width and right margin
[1, 1, [{ width: '50%' }, { width: '50%', marginRight: '10px' }]]
```

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

### Install Wot UI Skills

Source: https://wot-ui.cn/guide/skills.html

Use this script to install Wot UI Skills. Choose the appropriate command based on your package manager preference (pnpx or npx).

```shell
pnpx skills add wot-ui/open-wot
```

```shell
npx skills add wot-ui/open-wot
```

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

### Install vite-plugin-uni-components via pnpm

Source: https://wot-ui.cn/guide/quick-use.html

Install the vite-plugin-uni-components package as a development dependency to enable automatic component imports.

```bash
pnpm add @uni-helper/vite-plugin-uni-components -D
```

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

### Install Zod with yarn

Source: https://wot-ui.cn/llms-full.txt

Install the Zod library using yarn. This is required before using Zod for form validation.

```bash
yarn add zod
```

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

### Install UnoCSS and Preset

Source: https://wot-ui.cn/guide/unocss-preset.html

Installs UnoCSS and the `@wot-ui/unocss-preset` package as development dependencies using npm, yarn, or pnpm.

```bash
npm i -D unocss
npm i @wot-ui/unocss-preset
```

```bash
yarn add -D unocss
yarn add @wot-ui/unocss-preset
```

```bash
pnpm add -D unocss
pnpm add @wot-ui/unocss-preset
```

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

### Install Wot UI via npm

Source: https://wot-ui.cn/guide/quick-use.html

Use npm to install the Wot UI package. This method requires additional configuration for component auto-import.

```bash
npm i @wot-ui/ui
```

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

### Install Wot UI via yarn

Source: https://wot-ui.cn/guide/quick-use.html

Use yarn to install the Wot UI package. This method requires additional configuration for component auto-import.

```bash
yarn add @wot-ui/ui
```

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

### Install UnoCSS and Wot UI Preset with pnpm

Source: https://wot-ui.cn/llms-full.txt

Install the necessary UnoCSS package and the Wot UI preset using pnpm. This is a prerequisite for using the preset in your project.

```bash
pnpm add -D unocss
pnpm add @wot-ui/unocss-preset
```

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

### Install Wot UI via pnpm

Source: https://wot-ui.cn/guide/quick-use.html

Use pnpm to install the Wot UI package. This method requires additional configuration for component auto-import.

```bash
pnpm add @wot-ui/ui
```

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

### Custom Field Names Example

Source: https://wot-ui.cn/component/picker-view.html

Example demonstrating how to use `value-key`, `label-key`, and `children-key` to adapt the Picker View component to non-standard data structures.

```APIDOC
## 特殊用法 

### 自定义字段名 

通过 `value-key`、`label-key`、`children-key` 可以适配非标准字段名的数据结构。
```html
<wd-picker-view v-model="value" :columns="columns" value-key="id" label-key="text" />
```

```typescript
import { ref } from 'vue'

const value = ref<number[]>([1])
const columns = ref([
  { id: 1, text: '选项一' },
  { id: 2, text: '选项二' },
  { id: 3, text: '选项三' }
])
```
```

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

### Uninstall and Install npm Packages

Source: https://wot-ui.cn/guide/migration-v2.html

Replace the old 'wot-design-uni' package with '@wot-ui/ui' using npm, yarn, or pnpm.

```bash
npm remove wot-design-uni
npm i @wot-ui/ui
```

```bash
yarn remove wot-design-uni
yarn add @wot-ui/ui
```

```bash
pnpm remove wot-design-uni
pnpm add @wot-ui/ui
```

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

### Form Script Setup

Source: https://wot-ui.cn/component/form.html

This script setup block defines the reactive state, computed properties, and event handlers for the complex form. It includes imports for Wot-UI components and utility functions, as well as Zod for schema validation.

```typescript
<script lang="ts" setup>
import { useToast, zodAdapter } from '@/uni_modules/wot-ui'
import { isArray } from '@/uni_modules/wot-ui/common/util'
import { useCascaderAreaData } from '@vant/area-data'
import { type FormInstance, type FormSchema, type FormSchemaIssue } from '@/uni_modules/wot-ui/components/wd-form/types'
import type { SliderInstance } from '@/uni_modules/wot-ui/components/wd-slider/types'
import type { SlideVerifyInstance } from '@/uni_modules/wot-ui/components/wd-slide-verify/types'
import type { UploadFileItem } from '@/uni_modules/wot-ui/components/wd-upload/types'
import type { CascaderOption } from '@/uni_modules/wot-ui/components/wd-cascader/types'

import dayjs from 'dayjs'
import { computed, nextTick, reactive, ref, watch } from 'vue'
import { z } from 'zod'

const showPlatformPicker = ref(false)
const showPromotionPicker = ref(false)
const showTimePicker = ref(false)
const showDatePicker = ref(false)
const showAddressPicker = ref(false)
const addressText = ref('')
const isVerticalLayout = ref(false)
const useZodSchema = ref(true)
const formItemLayout = computed(() => (isVerticalLayout.value ? 'vertical' : 'horizontal'))
const sliderRef = ref<SliderInstance>()
const slideVerifyRef = ref<SlideVerifyInstance>()

const model = reactive({
  name: '',
  time: '',
  date: '',
  address: '',
  content: '',
  count: 1,
  switchVal: false,
  discount: '',
  cardId: '',
  phone: '',
  fileList: [] as UploadFileItem[],
  priority: 1,
  tags: [1],
  rate: 3,
  budget: 50,
  verified: false,
  read: false
})

const rules = reactive({
  name: [
    {
      required: true,
      message: '请输入活动名称'
    }
  ],
  time: [
    {
      required: true,
      message: '请选择时间'
    }
  ],
  date: [
    {
      required: true,
      message: '请选择日期'
    }
  ],
  address: [
    {
      required: true,
      message: '请选择地区'
    }
  ],
  content: [
    {
      required: true,
      message: '请输入活动细则信息'
    }
  ],
  count: [
    {
      required: true,
      message: '请输入发货数量'
    },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (value > 100) {
          callback(new Error('发货数量不能超过100'))
        } else {
          callback()
        }
      }
    }
  ],
  discount: [
    {
      required: true,
      message: '请输入优惠金额'
    }
  ],
  cardId: [
    {
      required: true,
      message: '请输入歪比巴卜'
    },
    {
      pattern: /^[0-9]{16}$/,
      message: '请输入16位数字'
    }
  ],
  phone: [
    {
      required: true,
      message: '请输入玛卡巴卡'
    },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入正确的手机号'
    }
  ],
  fileList: [
    {
      required: true,
      message: '请上传活动图片'
    }
  ],
  priority: [
    {
      required: true,
      message: '请选择投放优先级'
    }
  ],
  tags: [
    {
      required: true,
      message: '请选择投放标签'
    }
  ],
  rate: [
    {
      required: true,
      message: '请选择活动评分'
    }
  ],
  budget: [
    {
      required: true,
      message: '请选择预算强度'
    }
  ],
  verified: [
    {
      required: true,
      message: '请完成滑块验证'
    }
  ],
  read: [
    {
      required: true,
      message: '请阅读并同意协议'
    }
  ]
})

const timeText = computed(() => {
  return model.time ? dayjs(model.time).format('YYYY-MM-DD HH:mm:ss') : ''
})
const dateText = computed(() => {
  return model.date ? dayjs(model.date).format('YYYY-MM-DD') : ''
})

const handleFileChange = (files: UploadFileItem[]) => {
  model.fileList = files
}

const handleVerifySuccess = () => {
  model.verified = true
}

const handleVerifyFail = () => {
  model.verified = false
  useToast('验证失败')
}

const handleSubmit = () => {
  slideVerifyRef.value?.validate()
  if (!model.verified) {
    return
  }
  // TODO: 提交表单
  useToast('提交成功')
}

watch(
  () => model.time,
  (val) => {
    if (val) {
      model.date = dayjs(val).format('YYYY-MM-DD')
    }
  }
)

watch(
  () => model.address,
  (val) => {
    if (val) {
      addressText.value = val
    }
  }
)
</script>

<style lang="scss" scoped>
.tip {
  margin-top: 20px;
  margin-bottom: 20px;
}
.footer {
  padding: 20px;
}
</style>
```

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

### Install UnoCSS and Wot UI Preset with yarn

Source: https://wot-ui.cn/llms-full.txt

Install the necessary UnoCSS package and the Wot UI preset using yarn. This is a prerequisite for using the preset in your project.

```bash
yarn add -D unocss
yarn add @wot-ui/unocss-preset
```

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

### Spacing Class Examples

Source: https://wot-ui.cn/guide/unocss-preset.html

Demonstrates how to apply margin and gap utility classes with different spacing values.

```css
wot-m-main
wot-mt-tight
wot-gap-x-loose
```

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

### Create Project with create-uni and wot-starter-v2

Source: https://wot-ui.cn/llms-full.txt

Use create-uni to quickly scaffold a new project based on the wot-starter-v2 template.

```bash
pnpm create uni@latest -t wot-starter-v2 <Your Project Name>

```

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

### Create wot-starter Template

Source: https://wot-ui.cn/guide/templates.html

Use this command to create a new uni-app project based on the wot-starter template, which deeply integrates Wot UI. This command utilizes pnpm and the create-uni scaffolding tool.

```bash
pnpm create uni <project-name> -t wot-starter-v2
```

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

### Manual Upload Trigger

Source: https://wot-ui.cn/llms-full.txt

Configure the upload component to not auto-upload files by setting `auto-upload` to `false`. Use the component instance's `submit` method to manually initiate the upload process. This example shows the setup in Vue.

```html
<wd-upload
  ref="uploadRef"
  :auto-upload="false"
  :file-list="fileList"
  :action="action"
  :success-status="[200, 201]"
  @change="handleChange"
></wd-upload>

<wd-button @click="uploadRef?.submit()">开始上传</wd-button>
```

```ts
import { ref } from 'vue'
import type { UploadFile, UploadInstance } from '@/uni_modules/wot-ui/components/wd-upload/types'

const uploadRef = ref<UploadInstance>()
const fileList = ref<UploadFile[]>([])
```

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

### Basic Image Preview Setup

Source: https://wot-ui.cn/component/image-preview.html

Use `useImagePreview` to functionally open an image preview. Ensure a `wd-image-preview` instance is declared in your template.

```html
<wd-button @click="handlePreview">预览图片</wd-button>
<wd-image-preview />
```

```typescript
import { useImagePreview } from '@wot-ui/ui'

const { previewImage } = useImagePreview()

function handlePreview() {
  previewImage({
    images: [
      'https://example.com/image1.jpg',
      'https://example.com/image2.jpg',
      'https://example.com/image3.jpg'
    ]
  })
}
```

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

### Stroke Class Examples

Source: https://wot-ui.cn/guide/unocss-preset.html

Provides examples for applying border stroke utility classes.

```css
wot-border-stroke-main
wot-border-stroke-bold
```

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

### startUpload

Source: https://wot-ui.cn/llms-full.txt

Initiates the file upload process for a given file item with specified options.

```APIDOC
## startUpload

### Description
Starts uploading a file. This method takes a file item and upload options, returning a UniApp.UploadTask.

### Method
`startUpload`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **file** (UploadFileItem) - Required - The file item to upload.
- **options** (UseUploadOptions) - Required - Options for the upload process.

### Request Example
```ts
const file = {
  url: 'file://temp/image.png',
  status: UPLOAD_STATUS.PENDING,
  percent: 0
};

startUpload(file, {
  action: 'https://upload-url',
  onSuccess(res) {
    console.log('上传成功', res);
  },
  onError(err) {
    console.log('上传失败', err);
  },
  onProgress(progress) {
    console.log('上传进度', progress);
  }
});
```

### Response
#### Success Response (200)
Returns a UniApp.UploadTask object.

#### Response Example
```json
{
  "task": "UniApp.UploadTask object"
}
```

### UseUploadOptions
#### Parameters
- **action** (string) - Required - The upload URL.
- **header** (Record<string, any>) - Optional - Request headers. Defaults to {}.
- **name** (string) - Optional - The key for the file in the form data. Defaults to 'file'.
- **formData** (Record<string, any>) - Optional - Additional form data. Defaults to {}.
- **fileType** (string) - Optional - The type of file ('image', 'video', 'audio'). Defaults to 'image'.
- **statusCode** (number | number[]) - Optional - The status code(s) indicating success. Defaults to 200.
- **uploadMethod** (UploadMethod) - Optional - Custom upload method.
- **onSuccess** (Function) - Optional - Callback function for successful uploads.
- **onError** (Function) - Optional - Callback function for upload errors.
- **onProgress** (Function) - Optional - Callback function for upload progress updates.
```

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

### Padding Class Examples

Source: https://wot-ui.cn/guide/unocss-preset.html

Shows examples of padding utility classes applied horizontally and vertically.

```css
wot-p-main
wot-px-tight
wot-pb-loose
```

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

### Basic HTML Structure for useToast

Source: https://wot-ui.cn/llms-full.txt

Include the `<wd-toast />` component as a mount point and a `<wd-button />` to trigger the toast.

```html
<wd-toast />
<wd-button @click="showToast">toast</wd-button>
```

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

### Basic Table Usage

Source: https://wot-ui.cn/llms-full.txt

Demonstrates the basic setup of a `wd-table` with data and column definitions. Handles sort and row click events.

```html
<wd-table :data="dataList" :height="400" @sort-method="handleSort" @row-click="handleRowClick">
  <wd-table-column prop="name" label="姓名" align="center" width="50%"></wd-table-column>
  <wd-table-column prop="grade" label="分数" align="center" width="50%"></wd-table-column>
</wd-table>
```

```ts
import type { TableColumn } from '@/uni_modules/wot-ui/components/wd-table-column/types'
import { ref } from 'vue'

interface TableData {
  name: string
  school: string
  major: string
  gender: string
  graduation: string
  grade: number
  compare: string
  hobby: string
}

const dataList = ref<TableData[]>([
  {
    name: '关羽',
    school: '武汉市阳逻绿豆学院',
    major: '计算机科学与技术专业',
    gender: '男',
    graduation: '2022年1月12日',
    grade: 66,
    compare: '48%',
    hobby: '颜良文丑，以吾观之，如土鸡瓦犬耳。'
  },
  {
    name: '刘备',
    school: '武汉市阳逻编织学院',
    major: '计算机科学与技术专业',
    gender: '男',
    graduation: '2022年1月12日',
    grade: 68,
    compare: '21%',
    hobby: '我得孔明，如鱼得水也'
  }
])

function handleSort(column: TableColumn) {
  dataList.value = dataList.value.reverse()
}

function handleRowClick({ rowIndex }: { rowIndex: number }) {
  console.log(rowIndex)
}
```

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

### 创建集成 Wot UI 的 uni-app 项目

Source: https://wot-ui.cn/guide/cli.html

使用此命令通过 create-uni 脚手架快速创建一个新的 uni-app 项目，并自动集成 Wot UI 2.x、Pinia 状态管理和 ESLint 支持。推荐使用 pnpm。

```bash
pnpm create uni <你的项目名称> --ts -m pinia -u wot2 -e
```

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

### Start MCP Server

Source: https://wot-ui.cn/guide/open-wot.html

Launch the MCP Server using the `wot mcp` command. This allows clients supporting MCP to integrate with Wot UI tools.

```bash
wot mcp
```

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

### Border Radius Class Examples

Source: https://wot-ui.cn/guide/unocss-preset.html

Provides examples for applying rounded corners using utility classes.

```css
wot-rounded-md
wot-rounded-full
```

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

### Basic Usage

Source: https://wot-ui.cn/llms-full.txt

Demonstrates how to set up a basic toast message using the `wd-toast` component as a mount point and the `useToast()` hook for functional calls.

```APIDOC
## Basic Usage

### Description

This section shows how to use the `wd-toast` component and the `useToast()` hook to display a simple toast message.

### Setup

First, include the `wd-toast` component in your template and then use `useToast()` in your script.

### Code Example

```html [vue]
<wd-toast />
<wd-button @click="showToast">toast</wd-button>
```

```ts [ts]
import { useToast } from '@/uni_modules/wot-ui'

const toast = useToast()

function showToast() {
  toast.show('提示信息')
}
```
```

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

### Action Sheet Basic Usage

Source: https://wot-ui.cn/component/action-sheet.html

Demonstrates the basic setup for an action sheet with customizable actions. Use this to present a list of options to the user.

```html
<wd-button @click="showActions">弹出菜单</wd-button>
<wd-action-sheet v-model="show" :actions="actions" @close="close" />
```

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

### Base CSS Variable Example

Source: https://wot-ui.cn/guide/custom-theme.html

An example of a base CSS variable representing a pure visual constant.

```css
--wot-blue-6: #1C64FDFF;
```

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

### Basic Usage of useUpload Hook

Source: https://wot-ui.cn/component/use-upload.html

Demonstrates how to use the useUpload hook to choose files and initiate an upload. Includes setup for success, error, and progress callbacks.

```typescript
import { useUpload } from '@/uni_modules/wot-ui'

const { startUpload, abort, chooseFile, UPLOAD_STATUS } = useUpload()

// 选择文件
const files = await chooseFile({
  accept: 'image',
  multiple: true,
  maxCount: 9
})

// 开始上传
const file = {
  url: 'file://temp/image.png',
  status: UPLOAD_STATUS.PENDING,
  percent: 0
}

startUpload(file, {
  action: 'https://upload-url',
  onSuccess(res) {
    console.log('上传成功', res)
  },
  onError(err) {
    console.log('上传失败', err) 
  },
  onProgress(progress) {
    console.log('上传进度', progress)
  }
})

// 中断上传
abort()
```

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

### Install Sass v2

Source: https://wot-ui.cn/guide/migration-v2.html

Install Sass version 1.98.0 or higher using npm, yarn, or pnpm.

```bash
npm i sass@^1.98.0 -D
```

```bash
yarn add sass@^1.98.0 -D
```

```bash
pnpm add sass@^1.98.0 -D
```

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

### Update Import Paths for uni_modules Installation

Source: https://wot-ui.cn/guide/migration-v2.html

Adjust the import path for uni_modules installations from '@/uni_modules/wot-design-uni' to '@/uni_modules/wot-ui'.

```typescript
// v1
import { useToast } from '@/uni_modules/wot-design-uni'

// v2
import { useToast } from '@/uni_modules/wot-ui'
```

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

### Update Import Paths for Direct Installation

Source: https://wot-ui.cn/guide/migration-v2.html

Change the import path from 'wot-design-uni' to '@wot-ui/ui' for direct installations.

```typescript
// v1
import { useToast } from 'wot-design-uni'

// v2
import { useToast } from '@wot-ui/ui'
```

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

### Basic Usage of wd-video-preview

Source: https://wot-ui.cn/llms-full.txt

Declare wd-video-preview in the page, then open the video preview using useVideoPreview().

```html
<wd-video-preview />
<wd-button @click="openPreview">预览视频</wd-button>
```

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

### Basic Usage of wd-video-preview

Source: https://wot-ui.cn/component/use-video-preview.html

Declare the wd-video-preview component in your page and then use useVideoPreview() to open the video preview. This snippet demonstrates the fundamental setup.

```html
<wd-video-preview />
<wd-button @click="openPreview">预览视频</wd-button>
```

```typescript
import { useVideoPreview } from '@/uni_modules/wot-ui'

const { previewVideo } = useVideoPreview()

const openPreview = () => {
  previewVideo({
    url: 'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_115503.mp4',
    poster: 'https://wot-ui.cn/assets/panda.jpg',
    title: '视频预览'
  })
}
```

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

### Semantic CSS Variable Example

Source: https://wot-ui.cn/guide/custom-theme.html

An example of a semantic CSS variable mapping a base variable to a business context.

```css
--wot-primary-6: var(--wot-blue-6);
```

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

### Install Zod with pnpm

Source: https://wot-ui.cn/llms-full.txt

Install the Zod library using pnpm. This is required before using Zod for form validation.

```bash
pnpm add zod
```

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

### Install Zod with npm

Source: https://wot-ui.cn/llms-full.txt

Install the Zod library using npm. This is required before using Zod for form validation.

```bash
npm install zod
```

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

### Basic Usage Example

Source: https://wot-ui.cn/guide/unocss-preset.html

Demonstrates how to use Wot UI's UnoCSS preset to style a view with background, rounded corners, and padding, and text with title and main text styles.

```html
<view class="wot-bg-filled-oppo wot-rounded-xl wot-p-loose">
  <text class="wot-text-title-large wot-text-text-main wot-font-semibold">
    Wot UI UnoCSS Preset
  </text>
</view>
```

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

### tsconfig.json Type Declaration for npm Installation

Source: https://wot-ui.cn/guide/migration-v2.html

Update the type declarations in tsconfig.json when installing Wot-UI via npm.

```json
{
  "compilerOptions": {
    "types": ["@wot-ui/ui/global"]
  }
}
```

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

### Create Root Component with Global Configuration

Source: https://wot-ui.cn/component/config-provider.html

Set up a root component that handles global configuration using wd-config-provider and a custom useTheme composable.

```vue
<script setup lang="ts">
import { useTheme } from './composables/useTheme'

const { theme, themeVars } = useTheme({
  buttonPrimaryBgColor: '#07c160',
  buttonPrimaryColor: '#ffffff'
})
</script>

<template>
  <wd-config-provider :theme="theme" :theme-vars="themeVars">
    <KuRootView />
  </wd-config-provider>
</template>
```

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

### Easycom Configuration for npm Installation

Source: https://wot-ui.cn/guide/migration-v2.html

When using npm installation with Easycom, update the path to the new package name.

```json
{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^wd-(.*)": "@wot-ui/ui/components/wd-$1/wd-$1.vue"
    }
  }
}
```

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

### Install vite-plugin-uni-components via yarn

Source: https://wot-ui.cn/guide/quick-use.html

Install the vite-plugin-uni-components package as a development dependency to enable automatic component imports.

```bash
yarn add @uni-helper/vite-plugin-uni-components -D
```

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

### Install vite-plugin-uni-components via npm

Source: https://wot-ui.cn/guide/quick-use.html

Install the vite-plugin-uni-components package as a development dependency to enable automatic component imports.

```bash
npm i @uni-helper/vite-plugin-uni-components -D
```

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

### Basic Usage of wd-image-preview

Source: https://wot-ui.cn/llms-full.txt

Declare wd-image-preview in the page, then open image preview via useImagePreview().

```html
<wd-image-preview />
<wd-button @click="openPreview">预览图片</wd-button>
```

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

### Synchronize Import Paths for uni_modules Installation

Source: https://wot-ui.cn/guide/migration-v2.html

Replace old import paths with new ones when using uni_modules for installation.

```typescript
import { Locale } from '@/uni_modules/wot-ui/locale'
import enUS from '@/uni_modules/wot-ui/locale/lang/en-US'
```

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

### Basic Steps Usage

Source: https://wot-ui.cn/component/steps.html

Demonstrates the basic structure of the Steps component. Use `active` to set the current step index.

```html
<wd-steps :active="0">
  <wd-step />
  <wd-step />
  <wd-step />
</wd-steps>
```

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

### Basic Image Preview

Source: https://wot-ui.cn/component/use-image-preview.html

Use this snippet to open a basic image preview. First, declare the `wd-image-preview` component in your template, then use `useImagePreview()` to trigger the preview with an array of image URLs and a starting position.

```html
<wd-image-preview />
<wd-button @click="openPreview">预览图片</wd-button>
```

```typescript
import { useImagePreview } from '@/uni_modules/wot-ui'

const { previewImage } = useImagePreview()

const openPreview = () => {
  previewImage({
    images: [
      'https://example.com/image1.jpg',
      'https://example.com/image2.jpg',
      'https://example.com/image3.jpg'
    ],
    startPosition: 0
  })
}
```

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

### Synchronize Import Paths for npm Installation

Source: https://wot-ui.cn/guide/migration-v2.html

Replace old import paths with new ones when using npm for installation.

```typescript
import { Locale } from '@wot-ui/ui'
import enUS from '@wot-ui/ui/locale/lang/en-US'
```

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

### Importing Images for Preview

Source: https://wot-ui.cn/component/img.html

Provides an example of importing both the displayed image and a separate image for preview purposes, demonstrating how to handle distinct local assets for these two scenarios.

```typescript
import blackMao from './black_mao.png'
import blackMaoPreview from './black_mao_1.png'

const imgURL = blackMao
const previewURL = blackMaoPreview
```

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

### Initialize useToast and Show Basic Message

Source: https://wot-ui.cn/llms-full.txt

Import `useToast` and initialize it. Call `toast.show()` with a message string to display a basic toast.

```typescript
import { useToast } from '@/uni_modules/wot-ui'

const toast = useToast()

function showToast() {
  toast.show('提示信息')
}
```

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

### Basic Table Usage

Source: https://wot-ui.cn/component/table.html

Demonstrates the fundamental setup of a table with data and column definitions. Handles sorting and row click events.

```html
<wd-table :data="dataList" :height="400" @sort-method="handleSort" @row-click="handleRowClick">
  <wd-table-column prop="name" label="姓名" align="center" width="50%"></wd-table-column>
  <wd-table-column prop="grade" label="分数" align="center" width="50%"></wd-table-column>
</wd-table>
```

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

### Component CSS Variable Example

Source: https://wot-ui.cn/guide/custom-theme.html

An example of a component CSS variable directly linked to a UI component's property, referencing a semantic variable.

```css
--wot-button-primary-bg: var(--wot-primary-6);
```
Tokens:
Raw