mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-13 00:50:40 +08:00
refactor: 架构升级
This commit is contained in:
小莫唐尼
@@ -0,0 +1,84 @@
|
||||
# Button Component
|
||||
|
||||
**官方文档**: https://uviewpro.cn
|
||||
|
||||
|
||||
## Instructions
|
||||
|
||||
This example demonstrates the Button component in uView Pro.
|
||||
|
||||
### Key Concepts
|
||||
|
||||
- Button types
|
||||
- Button sizes
|
||||
- Button states
|
||||
- Button events
|
||||
|
||||
### Example: Basic Button
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<u-button>Default</u-button>
|
||||
<u-button type="primary">Primary</u-button>
|
||||
<u-button type="success">Success</u-button>
|
||||
<u-button type="info">Info</u-button>
|
||||
<u-button type="warning">Warning</u-button>
|
||||
<u-button type="error">Error</u-button>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example: Button Sizes
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<u-button size="large">Large</u-button>
|
||||
<u-button size="normal">Normal</u-button>
|
||||
<u-button size="small">Small</u-button>
|
||||
<u-button size="mini">Mini</u-button>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example: Button States
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<u-button disabled>Disabled</u-button>
|
||||
<u-button loading>Loading</u-button>
|
||||
<u-button plain>Plain</u-button>
|
||||
<u-button shape="circle">Circle</u-button>
|
||||
<u-button shape="round">Round</u-button>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example: Button Events
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<u-button type="primary" @click="handleClick">
|
||||
Click Me
|
||||
</u-button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const handleClick = () => {
|
||||
console.log('Button clicked')
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example: Button with Icon
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<u-button icon="search">Search</u-button>
|
||||
<u-button icon="heart" icon-color="#f56c6c">Like</u-button>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Key Points
|
||||
|
||||
- Multiple types: primary, success, info, warning, error
|
||||
- Multiple sizes: large, normal, small, mini
|
||||
- Support disabled, loading, plain, shape
|
||||
- Icon support
|
||||
- Custom styling with custom-class or custom-style
|
||||
@@ -0,0 +1,106 @@
|
||||
# Form Component
|
||||
|
||||
**官方文档**: https://uviewpro.cn
|
||||
|
||||
|
||||
## Instructions
|
||||
|
||||
This example demonstrates the Form component in uView Pro.
|
||||
|
||||
### Key Concepts
|
||||
|
||||
- Form structure
|
||||
- Form validation
|
||||
- Form rules
|
||||
- Form submission
|
||||
- Form fields
|
||||
|
||||
### Example: Basic Form
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<u-form :model="form" label-width="120">
|
||||
<u-form-item label="Name" prop="name">
|
||||
<u-input v-model="form.name" />
|
||||
</u-form-item>
|
||||
<u-form-item label="Email" prop="email">
|
||||
<u-input v-model="form.email" />
|
||||
</u-form-item>
|
||||
<u-form-item>
|
||||
<u-button type="primary" @click="handleSubmit">Submit</u-button>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const form = ref({
|
||||
name: '',
|
||||
email: ''
|
||||
})
|
||||
|
||||
const handleSubmit = () => {
|
||||
console.log('Form:', form.value)
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example: Form Validation
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<u-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="120"
|
||||
>
|
||||
<u-form-item label="Name" prop="name">
|
||||
<u-input v-model="form.name" />
|
||||
</u-form-item>
|
||||
<u-form-item label="Email" prop="email">
|
||||
<u-input v-model="form.email" />
|
||||
</u-form-item>
|
||||
<u-form-item>
|
||||
<u-button type="primary" @click="handleSubmit">Submit</u-button>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const formRef = ref()
|
||||
const form = ref({
|
||||
name: '',
|
||||
email: ''
|
||||
})
|
||||
|
||||
const rules = {
|
||||
name: [
|
||||
{ required: true, message: 'Please input name', trigger: 'blur' }
|
||||
],
|
||||
email: [
|
||||
{ required: true, message: 'Please input email', trigger: 'blur' },
|
||||
{ type: 'email', message: 'Please input valid email', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
console.log('Form valid:', form.value)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Key Points
|
||||
|
||||
- Use :model for form data
|
||||
- Configure :rules for validation
|
||||
- Use prop for form-item validation
|
||||
- Handle form submission
|
||||
- Support form validation methods
|
||||
@@ -0,0 +1,110 @@
|
||||
# Input Component
|
||||
|
||||
**官方文档**: https://uviewpro.cn
|
||||
|
||||
|
||||
## Instructions
|
||||
|
||||
This example demonstrates the Input component in uView Pro.
|
||||
|
||||
### Key Concepts
|
||||
|
||||
- Input types
|
||||
- Input sizes
|
||||
- Input states
|
||||
- Input events
|
||||
- Input validation
|
||||
|
||||
### Example: Basic Input
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<u-input v-model="input" placeholder="Please input" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
const input = ref('')
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example: Input Types
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<u-input v-model="text" type="text" />
|
||||
<u-input v-model="number" type="number" />
|
||||
<u-input v-model="password" type="password" :password-icon="true" />
|
||||
<u-input v-model="textarea" type="textarea" :height="100" />
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example: Input Sizes
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<u-input v-model="input1" size="large" />
|
||||
<u-input v-model="input2" size="normal" />
|
||||
<u-input v-model="input3" size="small" />
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example: Input States
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<u-input v-model="input" disabled />
|
||||
<u-input v-model="input" readonly />
|
||||
<u-input v-model="input" :clearable="true" />
|
||||
<u-input v-model="input" :border="true" />
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example: Input with Prefix/Suffix
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<u-input v-model="input1" prefix-icon="search" />
|
||||
<u-input v-model="input2" suffix-icon="arrow-down" />
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example: Input Events
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<u-input
|
||||
v-model="input"
|
||||
@input="handleInput"
|
||||
@change="handleChange"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
const input = ref('')
|
||||
|
||||
const handleInput = (value) => {
|
||||
console.log('Input:', value)
|
||||
}
|
||||
const handleChange = (value) => {
|
||||
console.log('Change:', value)
|
||||
}
|
||||
const handleFocus = () => {
|
||||
console.log('Focus')
|
||||
}
|
||||
const handleBlur = () => {
|
||||
console.log('Blur')
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Key Points
|
||||
|
||||
- Use v-model for two-way binding
|
||||
- Support multiple input types
|
||||
- Support disabled, readonly, clearable
|
||||
- Prefix and suffix icon support
|
||||
- Multiple event handlers
|
||||
@@ -0,0 +1,54 @@
|
||||
# Components Introduction
|
||||
|
||||
**官方文档**: https://uviewpro.cn
|
||||
|
||||
|
||||
## Instructions
|
||||
|
||||
This example provides an introduction to uView Pro components.
|
||||
|
||||
### Key Concepts
|
||||
|
||||
- Component categories
|
||||
- Component list
|
||||
- Component usage
|
||||
- Component features
|
||||
|
||||
### Example: Component Categories
|
||||
|
||||
**Basic Components (基础组件)**:
|
||||
- Button, Icon, Image, Layout, Cell, Badge, Tag, Text, Fab, RootPortal, ConfigProvider
|
||||
|
||||
**Form Components (表单组件)**:
|
||||
- Form, Input, Textarea, Calendar, Select, Keyboard, Picker, Rate, Search, NumberBox, Upload, VerificationCode, Field, Checkbox, Radio, Switch, Slider
|
||||
|
||||
**Data Components (数据组件)**:
|
||||
- CircleProgress, LineProgress, Table, CountDown, CountTo
|
||||
|
||||
**Feedback Components (反馈组件)**:
|
||||
- ActionSheet, AlertTips, Toast, NoticeBar, TopTips, Collapse, Popup, SwipeAction, Modal, FullScreen
|
||||
|
||||
**Layout Components (布局组件)**:
|
||||
- Line, Card, Mask, NoNetwork, Grid, Swiper, TimeLine, Skeleton, Sticky, Waterfall, Divider
|
||||
|
||||
**Navigation Components (导航组件)**:
|
||||
- Dropdown, Tabbar, BackTop, Navbar, Tabs, TabsSwiper, Subsection, IndexList, Steps, Empty, Link, Section, Pagination
|
||||
|
||||
**Other Components (其他组件)**:
|
||||
- MessageInput, Loadmore, ReadMore, LazyLoad, Gap, Avatar, Loading, LoadingPopup, SafeAreaInset, Todo
|
||||
|
||||
### Example: Component Usage
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<u-button type="primary">Button</u-button>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Key Points
|
||||
|
||||
- 100+ components available
|
||||
- Organized by category
|
||||
- Auto-import with easycom
|
||||
- Support Vue 3 Composition API
|
||||
- Consistent API design
|
||||
@@ -0,0 +1,68 @@
|
||||
# Configuration
|
||||
|
||||
**官方文档**: https://uviewpro.cn
|
||||
|
||||
|
||||
## Instructions
|
||||
|
||||
This example demonstrates how to configure uView Pro globally.
|
||||
|
||||
### Key Concepts
|
||||
|
||||
- Global config options
|
||||
- ConfigProvider
|
||||
- Theme configuration
|
||||
- Component configuration
|
||||
|
||||
### Example: Global Config
|
||||
|
||||
```javascript
|
||||
// main.js
|
||||
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: Using ConfigProvider
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<u-config-provider :theme="theme" :locale="locale">
|
||||
<u-button>Button</u-button>
|
||||
</u-config-provider>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const theme = ref('light')
|
||||
const locale = ref('zh-cn')
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example: Component Config
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<u-button :config="{ size: 'large' }">Button</u-button>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Key Points
|
||||
|
||||
- Configure globally via app.use()
|
||||
- Use ConfigProvider for component-level config
|
||||
- Support theme and locale configuration
|
||||
- Component-level config available
|
||||
- Follow uni-app configuration patterns
|
||||
@@ -0,0 +1,65 @@
|
||||
# Internationalization (i18n)
|
||||
|
||||
**官方文档**: https://uviewpro.cn
|
||||
|
||||
|
||||
## Instructions
|
||||
|
||||
This example demonstrates how to configure internationalization in uView Pro.
|
||||
|
||||
### Key Concepts
|
||||
|
||||
- Locale configuration
|
||||
- Language switching
|
||||
- Component i18n
|
||||
|
||||
### Example: Basic i18n Setup
|
||||
|
||||
```javascript
|
||||
// main.js
|
||||
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' // or 'en-us'
|
||||
})
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example: Language Switching
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<u-button @click="switchLanguage">Switch Language</u-button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getCurrentInstance } from 'vue'
|
||||
|
||||
const instance = getCurrentInstance()
|
||||
|
||||
const switchLanguage = () => {
|
||||
instance.appContext.config.globalProperties.$u.config({
|
||||
locale: 'en-us'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example: Component i18n
|
||||
|
||||
uView Pro components support i18n through global configuration.
|
||||
|
||||
### Key Points
|
||||
|
||||
- Configure locale in main.js
|
||||
- Support zh-cn and en-us
|
||||
- Switch language dynamically
|
||||
- Components automatically use configured locale
|
||||
- Customize locale messages if needed
|
||||
@@ -0,0 +1,80 @@
|
||||
# Installation
|
||||
|
||||
**官方文档**: https://uviewpro.cn
|
||||
|
||||
|
||||
## Instructions
|
||||
|
||||
This example demonstrates how to install uView Pro in a uni-app project.
|
||||
|
||||
### Key Concepts
|
||||
|
||||
- Package installation
|
||||
- uni_modules installation
|
||||
- Easycom configuration
|
||||
- Style import
|
||||
|
||||
### Example: Package Installation
|
||||
|
||||
```bash
|
||||
# Using npm
|
||||
npm install uview-pro
|
||||
|
||||
# Using yarn
|
||||
yarn add uview-pro
|
||||
|
||||
# Using pnpm
|
||||
pnpm add uview-pro
|
||||
```
|
||||
|
||||
### Example: uni_modules Installation
|
||||
|
||||
1. Download from uView Pro official website
|
||||
2. Copy to `uni_modules` directory
|
||||
3. Configure easycom in `pages.json`
|
||||
|
||||
### Example: Easycom Configuration
|
||||
|
||||
```json
|
||||
// pages.json
|
||||
{
|
||||
"easycom": {
|
||||
"autoscan": true,
|
||||
"custom": {
|
||||
"^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example: Main.js Setup
|
||||
|
||||
```javascript
|
||||
// main.js
|
||||
import { createSSRApp } from 'vue'
|
||||
import uView from 'uview-pro'
|
||||
import App from './App.vue'
|
||||
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
app.use(uView)
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example: Style Import
|
||||
|
||||
```scss
|
||||
// App.vue or main.js
|
||||
@import 'uview-pro/index.scss';
|
||||
```
|
||||
|
||||
### Key Points
|
||||
|
||||
- Install via npm or uni_modules
|
||||
- Configure easycom for auto-import
|
||||
- Import styles in App.vue or main.js
|
||||
- Use createSSRApp for uni-app
|
||||
- Support Vue 3 Composition API
|
||||
@@ -0,0 +1,49 @@
|
||||
# Introduction
|
||||
|
||||
**官方文档**: https://uviewpro.cn
|
||||
|
||||
|
||||
## Instructions
|
||||
|
||||
This example provides an introduction to uView Pro.
|
||||
|
||||
### Key Concepts
|
||||
|
||||
- What is uView Pro
|
||||
- Features
|
||||
- Platform support
|
||||
- Comparison with other libraries
|
||||
|
||||
### Example: What is uView Pro
|
||||
|
||||
uView Pro is a Vue 3 component library designed for uni-app development, based on uView 1.8.8 with complete refactoring, supporting Vue 3 and TypeScript.
|
||||
|
||||
### Example: Features
|
||||
|
||||
- **Vue 3 Support**: Built for Vue 3 with Composition API
|
||||
- **TypeScript**: Full TypeScript support
|
||||
- **Multi-platform**: Support Android, iOS, WeChat Mini Program, Alipay Mini Program, etc.
|
||||
- **Rich Components**: 100+ components
|
||||
- **Theme Customization**: Support for theme customization
|
||||
- **i18n**: Internationalization support
|
||||
- **Tools**: Rich utility methods
|
||||
|
||||
### Example: Platform Support
|
||||
|
||||
uView Pro supports:
|
||||
- Android
|
||||
- iOS
|
||||
- WeChat Mini Program
|
||||
- Alipay Mini Program
|
||||
- ByteDance Mini Program
|
||||
- QQ Mini Program
|
||||
- H5
|
||||
- And more
|
||||
|
||||
### Key Points
|
||||
|
||||
- Based on uView 1.8.8, completely refactored
|
||||
- Vue 3 and TypeScript support
|
||||
- Multi-platform compatibility
|
||||
- Rich component ecosystem
|
||||
- Active development and maintenance
|
||||
@@ -0,0 +1,88 @@
|
||||
# Quick Start
|
||||
|
||||
**官方文档**: https://uviewpro.cn
|
||||
|
||||
|
||||
## Instructions
|
||||
|
||||
This example provides a quick start guide for uView Pro.
|
||||
|
||||
### Key Concepts
|
||||
|
||||
- Basic setup
|
||||
- First component
|
||||
- Component usage
|
||||
- Project structure
|
||||
|
||||
### Example: Basic Setup
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-button type="primary">Button</u-button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Component is auto-imported if using easycom
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example: With Options API
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<u-button type="primary" @click="handleClick">
|
||||
Click Me
|
||||
</u-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleClick() {
|
||||
console.log('Button clicked')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example: With Composition API
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<u-button type="primary" @click="handleClick">
|
||||
Click Me
|
||||
</u-button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const handleClick = () => {
|
||||
console.log('Button clicked')
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example: Project Structure
|
||||
|
||||
```
|
||||
project/
|
||||
├── pages/
|
||||
│ └── index/
|
||||
│ ├── index.vue
|
||||
│ └── index.json
|
||||
├── uni_modules/
|
||||
│ └── uview-pro/
|
||||
├── App.vue
|
||||
├── main.js
|
||||
└── pages.json
|
||||
```
|
||||
|
||||
### Key Points
|
||||
|
||||
- Use u- prefix for components
|
||||
- Support both Options API and Composition API
|
||||
- Auto-import with easycom
|
||||
- Import styles globally
|
||||
- Follow uni-app project structure
|
||||
@@ -0,0 +1,75 @@
|
||||
# Theme Customization
|
||||
|
||||
**官方文档**: https://uviewpro.cn
|
||||
|
||||
|
||||
## Instructions
|
||||
|
||||
This example demonstrates how to customize uView Pro theme.
|
||||
|
||||
### Key Concepts
|
||||
|
||||
- Custom class
|
||||
- Custom style
|
||||
- Global theme variables
|
||||
- Style override
|
||||
|
||||
### Example: Custom Class
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<u-button custom-class="my-button">Button</u-button>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.my-button {
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example: Custom Style
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<u-button :custom-style="{ backgroundColor: '#409eff', color: '#fff' }">
|
||||
Button
|
||||
</u-button>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example: Global Theme Variables
|
||||
|
||||
```scss
|
||||
// uni.scss or App.vue
|
||||
$u-primary: #409eff;
|
||||
$u-success: #67c23a;
|
||||
$u-warning: #e6a23c;
|
||||
$u-error: #f56c6c;
|
||||
$u-info: #909399;
|
||||
```
|
||||
|
||||
### Example: Style Override with :deep()
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<u-button class="custom-button">Button</u-button>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-button {
|
||||
:deep(.u-button) {
|
||||
background-color: #409eff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Key Points
|
||||
|
||||
- Use custom-class for class-based styling
|
||||
- Use custom-style for inline styling
|
||||
- Override global theme variables
|
||||
- Use :deep() for style penetration
|
||||
- Support SCSS variables
|
||||
@@ -0,0 +1,77 @@
|
||||
# Layout Introduction
|
||||
|
||||
**官方文档**: https://uviewpro.cn
|
||||
|
||||
|
||||
## Instructions
|
||||
|
||||
This example provides an introduction to uView Pro layout templates.
|
||||
|
||||
### Key Concepts
|
||||
|
||||
- Layout categories
|
||||
- Layout usage
|
||||
- Responsive layout
|
||||
|
||||
### Example: Layout Categories
|
||||
|
||||
**Grid Layout (网格布局)**:
|
||||
- Grid system
|
||||
- Responsive grid
|
||||
- Grid columns
|
||||
|
||||
**Flex Layout (弹性布局)**:
|
||||
- Flex container
|
||||
- Flex items
|
||||
- Flex direction
|
||||
|
||||
**Container Layout (容器布局)**:
|
||||
- Container
|
||||
- Header
|
||||
- Content
|
||||
- Footer
|
||||
|
||||
### Example: Grid Layout
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<u-grid :col="3">
|
||||
<u-grid-item>
|
||||
<view>Item 1</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item>
|
||||
<view>Item 2</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item>
|
||||
<view>Item 3</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example: Flex Layout
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="flex-container">
|
||||
<view class="flex-item">Item 1</view>
|
||||
<view class="flex-item">Item 2</view>
|
||||
<view class="flex-item">Item 3</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.flex-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Key Points
|
||||
|
||||
- Multiple layout options
|
||||
- Responsive design
|
||||
- Easy to use
|
||||
- Well documented
|
||||
- Flexible configuration
|
||||
@@ -0,0 +1,101 @@
|
||||
# HTTP Request
|
||||
|
||||
**官方文档**: https://uviewpro.cn
|
||||
|
||||
|
||||
## Instructions
|
||||
|
||||
This example demonstrates HTTP request utilities in uView Pro.
|
||||
|
||||
### Key Concepts
|
||||
|
||||
- Request methods
|
||||
- Request interceptors
|
||||
- Response interceptors
|
||||
- Error handling
|
||||
|
||||
### Example: Basic Request
|
||||
|
||||
```javascript
|
||||
import { request } from 'uview-pro'
|
||||
|
||||
request({
|
||||
url: '/api/user',
|
||||
method: 'GET'
|
||||
}).then(res => {
|
||||
console.log('Response:', res)
|
||||
}).catch(err => {
|
||||
console.error('Error:', err)
|
||||
})
|
||||
```
|
||||
|
||||
### Example: POST Request
|
||||
|
||||
```javascript
|
||||
import { request } from 'uview-pro'
|
||||
|
||||
request({
|
||||
url: '/api/user',
|
||||
method: 'POST',
|
||||
data: {
|
||||
name: 'John',
|
||||
email: 'john@example.com'
|
||||
}
|
||||
}).then(res => {
|
||||
console.log('Response:', res)
|
||||
})
|
||||
```
|
||||
|
||||
### Example: Request Interceptor
|
||||
|
||||
```javascript
|
||||
import { request } from 'uview-pro'
|
||||
|
||||
request.interceptors.request.use(config => {
|
||||
// Add token
|
||||
config.header = {
|
||||
...config.header,
|
||||
'Authorization': 'Bearer token'
|
||||
}
|
||||
return config
|
||||
})
|
||||
```
|
||||
|
||||
### Example: Response Interceptor
|
||||
|
||||
```javascript
|
||||
import { request } from 'uview-pro'
|
||||
|
||||
request.interceptors.response.use(
|
||||
response => {
|
||||
return response.data
|
||||
},
|
||||
error => {
|
||||
console.error('Request error:', error)
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
### Example: Request Config
|
||||
|
||||
```javascript
|
||||
import { request } from 'uview-pro'
|
||||
|
||||
request({
|
||||
url: '/api/user',
|
||||
method: 'GET',
|
||||
header: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
timeout: 10000
|
||||
})
|
||||
```
|
||||
|
||||
### Key Points
|
||||
|
||||
- Support GET, POST, PUT, DELETE methods
|
||||
- Request and response interceptors
|
||||
- Error handling
|
||||
- Configurable timeout
|
||||
- Support custom headers
|
||||
@@ -0,0 +1,73 @@
|
||||
# Tools Introduction
|
||||
|
||||
**官方文档**: https://uviewpro.cn
|
||||
|
||||
|
||||
## Instructions
|
||||
|
||||
This example provides an introduction to uView Pro tools and utilities.
|
||||
|
||||
### Key Concepts
|
||||
|
||||
- Tool categories
|
||||
- Tool usage
|
||||
- Tool methods
|
||||
|
||||
### Example: Tool Categories
|
||||
|
||||
**HTTP Request (HTTP 请求)**:
|
||||
- Request methods
|
||||
- Request interceptors
|
||||
- Response interceptors
|
||||
|
||||
**Storage (存储)**:
|
||||
- setStorage, getStorage
|
||||
- removeStorage, clearStorage
|
||||
|
||||
**Router (路由)**:
|
||||
- navigateTo, redirectTo
|
||||
- navigateBack, switchTab
|
||||
|
||||
**Validator (验证)**:
|
||||
- Validation methods
|
||||
- Form validation
|
||||
|
||||
**Format (格式化)**:
|
||||
- Date format
|
||||
- Number format
|
||||
- Text format
|
||||
|
||||
**Color (颜色)**:
|
||||
- Color conversion
|
||||
- Color utilities
|
||||
|
||||
### Example: Using Tools
|
||||
|
||||
```javascript
|
||||
// HTTP Request
|
||||
import { request } from 'uview-pro'
|
||||
|
||||
request({
|
||||
url: '/api/user',
|
||||
method: 'GET'
|
||||
})
|
||||
|
||||
// Storage
|
||||
import { setStorage, getStorage } from 'uview-pro'
|
||||
|
||||
setStorage('key', 'value')
|
||||
const value = getStorage('key')
|
||||
|
||||
// Router
|
||||
import { navigateTo } from 'uview-pro'
|
||||
|
||||
navigateTo('/pages/index/index')
|
||||
```
|
||||
|
||||
### Key Points
|
||||
|
||||
- Rich utility methods
|
||||
- Easy to use
|
||||
- Well documented
|
||||
- TypeScript support
|
||||
- Optimized for uni-app
|
||||
Reference in New Issue
Block a user