uView Pro Documentation

uView Pro is a UI framework designed for rapid multi-platform development using uni-app and Vue3. It is specifically built to serve the uni-app ecosystem, enabling developers to write a single codebase that can be deployed to iOS, Android, H5, and various mini-programs (including WeChat, Alipay, Baidu, Toutiao, QQ, and DingTalk).

Key Characteristics:

• Vue3 Native: Fully refactored using Vue3 syntax.
• Backward Compatibility: Designed to maintain the existing API patterns of uView UI 1.x, allowing developers to migrate from Vue2/uView 1.x to Vue3/uView Pro with minimal friction.
• License: Distributed under the MIT license, allowing free use in commercial products (provided they do not involve illegal activities like gambling or violence).

The u-picker component is a versatile selector supporting four modes: time (time selection), region (area/location selection), selector (single-column selection), and multiSelector (multi-column selection).

Note: Since version 1.3.0, it is recommended to use the Select component instead of selector or multiSelector modes, as it is more user-friendly. The u-picker component is now primarily focused on time and region selection.

To control the visibility of the picker, use v-model bound to a boolean variable.

<template>
	<view>
		<u-picker v-model="show" mode="time"></u-picker>
		<u-button @click="show = true">打开</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			}
		}
	}
</script>

The u-input component is an input field designed to work seamlessly with the u-form component for form validation and data entry.

Usage Note:

• If you only need a simple input field without form validation, consider using u-field instead.
• For form groups requiring validation, nest u-input inside u-form-item, which is itself inside a u-form.

<template>
	<u-input v-model="value" :type="type" :border="border" />
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				type: 'text',
				border: true
			}
		}
	}
</script>

The u-field component is used for form inputs, supporting both single-line text and multi-line textarea types. It can be integrated with other uView components like picker or actionSheet to create selection-based inputs (e.g., for gender, time, or region selection) by setting disabled to true and using a right-icon.

<template>
	<view>
		<u-field
			v-model="mobile"
			label="手机号"
			placeholder="请填写手机号"
		></u-field>
		<u-field
			v-model="code"
			label="验证码"
			placeholder="请填写验证码"
		></u-field>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '',
				code: ''
			}
		}
	}
</script>

uView Pro provides a lightweight HTTP request library for uni-app that supports TypeScript, Vue3, and Composition API. It supports get, post, put, and delete methods. It is designed for medium-to-small projects and includes built-in support for global/single-request configuration of toast and loading states, as well as request/response interceptors.

Note: Currently, this library does not support file uploads or downloads.

import { http } from 'uview-pro'

// GET
http.get('/api/user', { id: 1 }).then(res => {
  /* ... */
})

// POST
http.post('/api/login', { username: 'xx', password: 'xx' }).then(res => {
  /* ... */
})

// PUT/DELETE
http.put('/api/user/1', { name: 'new' })
http.delete('/api/user/1')

The u-col component defines how much space an individual column occupies within the 12-column grid:

• Span: Use the span prop to set the number of columns the element occupies (1-12). Default is 0.
• Offset: Use the offset prop to shift the column to the right by a specific number of columns. This uses the same calculation logic as span.
• Text Alignment: Use the text-align prop to align text within the column.
  • Options: left (default), center, right.

<u-row gutter="16">
	<u-col span="3"></u-col>
	<u-col span="3" offset="6"></u-col>
</u-row>

The u-field component provides two distinct non-interactive states:

1. Disabled (disabled): The field is completely inactive. The user cannot input text and cannot trigger @click events.
2. Readonly (readonly): The field is non-editable, but it remains interactive. The user can still trigger @click events (useful for opening pickers or triggering specific actions), but they cannot change the text value.

<!-- Disabled: No input, no click -->
<u-field
  v-model="disabledValue"
  label="禁用状态"
  disabled
/>

<!-- Readonly: No input, but can be clicked -->
<u-field
  v-model="readonlyValue"
  label="只读状态"
  readonly
  @click="onReadonlyClick"
/>

The uni.scss file is automatically injected into every file using lang="scss". To prevent bloating your final package size:

• Do: Only place SCSS variables (colors, themes, sizes) in uni.scss.
• Don't: Put large amounts of CSS rules or complex logic in uni.scss, as this content will be duplicated into every single SCSS-enabled component in your project.