### Vue 3 Setup Validation Example

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/form.md

A complete example of form validation using the Vue 3 Composition API with script setup.

```html
<template>
	<view class="app">
		<u-form :model="data.formData" ref="form1">
			<u-form-item label="姓名" prop="name"><u-input v-model="data.formData.name" /></u-form-item>
			<u-form-item label="简介" prop="intro"><u-input v-model="data.formData.intro" /></u-form-item>
		</u-form>

		<u-button @click="submit">提交</u-button>
	</view>
</template>

<script setup>
	import { ref, reactive, onMounted, unref, computed, watch } from 'vue';
	import { onLoad, onReady } from '@dcloudio/uni-app';
	const form1 = ref();
	const data = reactive({
		formData: {
			name: "",
			intro: ""
		},
		rules: {
			name: [{
				required: true,
				message: '请输入姓名',
				// 可以单个或者同时写两个触发验证方式 
				trigger: ['change', 'blur'],
			}],
			intro: [{
				min: 5,
				message: '简介不能少于5个字',
				trigger: 'change'
			}]
		}
	});

	onReady(() => {
		form1.value.setRules(data.rules);
	});

	const submit = (e) => {
		form1.value.validate(valid => {
			if (valid) {
				uni.showToast({
					title: "验证通过",
					icon: 'none'
				});
				console.log('验证通过');
			} else {
				console.log('验证失败');
			}
		});
	}
</script>
```

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

### uView 插件 install 方法定义

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/vueUse.md

uView 内部定义的 install 方法，用于将 $u 挂载到 Vue 原型上。

```js
// 这里我们定义了一个叫"install"的变量，它的内容是一个方法(函数)
// 它的第一个参数是Vue对象(上面有提到传进来的第一个参数就是Vue)，我们把$u挂载到了Vue.prototype中
const install = (Vue) => {
	Vue.prototype.$u = $u;
}

// 这里我们导出一个对象，内部有一个叫"install"的方法，给上面说的Vue.use调用
export default {
	install
}
```

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

### Install uView via npm

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/read.md

Use npm to install the uView UI package into your project.

```bash
# npm方式安装
npm i uview-ui
```

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

### Vue.use 内部实现逻辑

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/vueUse.md

Vue 内部 use 方法的简化实现，展示了如何检测并执行插件的 install 方法。

```js
// 这里的plugin参数就是，就是我们通过Vue.use(uView)引入的"uView"
Vue.use = function (plugin: Function | Object) {
    
	// ......
	
	const args = toArray(arguments, 1)
	// 这一句很重要，这里的this，就是Vue，把他添加到args数组的第一个元素
	args.unshift(this)
	// 判断我们传递进来的"uView"，也即这里的"plugin"内部是否有一个叫"install"的方法
	// 如果有，就执行我们的"uView"，也即"plugin.install"方法
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
	
	// ......
}
```

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

### Basic usage with object array

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/swiper.md

Full implementation example using an array of objects containing image paths and titles.

```html
<template>
	<view class="wrap">
		<u-swiper :list="list"></u-swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 40rpx;
	}
</style>
```

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

### Basic Input Usage

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/input.md

Demonstrates the basic setup of u-input using v-model for data binding, type configuration, and border display.

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

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

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

### Classic Form Example

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/form.md

A comprehensive example demonstrating the combination of input, textarea, radio, checkbox, and switch components within a u-form, including validation rules and submission logic.

```html
<template>
	<u-form :model="form" ref="form1">
		<u-form-item label="姓名" prop="name"><u-input v-model="form.name" /></u-form-item>
		<u-form-item label="生日" prop="birthday"><u-input v-model="form.birthday" type="select" @click="calendar1.show=true" />
			<u-calendar v-model="calendar1.show" mode="date" @change="onCalendar1"></u-calendar>
		</u-form-item>
		<u-form-item label="简介" prop="intro"><u-input v-model="form.intro" /></u-form-item>
		<u-form-item label="性别" prop="sex"><u-input v-model="select1.current.label" type="select" @click="select1.show=true" /></u-form-item>
		<u-form-item label="水果" prop="checkbox">
			<u-checkbox-group v-model="form.checkbox">
				<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList1" :key="index" :name="item.name">
					{{ item.name }}
				</u-checkbox>
			</u-checkbox-group>
		</u-form-item>
		<u-form-item label="味道" prop="radio">
			<u-radio-group v-model="form.radio">
				<u-radio v-for="(item, index) in radioList1" :key="index" :name="item.name" :disabled="item.disabled">
					{{ item.name }}
				</u-radio>
			</u-radio-group>
		</u-form-item>
		<u-form-item label="开关" prop="switchVal">
			<template v-slot:right>
				<u-switch v-model="form.switchVal"></u-switch>
			</template>
		</u-form-item>
	</u-form>

	<u-select v-model="select1.show" :list="select1.list" @confirm="onSelect1"></u-select>

	<button @click="submit">提交</button>

	<text space="ensp">{{ JSON.stringify(form,null,2) }}</text>

</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					birthday: "",
					intro: '',
					sex: '',
					checkbox: '',
					radio: '',
					switchVal: false
				},
				checkboxList1: [{
						name: '苹果',
						checked: false,
						disabled: false
					},
					{
						name: '雪梨',
						checked: false,
						disabled: false
					},
					{
						name: '柠檬',
						checked: false,
						disabled: false
					}
				],
				radioList1: [{
						name: '鲜甜',
						disabled: false
					},
					{
						name: '麻辣',
						disabled: false
					}
				],
				select1: {
					show: false,
					current: {},
					list: [{
							value: 1,
							label: '男'
						},
						{
							value: 2,
							label: '女'
						}
					],
				},
				calendar1: {
					show: false,
				},
				rules: {
					name: [
						{ required: true, message: '请输入姓名', trigger: ['change', 'blur'] }
					],
					birthday: [
						{ required: true, message: '请选择日历', trigger: ['change', 'blur'] }
					],
					checkbox: [
						{ type: "array", required: true, message: '请选择水果', trigger: ['blur'] }
					]
				}
			};
		},
		onReady() {
			this.$refs.form1.setRules(this.rules);
		},
		methods: {
			onSelect1(arr) {
				let current = arr[0];
				let value = current.value;
				this.select1.current = current;
				this.form.sex = value;
			},
			submit() {
				this.$refs.form1.validate((valid) => {
					console.log(valid);
					if (valid) {
						uni.showToast({
							icon: "none",
							title: "表单验证通过"
						})
					}
				})
			},
			onCalendar1(e) {
				this.form.birthday = e.result;
			}
		}
	};
</script>
```

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

### Complete Waterfall Application Example

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/waterfall.md

A full implementation including lazy loading, custom item styling, data removal, and load more functionality.

```html
<template>
	<view class="wrap">
		<u-button @click="clear">清空列表</u-button>
		<u-waterfall v-model="flowList" ref="uWaterfall1">
			<template v-slot:left="{leftList}">
				<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
					<view class="demo-title">
						{{item.title}}
					</view>
					<view class="demo-price">
						{{item.price}}元
					</view>
					<view class="demo-tag">
						<view class="demo-tag-owner">
							自营
						</view>
						<view class="demo-tag-text">
							放心购
						</view>
					</view>
					<view class="demo-shop">
						{{item.shop}}
					</view>
					<u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
					<view class="demo-title">
						{{item.title}}
					</view>
					<view class="demo-price">
						{{item.price}}元
					</view>
					<view class="demo-tag">
						<view class="demo-tag-owner">
							自营
						</view>
						<view class="demo-tag-text">
							放心购
						</view>
					</view>
					<view class="demo-shop">
						{{item.shop}}
					</view>
					<u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon>
				</view>
			</template>
		</u-waterfall>
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
	</view>
</template>
```

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

### Configure HTTP Interceptor in /common/http.interceptor.js

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/js/http.md

This snippet demonstrates how to define the install function to configure base settings, request headers, and response handling for the uView HTTP client.

```javascript
// /common/http.interceptor.js

// 这里的vm，就是我们在vue文件里面的this，所以我们能在这里获取vuex的变量，比如存放在里面的token变量
const install = (Vue, vm) => {
	// 此为自定义配置参数，具体参数见上方说明
	Vue.prototype.$u.http.setConfig({
		baseUrl: 'https://api.example.com',
		loadingText: '努力加载中~',
		loadingTime: 800,
		// ......
	});
	
	// 请求拦截，配置Token等参数
	Vue.prototype.$u.http.interceptor.request = (config) => {
		// 引用token
		// 方式一，存放在vuex的token，假设使用了uView封装的vuex方式
		// 见：https://uviewui.com/components/globalVariable.html
		// config.header.token = vm.token;
		
		// 方式二，如果没有使用uView封装的vuex方法，那么需要使用$store.state获取
		// config.header.token = vm.$store.state.token;
		
		// 方式三，如果token放在了globalData，通过getApp().globalData获取
		// config.header.token = getApp().globalData.username;
		
		// 方式四，如果token放在了Storage本地存储中，拦截是每次请求都执行的
		// 所以哪怕您重新登录修改了Storage，下一次的请求将会是最新值
		// const token = uni.getStorageSync('token');
		// config.header.token = token;
		config.header.Token = 'xxxxxx';
		
		// 可以对某个url进行特别处理，此url参数为this.$u.get(url)中的url值
		if(config.url == '/user/login') config.header.noToken = true;
		// 最后需要将config进行return
		return config;
		// 如果return一个false值，则会取消本次请求
		// if(config.url == '/user/rest') return false; // 取消某次请求
	}
	
	// 响应拦截，判断状态码是否通过
	Vue.prototype.$u.http.interceptor.response = (res) => {
		if(res.code == 200) {
			// res为服务端返回值，可能有code，result等字段
			// 这里对res.result进行返回，将会在this.$u.post(url).then(res => {})的then回调中的res的到
			// 如果配置了originalData为true，请留意这里的返回值
			return res.result;
		} else if(res.code == 201) {
			// 假设201为token失效，这里跳转登录
			vm.$u.toast('验证失败，请重新登录');
			setTimeout(() => {
				// 此为uView的方法，详见路由相关文档
				vm.$u.route('/pages/user/login')
			}, 1500)
			return false;
		} else {
			// 如果返回false，则会调用Promise的reject回调，
			// 并将进入this.$u.post(url).then().catch(res=>{})的catch回调中，res为服务端的返回值
			return false;
		}
	}
}

export default {
	install
}
```

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

### Multi-column mode callback result example

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/select.md

Example of the array returned by the callback in multi-column mode, where the number of elements matches the number of columns.

```js
res = [
	{
		label: '雪月夜',
		value: '1'
	},
	{
		label: '冷夜雨',
		value: '2'
	},
]
```

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

### Tabbar basic usage example

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/tabbar.md

Shows how to place the u-tabbar component at the same level as the page content container and bind the list and current index.

```html
<template>
	<view>
		<view class="u-page">
			<!-- 所有内容的容器 -->
		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar v-model="current" :list="list" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						count: 2,
						isDot: true,
						customIcon: false,
					},
					{
						iconPath: "photo",
						selectedIconPath: "photo-fill",
						text: '放映厅',
						customIcon: false,
					},
					{
						iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
						selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
						text: '发布',
						midButton: true,
						customIcon: false,
					},
					{
						iconPath: "play-right",
						selectedIconPath: "play-right-fill",
						text: '直播',
						customIcon: false,
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						count: 23,
						isDot: false,
						customIcon: false,
					},
				],
				current: 0
			}
		},
	}
</script>
```

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

### Comprehensive Validation Configuration

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/form.md

An example showing multiple validation techniques including required fields, regex patterns, length constraints, custom validator functions, and asynchronous validation.

```js
rules: {
	name: [
		// 必填规则
		{
			required: true,
			message: '此为必填字段'，
			// blur和change事件触发检验
			trigger: ['blur', 'change'],
		},
		// 正则判断为字母或数字
		{
			pattern: /^[0-9a-zA-Z]*$/g,
			// 正则检验前先将值转为字符串
			transform(value) {
				return String(value);
			},
			message: '只能包含字母或数字'
		},
		// 6-8个字符之间的判断
		{
			min: 6,
			max: 8,
			message: '长度在6-8个字符之间'
		},
		// 自定义规则判断是否包含字母"A"
		{
			validator: (rule, value, callback) => {
				return this.$u.test.contains(value, "A");
			},
			message: '必须包含字母"A"'
		},
		// 校验用户是否已存在
		{
			asyncValidator: (rule, value, callback) => {
				this.$u.post('/xxx/xxx', {name: value}).then(res => {
					// 如果验证不通过，需要在callback()抛出new Error('错误提示信息')
					if(res.error) {
						callback(new Error('姓名重复'));
					} else {
						// 如果校验通过，也要执行callback()回调
						callback();
					}
				})
			},
			// 如果是异步校验，无需写message属性，错误的信息通过Error抛出即可
			// message: 'xxx'
		}
	]
}
```

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

### 配置 /common/http.api.js

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/js/apiManage.md

定义API接口并将其挂载到vm.$u.api下。此文件通过install方法接收vm对象，从而实现对请求的统一封装。

```javascript
// /common/http.api.js

// 如果没有通过拦截器配置域名的话，可以在这里写上完整的URL(加上域名部分)
let hotSearchUrl = '/ebapi/store_api/hot_search';
let indexUrl = '/ebapi/public_api/index';

// 此处第二个参数vm，就是我们在页面使用的this，你可以通过vm获取vuex等操作，更多内容详见uView对拦截器的介绍部分：
// https://uviewui.com/js/http.html#%E4%BD%95%E8%B0%93%E8%AF%B7%E6%B1%82%E6%8B%A6%E6%88%AA%EF%BC%9F
const install = (Vue, vm) => {
	// 此处没有使用传入的params参数
	let getSearch = (params = {}) => vm.$u.get(hotSearchUrl, {
		id: 2
	});
	
	// 此处使用了传入的params参数，一切自定义即可
	let getInfo = (params = {}) => vm.$u.post(indexUrl, params);
	
	// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
	vm.$u.api = {getSearch, getInfo};
}

export default {
	install
}
```

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

### Perform HTTP Requests in Vue Components

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/js/http.md

Examples of using the configured HTTP client to perform POST and GET requests within a Vue component's methods.

```javascript
// login.vue
export default {
	methods: {
		// post示例
		sumbitByPost() {
			this.$u.post('/user/login', {
				username: 'lisa',
				password: '123456'
			}).then(res => {
				// res为服务端返回的数据
			})
		},
		
		// get示例
		sumbitByGet() {
			this.$u.get('/user/login', {
				username: 'lisa',
				password: '123456'
			}).then(res => {
				// res为服务端返回的数据
			})
		},
	}
}
```

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

### Basic Usage

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/image.md

Configure the image by providing the width, height, and src path.

```html
<template>
	<u-image width="100%" height="300rpx" :src="src"></u-image>
</template>

<script>
	export default {
		data() {
			return {
				src: 'https://cdn.uviewui.com/uview/example/fade.jpg'
			}
		}
	}
</script>
```

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

### Single-column mode callback result example

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/select.md

Example of the array returned by the callback in single-column mode.

```js
res = [
	{
		label: '雪月夜',
		value: '1',
		// 如果传递给"list"的对象中有extra属性，将会在此返回
		// extra: 'xxx'
	}
]
```

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

### HTTP Request Methods

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/js/http.md

Methods for performing HTTP GET and POST requests.

```APIDOC
## GET Request

### Description
Performs a GET request to the specified URL.

### Method
`this.$u.get(url, params)`

## POST Request

### Description
Performs a POST request to the specified URL.

### Method
`this.$u.post(url, data)`
```

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

### Async/Await in Methods

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/js/http.md

Example of using async/await within a custom method to handle asynchronous results.

```js
export default {
	methods: {
		async login() {
			let ret = await this.$u.post('/user/login');
			// 此处在函数体外写了async，并且使用了await等待返回，所以可以打印ret结果
			// 意味着这里的console.log是等待了几十毫秒请求返回后才执行的
			console.log(ret);
		}
	}
}
```

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

### Basic Usage of Dropdown

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/dropdown.md

Demonstrates the basic implementation using u-dropdown and u-dropdown-item with options for single-selection.

```html
<template>
	<view class="">
		<u-dropdown>
			<u-dropdown-item v-model="value1" title="距离" :options="options1"></u-dropdown-item>
			<u-dropdown-item v-model="value2" title="温度" :options="options2"></u-dropdown-item>
		</u-dropdown>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: 1,
				value2: 2,
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					}
				],
				options2: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
			}
		},
	}
</script>
```

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

### Border Utility Class

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/common.md

Example of applying a bottom border using the u-border-bottom utility class.

```html
<view class="u-border-bottom">
	夫人之相与，俯仰一世，或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外
</view>
```

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

### HTTP Request Methods

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/js/http.md

Standard methods for performing GET and POST requests within the application.

```APIDOC
## GET / [url]

### Description
Performs a GET request to the specified URL.

### Parameters
- **url** (String) - Required - The endpoint path.
- **data** (Object) - Optional - Query parameters.

## POST / [url]

### Description
Performs a POST request to the specified URL.

### Parameters
- **url** (String) - Required - The endpoint path.
- **data** (Object) - Optional - Request body data.
```

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

### Basic usage of u-top-tips

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/topTips.md

Demonstrates how to trigger the TopTips component using a ref. It is recommended to call the show method within the onReady lifecycle hook rather than onLoad.

```html
<template>
	<u-top-tips ref="uTips1"></u-top-tips>
</template>

<script>
	export default {
		onReady() {
			this.$refs.uTips1.show({
				title: '铁马冰河入梦来',
				type: 'success',
				duration: '2300'
			})
		}
	}
</script>
```

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

### Configure main.js for uView

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/read.md

Import and register the uView library in your main.js file.

```js
// main.js
import uView from 'uview-ui';
Vue.use(uView);
```

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

### Async/Await in Lifecycle

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/js/http.md

Example of using async/await within the onLoad lifecycle hook to handle asynchronous results.

```js
export default {
	// 可以放心在生命周期前加上async，不会导致问题
	async onLoad() {
		let ret = await this.$u.post('/user/login');
		// 此处在函数体外写了async，并且使用了await等待返回，所以可以打印ret结果
		// 意味着这里的console.log是等待了几十毫秒请求返回后才执行的
		console.log(ret);
	}
}
```

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

### Basic Usage

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/upload.md

Displays pre-set images using the file-list parameter and sets the server upload endpoint via the action parameter.

```html
<template>
	<u-upload :action="action" :file-list="fileList" ></u-upload>
</template>

<script>
	export default {
		data() {
			return {
				// 演示地址，请勿直接使用
				action: 'http://www.example.com/upload',
				fileList: [
					{
						url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
					}
				]
			}
		}
	}
</script>
```

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

### Validation Rules Configuration

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/form.md

Example of defining multiple validation rules for a single field using the async-validator structure.

```js
rules: {
	name: [
		// 对name字段进行长度验证
		{
			min: 5,
			message: '简介不能少于5个字',
			trigger: 'change'
		},
		// 对name字段进行必填验证
		{
			required: true,
			message: '请填写姓名',
			trigger: ['change','blur']
		},
	]
}
```

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

### Text Color Utility Class

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/common.md

Example of applying a main text color using the u-main-color utility class.

```html
<view class="u-main-color">
	......
</view>
```

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

### 完整的 main.js 配置参考

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/js/mpShare.md

展示了在 Vue2 和 Vue3 环境下如何正确引入并使用 uView UI 及 mpShare mixin。

```js
import App from './App'

// 引入 uView UI
import uView from './uni_modules/vk-uview-ui';
import mpShare from './uni_modules/vk-uview-ui/libs/mixin/mpShare.js';

// #ifdef VUE2

import Vue from 'vue'

// 使用 uView UI
Vue.use(uView);

Vue.mixin(mpShare)

Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
	...App
})
app.$mount()

// #endif

// #ifdef VUE3

import { createSSRApp } from 'vue'
export function createApp() {
	const app = createSSRApp(App)

	// 使用 uView UI
	app.use(uView)
	
	app.mixin(mpShare)

	return {
		app
	}
}

// #endif
```

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

### Basic usage of u-select

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/select.md

Demonstrates the basic implementation of the u-select component using v-model for visibility control and a list of objects for selection options.

```html
<template>
	<view>
		<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
		<u-button @click="show = true">打开</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				list: [
					{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
			}
		},
		methods: {
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			confirm(e) {
				console.log(e);
			}
		}
	}
</script>
```

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

### CountTo 手动控制滚动

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/countTo.md

将 autoplay 设置为 false，并通过组件的 ref 调用 start()、paused() 或 reStart() 方法来控制滚动。

```html
<template>
	<u-count-to ref="countTo1" :end-val="endVal" :autoplay="autoplay"></u-count-to>
</template>

<script>
	export default {
		data() {
			return {
				endVal: 5000.55,
				autoplay: false
			};
		},
		methods: {
			start() {
				this.$refs.countTo1.start();
			},
			paused() {
				this.$refs.countTo1.paused();
			},
			reStart() {
				this.$refs.countTo1.reStart();
			},
		}
	}
</script>
```

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

### Configuring Placeholder Images

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/lazyLoad.md

Use loading-img for the pre-loading state and error-img for cases where the image fails to load.

```html
<template>
	<view>
		<u-lazy-load :image="image" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				image: "https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg",
				loadingImg: '/static/uView/loading.png',
				errorImg: '/static/uView/load_error.png'
			}
		}
	}
</script>
```

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

### trim method usage

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/js/trim.md

Examples of using the $u.trim method to remove all spaces or default to removing spaces from both ends of a string.

```js
console.log(this.$u.trim('abc    b ', 'all')); // 去除所有空格
console.log(this.$u.trim(' abc '));	// 去除两端空格
```

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

### 异步初始化

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/readMore.md

在异步获取内容后，使用 $nextTick 调用 init 方法重新计算组件高度。

```html
<template>
	<u-read-more ref="uReadMore1">
		<rich-text :nodes="content"></rich-text>
	</u-read-more>
</template>

<script> 
	export default {
		data() {
			return {
				content: '',
			}
		},
		onLoad() {
			// 模拟后端请求
			setTimeout(() => {
				this.content = `山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
				苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
				无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
				山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
				苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
				无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
				山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
				苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
				无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`,
				// 请注意上方已在组件中添加ref-uReadMore
				this.$nextTick(() => {
					this.$refs.uReadMore1.init();
				})
			}, 2000);
		}
	}
</script>
```

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

### Basic TimeLine Usage

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/timeLine.md

Demonstrates how to use u-time-line and u-time-line-item with custom slots for nodes and content.

```html
<template>
	<u-time-line>
		<u-time-line-item nodeTop="2">
			<!-- 此处自定义了左边内容，用一个图标替代 -->
			<template v-slot:node>
				<view class="u-node" style="background: #19be6b;">
					<!-- 此处为uView的icon组件 -->
					<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
				</view>
			</template>
			<template v-slot:content>
				<view>
					<view class="u-order-title">待取件</view>
					<view class="u-order-desc">[自提柜]您的快件已放在楼下侧门，直走前方53.6米，左拐约10步，再右拐直走，见一红灯笼停下，叩门三下，喊“芝麻开门”即可。</view>
					<view class="u-order-time">2019-05-08 12:12</view>
				</view>
			</template>
		</u-time-line-item>
		<u-time-line-item>
			<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
			<template v-slot:content>
				<view>
					<view class="u-order-desc">【深圳市】日照香炉生紫烟，遥看瀑布挂前川，飞流直下三千尺，疑是银河落九天。</view>
					<view class="u-order-time">2019-12-06 22:30</view>
				</view>
			</template>
		</u-time-line-item>
	</u-time-line>
</template>

<style lang="scss" scoped>
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	
	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}
	
	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
</style>
```

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

### Flex Alignment Override Example

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/common.md

Demonstrates overriding the default align-items property of u-flex by applying a specific alignment class.

```html
<view class="u-flex u-col-top">
	......
</view>
```

```css
.u-flex {
	display: flex;
	flex-direction: row;
	align-items: center;
}

/* 由于align-items: flex-start在后面，故覆盖了"u-flex"的align-items: center */
.u-col-top {
	align-items: flex-start;
}
```

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

### 执行uView npm安装

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/npmSetting.md

在项目根目录执行安装命令，若项目由HBuilder X创建且无package.json，需先执行npm init -y。

```js
// 如果您的项目是HX创建的，根目录又没有package.json文件的话，请先执行如下命令：
// npm init -y

// 安装
npm install uview-ui@1.8.4
```

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

### Perform GET and POST Requests

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/js/http.md

Basic usage of the $u.get and $u.post methods within a Vue component's lifecycle.

```html
// /pages/index/index.vue

<script>
	export default {
		onLoad() {
			this.$u.get('/ebapi/store_api/hot_search', {
				id: 2
			}).then(res => {
				this.result = res;
			})
			
			this.$u.post('/ebapi/public_api/index', {
				id: 1
			}).then(res => {
				this.result = res;
			})
		}
	}
</script>
```

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

### Basic Usage of Empty Component

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/empty.md

Configure the displayed text using the text parameter and select the icon mode using the mode parameter.

```html
<u-empty text="所谓伊人，在水一方" mode="list"></u-empty>
```

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

### Setting Image Load Threshold

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/lazyLoad.md

Configures the distance from the bottom of the screen at which the image starts loading, using the threshold parameter in rpx.

```html
<u-lazy-load :image="image" threshold="300"></u-lazy-load>
```

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

### Basic Modal Usage

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/modal.md

Demonstrates the basic implementation of a modal with a content string and a v-model binding for visibility control.

```html
<template>
	<view>
		<u-modal v-model="show" :content="content"></u-modal>
		<u-button @click="open">
			打开模态框
		</u-button>
	</view>
</template>
	
<script>
	export default {
		data() {	
			return {
				show: false,
				content: '东临碣石，以观沧海'
			}
		},
		methods: {
			open() {
				this.show = true;
			}
		}
	}
</script>
```

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

### Registering AvatarCropper in pages.json

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/avatarCropper.md

Configuration required in the project's pages.json file to register the cropping page when using the download-based installation method.

```json
{
	"path": "uni_modules/vk-uview-ui/components/u-avatar-cropper/u-avatar-cropper",
	"style": {
		"navigationBarTitleText": "头像裁剪",
		"navigationBarBackgroundColor": "#000000"
	}
}
```

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

### Basic Usage of u-lazy-load

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/lazyLoad.md

Demonstrates how to use the u-lazy-load component in a loop. Note that if img-mode is not set to widthFix, a fixed height must be provided to ensure the image displays correctly.

```html
<template>
	<view>
		<u-lazy-load v-for="(item, index) in list" :key="index" :image="item.src"></u-lazy-load>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 设计成数组内嵌对象而不是纯数组形式，是考虑到真实环境后端返回的数据为如此形式
				list: [{
						src: "https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg",
					},
					{
						src: "https://gtd.alicdn.com/sns_logo/i7/TB1IWtgQFXXXXcmXFXXSutbFXXX.jpg_240x240xz.jpg",
					},
					{
						src: "https://gtd.alicdn.com/sns_logo/i1/TB1_f_PLXXXXXbVXpXXSutbFXXX.jpg_240x240xz.jpg",
					},
					{
						// 这里图片不存在，会加载失败，显示错误的占位图
						src: "xxx",
					},
				]
			}
		}
	}
</script>
```

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

### Vue 2.0 main.js 引入

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/install.md

在 main.js 中引入并使用 uView 插件。

```js
import uView from './uni_modules/vk-uview-ui';
Vue.use(uView);
```

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

### Data Configuration for Removal

Source: https://github.com/1064094732/vk-uview-ui-doc/blob/main/docs/components/waterfall.md

Example of data structure configuration for the remove method, where idKey must match the unique identifier in the data array.

```js
let arr = [
	{idx: 1, name: 'lisa'},
	{idx: 2, name: 'mary'}
]
```