Vxe PC UI

https://github.com/x-extends/vxe-pc-ui
Admin
Vxe PC UI is a comprehensive Vue 3-based component library for building desktop applications,...
Tokens:107,101
Snippets:603
Trust Score:8.8
License:MIT
Update:4 weeks ago
Show doc for...
Tokens:
Raw
### VxeEmpty usage example

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/15-基础展示组件.md

Example of an empty state with custom content and icon.

```html
<vxe-empty content="暂无数据" icon="vxe-icon-empty"></vxe-empty>
```

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

### VxeLink usage example

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/15-基础展示组件.md

Example of a link that opens in a new tab.

```html
<vxe-link content="文档" href="https://vxeui.com" target="_blank"></vxe-link>
```

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

### install 函数：批量安装组件

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/00-入口与安装.md

install 函数接收 Vue 应用实例和可选的全局配置，先调用 setConfig 应用配置，然后遍历内部组件列表并调用 app.use 进行安装。

```ts
export function install (app: App, options?: VxeGlobalConfig) {
  setConfig(options)

  components.forEach(component => app.use(component))
}
```

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

### Install vxe-pc-ui via npm

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/README.md

Use this shell command to install vxe-pc-ui. The commented line shows optional installation of vxe-table and vxe-design for additional features.

```shell
npm install vxe-pc-ui
# npm install vxe-pc-ui vxe-table vxe-design
```

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

### install 函数类型声明

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/types.md

定义 install 函数，接受 Vue App 实例和可选配置，用于安装组件库。

```typescript
// types/all.d.ts
import { App } from 'vue'
import { VxeGlobalConfig } from './ui'

export function install (app: App, options?: VxeGlobalConfig): void
```

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

### install(app, options?)

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/types.md

安装 vxe-pc-ui 插件的方法，接收 Vue 应用实例和可选全局配置。

```APIDOC
## install(app, options?)

### Description
安装 vxe-pc-ui 插件的方法，接收 Vue 应用实例和可选全局配置。

### Method
install

### Parameters
#### Parameters
- **app** (App) - Required - Vue 应用实例
- **options** (VxeGlobalConfig) - Optional - 全局配置

### Request Example
```ts
import { install } from 'vxe-pc-ui'
import { createApp } from 'vue'

const app = createApp({})
install(app, { /* 全局配置 */ })
```

### Response
#### Success Response (void)
无返回值。
```

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

### install(app, options?)

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/00-入口与安装.md

批量安装全部组件。调用 setConfig(options) 后，依次对内部组件列表调用 app.use(component)。

```APIDOC
## install(app, options?)

### Description
批量安装全部组件。调用 setConfig(options) 后，依次对内部组件列表调用 app.use(component)。

### Method
install

### Parameters
- `app` (App) - Required - Vue 应用实例
- `options` (VxeGlobalConfig) - Optional - 全局配置，等价于调用 VxeUI.setConfig(options)

### Request Example
```ts
import { install } from 'vxe-pc-ui'
import { createApp } from 'vue'

const app = createApp(App)
install(app, { /* options */ })
```

### Response
无返回值。
```

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

### previewImage Usage Example

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/03-文件工具与打印.md

Example of calling VxeUI.previewImage with a urlList of images and activeIndex set to 1 to start at the second image.

```typescript
import { VxeUI } from 'vxe-pc-ui'

VxeUI.previewImage({
  urlList: ['a.png', 'b.png', 'c.png'],
  activeIndex: 1
})
```

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

### LoadingController usage example

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/02-动态控制器.md

Example of showing and hiding the global loading indicator using VxeUI.loading.open and VxeUI.loading.close.

```typescript
VxeUI.loading.open({ text: '加载中...' })
// 耗时操作...
VxeUI.loading.close()
```

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

### npm install vxe-pc-ui

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/README.ja-JP.md

vxe-pc-ui をインストールするための npm コマンドです。テーブルと UI の使用セクションで最初に実行します。

```shell
npm install vxe-pc-ui
```

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

### 组件包导出模式（以 VxeInput 为例）

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/00-入口与安装.md

每个组件包遵循相同的导出模式，导出带 install 方法的组件常量、别名和默认导出。该示例展示了 VxeInput 组件的完整导出代码。

```ts
import { App } from 'vue'
import { VxeUI } from '@vxe-ui/core'
import VxeInputConstructor from './src/input'
import { dynamicApp } from '../dynamics'

export const VxeInput = Object.assign(VxeInputConstructor, {
  install (app: App) {
    app.component(VxeInputConstructor.name as string, VxeInputConstructor)
  }
})

dynamicApp.use(VxeInput)
VxeUI.component(VxeInputConstructor)

export const Input = VxeInput
export default VxeInput
```

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

### 按需注册 VxeButton 和 VxeInput

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/00-入口与安装.md

按需注册单个组件，不使用 install 方法，而是直接通过 app.use() 注册 VxeButton 和 VxeInput。

```ts
import { createApp } from 'vue'
import { VxeButton, VxeInput } from 'vxe-pc-ui'

const app = createApp(App)
app.use(VxeButton)
app.use(VxeInput)
app.mount('#app')
```

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

### VxeIcon usage examples

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/15-基础展示组件.md

Two examples showing an icon with size and a spinning icon with roll animation.

```html
<vxe-icon name="vxe-icon-close" size="20"></vxe-icon>
```

```html
<vxe-icon name="vxe-icon-spinner roll" roll></vxe-icon>
```

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

### ContextMenuController usage example

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/02-动态控制器.md

Example of opening a context menu with VxeUI.contextMenu.open, specifying position, options, and an event handler for option clicks.

```typescript
VxeUI.contextMenu.open({
  x: 100, y: 100,
  options: [
    { name: '复制', code: 'copy' },
    { name: '删除', code: 'delete' }
  ],
  events: {
    optionClick ({ option }) { console.log(option.code) }
  }
})
```

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

### DrawerController usage example

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/02-动态控制器.md

Example of opening a drawer with VxeUI.drawer.open and closing it with VxeUI.drawer.close. The open method returns a promise that resolves with 'exist' if the id already exists.

```typescript
VxeUI.drawer.open({
  title: '抽屉',
  content: '内容',
  onConfirm: () => console.log('ok')
}).then(type => {
  if (type === 'exist') { console.log('已存在同 id 抽屉') }
})

VxeUI.drawer.close('my-drawer')
```

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

### WatermarkController usage example

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/02-动态控制器.md

Example of loading a watermark with VxeUI.watermark.load and clearing it with VxeUI.watermark.clear.

```typescript
VxeUI.watermark.load({ content: '机密', rotate: -30 })
// 取消水印
VxeUI.watermark.clear()
```

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

### VxeUI.readFile usage examples

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/03-文件工具与打印.md

Example usage of VxeUI.readFile. The first call selects a single image with allowed types and shows error messages. The second call allows multiple files of any type without showing messages.

```ts
import { VxeUI } from 'vxe-pc-ui'

// 选择单个图片
VxeUI.readFile({ types: ['jpg', 'jpeg', 'png'] })
  .then(({ file }) => { /* 预览 file */ })
  .catch(({ status }) => { /* 用户取消或类型错误 */ })

// 多选任意类型且不弹窗
VxeUI.readFile({ multiple: true, types: ['*'], message: false })
  .then(({ files }) => { /* 批量处理 */ })
```

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

### VxeColorPicker usage example

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/07-日期与颜色选择.md

Basic usage of the color picker with v-model, clearable, type hex, and change event.

```html
<vxe-color-picker v-model="color" clearable type="hex" @change="onColor"></vxe-color-picker>
```

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

### VxeUI.setup(options?: VxeGlobalConfig): void (deprecated)

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/01-VxeUI-全局对象.md

Deprecated. Use `setConfig` instead.

```APIDOC
## VxeUI.setup(options?: VxeGlobalConfig): void (deprecated)

### Description
Deprecated. Use `setConfig` instead.

### Method
Function

### Parameters
- **options** (VxeGlobalConfig) - Optional - Global configuration object.

### Returns
void

### Example
```ts
import { VxeUI } from 'vxe-pc-ui'
VxeUI.setup({ size: 'medium' })
```
```

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

### get 方法类型定义

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/02-动态控制器.md

get 方法接受 id 并返回 VxeModalConstructor 实例。

```ts
get(id: string): VxeModalConstructor
```

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

### 配置全局权限、国际化与语言（examples/main.ts）

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/01-VxeUI-全局对象.md

在 `examples/main.ts` 中，通过 `VxeUI.setConfig` 设置权限判断方法 `permissionMethod`，返回 `{ visible, disabled }` 供带 `permissionCode` 的组件调用；同时设置国际化语言包和当前语言。

```ts
VxeUI.setConfig({
  permissionMethod ({ code }) {
    if (code === 'xx') {
      return { visible: true, disabled: true }
    }
    return { visible: false, disabled: true }
  }
})

VxeUI.setI18n('en-US', enUS)
VxeUI.setLanguage((localStorage.getItem('VXE_LANGUAGE') as 'zh-CN' | 'en-US') || 'zh-CN')
```

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

### VxeDivider usage examples

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/15-基础展示组件.md

Two examples showing a divider with a centered title and a vertical divider.

```html
<vxe-divider title-content="分割标题" title-align="center"></vxe-divider>
```

```html
<vxe-divider vertical></vxe-divider>
```

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

### VxeTag usage example

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/15-基础展示组件.md

Example of a closable tag with success status and a close event handler.

```html
<vxe-tag content="成功" status="success" closable @close="onClose"></vxe-tag>
```

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

### createComponentLog 实现

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/01-VxeUI-全局对象.md

从 packages/ui/src/log.ts 中提取，使用 VxeUI.log.create 创建 warnLog 和 errLog。

```ts
const { log } = VxeUI
export function createComponentLog (name: string) {
  return {
    warnLog: log.create('warn', versionInfo + '] [' + name),
    errLog: log.create('error', versionInfo + '] [' + name)
  }
}
```

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

### VxeUI.modal.open(options)

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/02-动态控制器.md

以编程方式打开一个模态框窗口。返回一个 Promise，解析为窗口关闭方式。如果相同 id 的窗口已存在，则不会新建窗口，Promise 以 'exist' 解析。

```APIDOC
## VxeUI.modal.open(options)

### Description
以编程方式打开一个模态框窗口。返回一个 Promise，解析为窗口关闭方式。如果相同 id 的窗口已存在，则不会新建窗口，Promise 以 'exist' 解析。

### Method
open

### Endpoint
VxeUI.modal.open

### Parameters
#### Request Body
- **options** (VxeModalDefines.ModalOptions) - Required - 模态框配置，包含 VxeModalProps 和 VxeModalEventProps，以及可选的 key 字段。

### Request Example
```ts
VxeUI.modal.open({
  title: '模态',
  content: '内容',
  status: 'info',
  onConfirm () { console.log('确认') }
}).then(type => console.log('关闭方式', type))
```

### Response
#### Success Response
- **Promise<ModalEventTypes>** - 解析为窗口关闭方式，可能值为 'model' | 'mask' | 'close' | 'confirm' | 'cancel' | 'exit' | 'exist'。

#### Response Example
```ts
// 返回 Promise，例如 .then(type => console.log(type))
```
```

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

### VxeCascader usage example

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/06-下拉选择.md

HTML example of using the VxeCascader component with a v-model binding, options, clearable, show-full-label, and a change event handler.

```html
<vxe-cascader v-model="area" :options="areas" clearable show-full-label
              @change="onAreaChange"></vxe-cascader>
```

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

### VxeUI.uiVersion: string

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/01-VxeUI-全局对象.md

Base library version.

```APIDOC
## VxeUI.uiVersion: string

### Description
Base library version.

### Method
Property

### Type
- **string** - Version string.

### Example
```ts
import { VxeUI } from 'vxe-pc-ui'
console.log(VxeUI.uiVersion)
```
```

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

### VxeAvatar image and text examples

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/15-基础展示组件.md

Two avatar examples: one with an image source and circle shape, another with text content and primary status. The 'status' prop applies a color style.

```html
<vxe-avatar src="/img/u.png" circle></vxe-avatar>
<vxe-avatar content="张" status="primary"></vxe-avatar>
```

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

### VxeBadge basic usage

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/15-基础展示组件.md

Renders a badge with content '新', count '5', and small size. The 'count' prop displays a numeric badge, while 'content' sets the text. 'dot' enables dot mode.

```html
<vxe-badge content="新" count="5" size="small"></vxe-badge>
```

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

### VxeUI.saveFile usage examples

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/03-文件工具与打印.md

Example usage of VxeUI.saveFile to download a CSV string and a Blob. The first call uses a string content with type 'csv', the second uses a Blob with type 'txt'.

```ts
import { VxeUI } from 'vxe-pc-ui'

VxeUI.saveFile({ filename: '报表', type: 'csv', content: 'a,b,c\n1,2,3' })

// 导出 Blob
const blob = new Blob(['hello'], { type: 'text/plain;charset=utf-8' })
VxeUI.saveFile({ filename: 'note', type: 'txt', content: blob })
```

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

### setTheme(theme: string): void

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/01-VxeUI-全局对象.md

Switches the theme.

```APIDOC
## setTheme(theme: string): void

### Description
Switches the theme.

### Method
Function

### Parameters
- **theme** (string) - Required - The theme name.

### Returns
void

### Example
```ts
import { VxeUI } from 'vxe-pc-ui'
VxeUI.setTheme('dark')
```
```

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

### Standard component type export pattern (Input example)

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/types.md

This block shows the consistent type export pattern used by every Vxe UI component, using Input as an example. It declares the component constant, option/instance types, constructor interface, props, methods, events, slots, and more.

```typescript
export declare const VxeInput: DefineVxeComponentApp<VxeInputProps, VxeInputEventProps, VxeInputSlots, VxeInputMethods>
export type VxeInputComponent = DefineVxeComponentOptions<VxeInputProps, VxeInputEventProps>
export type VxeInputInstance = DefineVxeComponentInstance<VxeInputProps, VxeInputConstructor>
export interface VxeInputConstructor extends VxeComponentBaseOptions, VxeInputMethods { ... }
export interface VxeInputProps { ... }
export interface VxeInputMethods extends InputMethods { ... }
export type VxeInputEmits = [...]            // 事件名字元组
export type VxeInputEventProps = { 'onUpdate:modelValue'?: ...; onChange?: ... }
export interface VxeInputListeners { ... }  // 监听器
export namespace VxeInputEvents { ... }     // 事件签名
export namespace VxeInputDefines { ... }     // 领域类型
export namespace VxeInputSlotTypes { ... }
export interface VxeInputSlots { ... }
export const Input: typeof VxeInput
export default VxeInput
```

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

### VxeUI.drawer: DrawerController

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/01-VxeUI-全局对象.md

Global drawer controller with open/get/close methods.

```APIDOC
## VxeUI.drawer: DrawerController

### Description
Global drawer controller with open/get/close methods.

### Method
Property

### Type
- **DrawerController** - Controller object.

### Example
```ts
import { VxeUI } from 'vxe-pc-ui'
VxeUI.drawer.open({ title: 'Drawer' })
```
```

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

### VxeUI.getComponent(name: string): any

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/01-VxeUI-全局对象.md

Gets a component by name from the global component pool.

```APIDOC
## VxeUI.getComponent(name: string): any

### Description
Gets a component by name from the global component pool.

### Method
Function

### Parameters
- **name** (string) - Required - The component name (e.g., 'vxe-modal').

### Returns
- **any** - The component definition, or undefined if not found.

### Example
```ts
import { VxeUI } from 'vxe-pc-ui'
const modal = VxeUI.getComponent('vxe-modal')
```
```

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

### UIComponents / AllComponents / VxeGlobalComponents

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/types.md

组件类型接口，用于全局组件类型提示。

```APIDOC
## UIComponents / AllComponents / VxeGlobalComponents

### Description
定义组件类型接口，UIComponents 包含 97 个组件属性，AllComponents 扩展 UIComponents 并追加 vxe-table、vxe-design、vxe-gantt 组件。VxeGlobalComponents 用于全局组件类型提示。

### Method
interface

### Parameters
#### Properties
- **VxeAlert** (typeof VxeAlert) - Required - 组件类型
- **VxeColumn** (typeof VxeColumn) - Required - vxe-table 组件
- **VxeColgroup** (typeof VxeColgroup) - Required - vxe-table 组件
- **VxeTable** (typeof VxeTable) - Required - vxe-table 组件
- **VxeGrid** (typeof VxeGrid) - Required - vxe-table 组件
- **VxeToolbar** (typeof VxeToolbar) - Required - vxe-table 组件
- **VxeFlowDesign** (typeof VxeFlowDesign) - Required - vxe-design 组件
- **VxeFlowView** (typeof VxeFlowView) - Required - vxe-design 组件
- **VxeFormDesign** (typeof VxeFormDesign) - Required - vxe-design 组件
- **VxeFormView** (typeof VxeFormView) - Required - vxe-design 组件
- **VxeListDesign** (typeof VxeListDesign) - Required - vxe-design 组件
- **VxeListView** (typeof VxeListView) - Required - vxe-design 组件
- **VxeGantt** (typeof VxeGantt) - Required - vxe-gantt 组件

### Request Example
```ts
import type { UIComponents, AllComponents, VxeGlobalComponents } from 'vxe-pc-ui'
```

### Response
#### Success Response (void)
无返回值。
```

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

### VxeUI.loading: LoadingController

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/01-VxeUI-全局对象.md

Global loading controller with open/close methods.

```APIDOC
## VxeUI.loading: LoadingController

### Description
Global loading controller with open/close methods.

### Method
Property

### Type
- **LoadingController** - Controller object.

### Example
```ts
import { VxeUI } from 'vxe-pc-ui'
VxeUI.loading.open()
```
```

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

### VxeTransfer usage example

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/06-下拉选择.md

Basic usage of VxeTransfer with v-model, options, and show-checkbox.

```html
<vxe-transfer v-model="selected" :options="datas" show-checkbox></vxe-transfer>
```

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

### VxeUI.config(options?: VxeGlobalConfig): void (deprecated)

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/01-VxeUI-全局对象.md

Deprecated. Use `setConfig` instead.

```APIDOC
## VxeUI.config(options?: VxeGlobalConfig): void (deprecated)

### Description
Deprecated. Use `setConfig` instead.

### Method
Function

### Parameters
- **options** (VxeGlobalConfig) - Optional - Global configuration object.

### Returns
void

### Example
```ts
import { VxeUI } from 'vxe-pc-ui'
VxeUI.config({ size: 'medium' })
```
```

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

### VxeSelect

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/06-下拉选择.md

Documentation for the VxeSelect component, including props, methods, events, and usage examples.

```APIDOC
## VxeSelect

### Description
VxeSelect is the core select component. It supports single and multiple selection, filtering, remote loading, and various panel configurations.

### Props

| Prop | Type | Default |
|------|------|---------|
| `modelValue` | `string \| number \| boolean \| null \| undefined \| (string \| number \| boolean)[]` | — |
| `emptyValue` | `ModelValue` | `null` |
| `options` | `VxeSelectDefines.SelectOptions[]` | — |
| `optionProps` | `{ label?, value?, ... }` | — |
| `optionGroups` | `SelectOptgroups[]` | — |
| `multiple` | `boolean` | — |
| `multiCharOverflow` | `number \| string` | `8` |
| `max` | `number` | — |
| `clearable` | `boolean` | — |
| `placeholder` | `string` | — |
| `showRadio` / `radioConfig` | `boolean` / `{ showIcon: true; trigger: 'option' }` | — |
| `showCheckbox` / `checkboxConfig` | `boolean` / `{ showIcon: true; trigger: 'option' }` | — |
| `filterable` / `filterMethod` / `filterConfig` | `boolean` / `(params) => ...` | — |
| `remote` / `remoteMethod` / `remoteConfig` | `boolean` / function / `{ enabled: true; autoLoad: true }` | — |
| `allowCreate` | `boolean` | — |
| `lazyOptions` | `SelectOptions[]` | — |
| `checkedClosable` / `clearClosable` | `boolean` | — |
| `showTotalButton` / `showCheckedButton` / `showClearButton` / `showCloseButton` | `boolean` | — |
| `prefixIcon` | `string` | — |
| `placement` | `'top' \| 'bottom' \| ''` | — |
| `transfer` | `boolean` | — |
| `zIndex` / `popupClassName` / `popupConfig` | `number` / `string \| fn` / config | — |
| `scrollY` / `virtualYConfig` | — | — |
| `defaultConfig` | `DefaultConfig` | — |

### Methods

```ts
dispatchEvent(type: ValueOf<VxeSelectEmits>, params: Record<string, any>, evnt: Event | null): void
loadData(data: any[]): Promise<any>
reloadData(data: any[]): Promise<any>
recalculate(): Promise<void>
isPanelVisible(): boolean
togglePanel(): Promise<any>
showPanel(): Promise<any>
hidePanel(): Promise<any>
refreshOption(): Promise<any>
clearScroll(): Promise<void>
focus(): Promise<any>
blur(): Promise<any>
```

### Events

`VxeSelectEmits`: `['update:modelValue', 'change', 'default-change', 'all-change', 'clear', 'focus', 'blur', 'click', 'scroll', 'visible-change']`

- `change` parameter: `{ value }`
- `click` parameter: `{ triggerButton, visible }`

### Usage Example

```html
<vxe-select v-model="type" :options="[{ label: 'A', value: 'a' }, { label: 'B', value: 'b' }]"
            clearable filterable @change="onChange"></vxe-select>

<vxe-select v-model="multi" multiple :max="3" show-checkbox
            :options="options" @all-change="onAllChange"></vxe-select>
```

```ts
const $select = ref<any>()
// <vxe-select ref="$select" ...></vxe-select>

// 重置选项并选中
$select.value.loadData([{ label: '新选项', value: 'new' }])
$select.value.showPanel()
$select.value.hidePanel()
```
```

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

### VxeUI.log.create(type: 'warn' | 'error', prefix: string): (msgKey: string, args?: any[]) => void

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/01-VxeUI-全局对象.md

Creates a log function with a specific type and prefix.

```APIDOC
## VxeUI.log.create(type: 'warn' | 'error', prefix: string): (msgKey: string, args?: any[]) => void

### Description
Creates a log function with a specific type and prefix.

### Method
Function

### Parameters
- **type** ('warn' | 'error') - Required - Log level.
- **prefix** (string) - Required - Prefix for the log message.

### Returns
- **Function** - A function that takes a message key and optional arguments.

### Example
```ts
import { VxeUI } from 'vxe-pc-ui'
const warnLog = VxeUI.log.create('warn', 'my-component')
warnLog('some.message')
```
```

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

### VxePulldown usage example

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/06-下拉选择.md

Basic usage of VxePulldown with v-model, default slot, and popup slot.

```html
<vxe-pulldown v-model="open">
  <template #default>
    <vxe-button content="点击弹出"></vxe-button>
  </template>
  <template #popup>
    <div>弹出内容</div>
  </template>
</vxe-pulldown>
```

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

### VxeUI.component(component: any): void

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/01-VxeUI-全局对象.md

Registers a component into the global component pool.

```APIDOC
## VxeUI.component(component: any): void

### Description
Registers a component into the global component pool.

### Method
Function

### Parameters
- **component** (any) - Required - The component definition to register.

### Returns
void

### Example
```ts
import { VxeUI } from 'vxe-pc-ui'
VxeUI.component(MyComponent)
```
```

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

### VxeDrawer

Source: https://github.com/x-extends/vxe-pc-ui/blob/main/_autodocs/api-reference/10-弹窗与抽屉.md

Documentation for the VxeDrawer component, including its props, instance methods, events, and usage examples.

```APIDOC
## VxeDrawer

### Description
VxeDrawer is a floating layer container component. This section covers its props, instance methods, and events.

### Props

| Prop | Type | Description |
|------|------|-------------|
| `modelValue` | `boolean` | Whether the drawer is open (v-model) |
| `id` | `string` | Unique identifier (used by `VxeUI.drawer.get(id)`) |
| `type` | `'alert' \| 'confirm' \| 'message' \| 'notification' \| 'drawer'` | Drawer type |
| `status` | `'info' \| 'success' \| 'warning' \| 'question' \| 'error' \| 'loading'` | Status icon |
| `loading` | `boolean` | Loading state |
| `title` | `string` | Title |
| `content` | `string` | Content |
| `useHtml` | `boolean` | Whether content is rendered as HTML |
| `size` | `VxeComponentSizeType` or number | Size |
| `width` / `height` / `minWidth` / `minHeight` | `number` | Dimensions |
| `top` | `number` | Top spacing |
| `position` | `string` | Positioning |
| `zIndex` | `number` | Z-index |
| `marginSize` | `number` | Multi-window offset spacing |
| `showHeader` / `showFooter` / `showTitleBackground` / `showTitleOverflow` | `boolean` | Header/footer/title background/title overflow |
| `showClose` / `showZoom` / `showMinimize` / `showMaximize` | `boolean` | Top-right buttons |
| `zoomConfig` | `object` | Zoom configuration |
| `dblclickZoom` | `boolean` | Double-click title to zoom |
| `draggable` | `boolean` | Draggable |
| `resize` | `boolean` | Resizable |
| `lockView` / `lockScroll` / `mask` / `maskClosable` | `boolean` | View lock / scroll lock / mask / click mask to close |
| `escClosable` / `cancelClosable` / `confirmClosable` | `boolean` | ESC / cancel button / confirm button close |
| `showCancelButton` / `cancelButtonText` / `showConfirmButton` / `confirmButtonText` | `boolean` / `string` | Buttons |
| `fullscreen` | `boolean` | Fullscreen |
| `remember` / `storage` / `storageKey` | `boolean` / `string` | Position memory |
| `destroyOnClose` | `boolean` | Destroy content on close |
| `beforeHideMethod` | `(params: { type }) => boolean \| Promise<boolean>` | Callback before close |
| `appendTo` / `transfer` / `isWithinAppendTo` | `string` / `boolean` | Mount position |
| `preload` | `boolean` | Preload content |
| `message` | `string` | Message content |
| `slots` / `className` / `padding` / `animat` | `object` / `string` / `boolean` | Slots/style/animation |

### Methods

```ts
dispatchEvent(type: ValueOf<VxeDrawerEmits>, params: Record<string, any>, evnt: Event | null): void
open(): Promise<any>                                   // Manually open
close(): Promise<any>                                  // Manually close
getBox(): HTMLElement                                 // Window element
getPosition(): { top?: number; left?: number } | null  // Current position
setPosition(top?: number, left?: number): Promise<any>
isMinimized(): boolean
isMaximized(): boolean
zoom(type?: '' | 'minimize' | 'maximize' | 'revert'): Promise<'minimize' | 'maximize' | 'revert'>
minimize(): Promise<{ status: boolean }>               // Minimize when in normal state
maximize(): Promise<{ status: boolean }>               // Maximize when in normal state
revert(): Promise<{ status: boolean }>                 // Revert when maximized/minimized
```

`zoom(type)` without `type` automatically toggles between maximize/revert/minimize.

### Events

`VxeDrawerEmits`: `['update:modelValue', 'show', 'hide', 'before-hide', 'confirm', 'cancel', 'close', 'zoom', 'resize', 'move']`

Event parameters are defined in `VxeDrawerDefines`.

### Example

```html
<vxe-drawer v-model="open" title="标题" size="medium" draggable
           @confirm="onConfirm" @before-hide="onBeforeHide">
  <template #default>
    <div>内容</div>
  </template>
</vxe-drawer>
```

```ts
const $drawer = ref<any>()
// <vxe-drawer ref="$drawer" ...></vxe-drawer>

$drawer.value.open()
$drawer.value.setPosition(100, 100)
$drawer.value.zoom('maximize')
```
```
Tokens:
Raw