mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-12 16:40:40 +08:00
refactor: 架构升级
This commit is contained in:
@@ -0,0 +1,71 @@
|
||||
# Component API
|
||||
|
||||
## API Reference
|
||||
|
||||
uView Pro component props, events, and methods.
|
||||
|
||||
### Common Props
|
||||
|
||||
Most components support:
|
||||
- `custom-class` - Custom class name
|
||||
- `custom-style` - Custom style object
|
||||
- `disabled` - Disabled state
|
||||
|
||||
### Common Events
|
||||
|
||||
Most components emit:
|
||||
- `@click` - Click event
|
||||
- `@change` - Change event
|
||||
- `@focus` - Focus event
|
||||
- `@blur` - Blur event
|
||||
|
||||
### Button Component
|
||||
|
||||
**Props:**
|
||||
- `type` - Button type (primary, success, info, warning, error)
|
||||
- `size` - Button size (large, normal, small, mini)
|
||||
- `disabled` - Disabled state
|
||||
- `loading` - Loading state
|
||||
- `plain` - Plain button
|
||||
- `shape` - Button shape (circle, round)
|
||||
- `icon` - Icon name
|
||||
|
||||
**Events:**
|
||||
- `@click` - Click event
|
||||
|
||||
### Input Component
|
||||
|
||||
**Props:**
|
||||
- `v-model` - Input value
|
||||
- `type` - Input type (text, number, password, textarea)
|
||||
- `size` - Input size (large, normal, small)
|
||||
- `disabled` - Disabled state
|
||||
- `readonly` - Readonly state
|
||||
- `clearable` - Show clear button
|
||||
- `border` - Show border
|
||||
- `prefix-icon` - Prefix icon
|
||||
- `suffix-icon` - Suffix icon
|
||||
|
||||
**Events:**
|
||||
- `@input` - Input event
|
||||
- `@change` - Change event
|
||||
- `@focus` - Focus event
|
||||
- `@blur` - Blur event
|
||||
|
||||
### Form Component
|
||||
|
||||
**Props:**
|
||||
- `model` - Form data object
|
||||
- `rules` - Validation rules
|
||||
- `label-width` - Label width
|
||||
|
||||
**Methods:**
|
||||
- `validate` - Validate form
|
||||
- `validateField` - Validate specific field
|
||||
- `resetFields` - Reset form fields
|
||||
- `clearValidate` - Clear validation
|
||||
|
||||
**Events:**
|
||||
- `@validate` - Validation event
|
||||
|
||||
**See also:** `examples/components/` for detailed component examples
|
||||
@@ -0,0 +1,80 @@
|
||||
# Configuration API
|
||||
|
||||
## API Reference
|
||||
|
||||
uView Pro global configuration options.
|
||||
|
||||
### Global Config Options
|
||||
|
||||
When using `app.use(uView, options)`, you can pass:
|
||||
|
||||
```typescript
|
||||
interface uViewOptions {
|
||||
locale?: string
|
||||
theme?: string
|
||||
}
|
||||
```
|
||||
|
||||
### ConfigProvider Props
|
||||
|
||||
**Props:**
|
||||
- `locale` - Global locale (zh-cn, en-us)
|
||||
- `theme` - Global theme (light, dark)
|
||||
|
||||
### Example: Global Config
|
||||
|
||||
```javascript
|
||||
import { createSSRApp } from 'vue'
|
||||
import uView from 'uview-pro'
|
||||
import App from './App.vue'
|
||||
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
app.use(uView, {
|
||||
locale: 'zh-cn',
|
||||
theme: 'light'
|
||||
})
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example: ConfigProvider
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<u-config-provider :locale="locale" :theme="theme">
|
||||
<u-button>Button</u-button>
|
||||
</u-config-provider>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const locale = ref('zh-cn')
|
||||
const theme = ref('light')
|
||||
</script>
|
||||
```
|
||||
|
||||
### Locale Configuration
|
||||
|
||||
**Options:**
|
||||
- `'zh-cn'` - Chinese (Simplified)
|
||||
- `'en-us'` - English (US)
|
||||
|
||||
### Theme Configuration
|
||||
|
||||
**Options:**
|
||||
- `'light'` - Light theme
|
||||
- `'dark'` - Dark theme
|
||||
|
||||
### Component Config
|
||||
|
||||
Components can be configured individually:
|
||||
|
||||
```vue
|
||||
<u-button :config="{ size: 'large' }">Button</u-button>
|
||||
```
|
||||
|
||||
**See also:** `examples/guide/config.md` for configuration examples
|
||||
@@ -0,0 +1,95 @@
|
||||
# Props and Events
|
||||
|
||||
## API Reference
|
||||
|
||||
Common props and events in uView Pro components.
|
||||
|
||||
### Common Props
|
||||
|
||||
#### custom-class
|
||||
|
||||
**Type:** `string`
|
||||
|
||||
Custom CSS class name.
|
||||
|
||||
#### custom-style
|
||||
|
||||
**Type:** `string | object`
|
||||
|
||||
Custom inline style.
|
||||
|
||||
#### disabled
|
||||
|
||||
**Type:** `boolean`
|
||||
|
||||
**Default:** `false`
|
||||
|
||||
Whether component is disabled.
|
||||
|
||||
### Common Events
|
||||
|
||||
#### @click
|
||||
|
||||
**Type:** `Function`
|
||||
|
||||
Click event handler.
|
||||
|
||||
**Example:**
|
||||
```vue
|
||||
<u-button @click="handleClick">Button</u-button>
|
||||
```
|
||||
|
||||
#### @change
|
||||
|
||||
**Type:** `Function`
|
||||
|
||||
Change event handler.
|
||||
|
||||
**Example:**
|
||||
```vue
|
||||
<u-input v-model="value" @change="handleChange" />
|
||||
```
|
||||
|
||||
#### @focus
|
||||
|
||||
**Type:** `Function`
|
||||
|
||||
Focus event handler.
|
||||
|
||||
**Example:**
|
||||
```vue
|
||||
<u-input @focus="handleFocus" />
|
||||
```
|
||||
|
||||
#### @blur
|
||||
|
||||
**Type:** `Function`
|
||||
|
||||
Blur event handler.
|
||||
|
||||
**Example:**
|
||||
```vue
|
||||
<u-input @blur="handleBlur" />
|
||||
```
|
||||
|
||||
### Event Object
|
||||
|
||||
Event handlers receive an event object:
|
||||
|
||||
```javascript
|
||||
handleEvent(event) {
|
||||
// event.target - Target element
|
||||
// event.currentTarget - Current target element
|
||||
// event.detail - Event detail (component-specific)
|
||||
}
|
||||
```
|
||||
|
||||
### Component-Specific Events
|
||||
|
||||
Different components emit different events:
|
||||
- **Input**: @input, @change, @focus, @blur
|
||||
- **Select**: @change, @open, @close
|
||||
- **Form**: @validate
|
||||
- **Button**: @click
|
||||
|
||||
**See also:** `examples/components/` for component-specific examples
|
||||
@@ -0,0 +1,69 @@
|
||||
# Tools API
|
||||
|
||||
## API Reference
|
||||
|
||||
uView Pro tools and utility methods.
|
||||
|
||||
### HTTP Request
|
||||
|
||||
**request(options)**
|
||||
- `url` - Request URL
|
||||
- `method` - Request method (GET, POST, PUT, DELETE)
|
||||
- `data` - Request data
|
||||
- `header` - Request headers
|
||||
- `timeout` - Request timeout
|
||||
|
||||
**Interceptors:**
|
||||
- `request.interceptors.request.use()` - Request interceptor
|
||||
- `request.interceptors.response.use()` - Response interceptor
|
||||
|
||||
### Storage
|
||||
|
||||
**setStorage(key, value)**
|
||||
- Set storage value
|
||||
|
||||
**getStorage(key)**
|
||||
- Get storage value
|
||||
|
||||
**removeStorage(key)**
|
||||
- Remove storage value
|
||||
|
||||
**clearStorage()**
|
||||
- Clear all storage
|
||||
|
||||
### Router
|
||||
|
||||
**navigateTo(options)**
|
||||
- Navigate to page
|
||||
|
||||
**redirectTo(options)**
|
||||
- Redirect to page
|
||||
|
||||
**navigateBack(options)**
|
||||
- Navigate back
|
||||
|
||||
**switchTab(options)**
|
||||
- Switch tab
|
||||
|
||||
### Validator
|
||||
|
||||
**validate(value, rules)**
|
||||
- Validate value with rules
|
||||
|
||||
### Format
|
||||
|
||||
**formatDate(date, format)**
|
||||
- Format date
|
||||
|
||||
**formatNumber(number, format)**
|
||||
- Format number
|
||||
|
||||
### Color
|
||||
|
||||
**colorToRgb(color)**
|
||||
- Convert color to RGB
|
||||
|
||||
**colorToHex(color)**
|
||||
- Convert color to HEX
|
||||
|
||||
**See also:** `examples/tools/` for detailed tool examples
|
||||
Reference in New Issue
Block a user