### Configure UV-UI Tools (HBuilderX)

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/setting.md

Import and use the `uv-ui-tools` library in `main.js` for HBuilderX installations. This setup is required before using UV-UI's global functionalities.

```javascript
// main.js
import uvUI from '@/uni_modules/uv-ui-tools'
// #ifndef VUE3
Vue.use(uvUI);
// #endif
// #ifdef VUE3
app.use(uvUI);
// #endif
```

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

### Configure UV-UI (npm)

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/setting.md

Import and use the UV-UI library in `main.js` for npm installations. This setup is required before using UV-UI's global functionalities.

```javascript
// main.js
import uvUI from '@climblee/uv-ui'
// #ifndef VUE3
Vue.use(uvUI);
// #endif
// #ifdef VUE3
app.use(uvUI);
// #endif
```

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

### API集中管理文件结构

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/js/apiManage.md

在`/common/http.api.js`文件中定义API接口。此文件结构与请求拦截器类似，通过`install`函数挂载API到`vm.$uv.api`。

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

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

// 此处第二个参数vm，就是我们在页面使用的this，你可以通过vm获取vuex等操作，更多内容详见uv-ui对拦截器的介绍部分：
// https://uv-uiui.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.$uv.get(hotSearchUrl, {
		id: 2
	});
	
	// 此处使用了传入的params参数，一切自定义即可
	let getInfo = (params = {}) => vm.$uv.post(indexUrl, params);
	
	// 将各个定义的接口名称，统一放进对象挂载到vm.$uv.api(因为vm就是this，也即uni.$uv.api)下
	vm.$uv.api = {getSearch, getInfo};
}

export default {
	install
}
```

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

### Basic Vue.use() Example

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/vueUse.md

Standard way to import and use a Vue plugin like uv-ui.

```javascript
import uv-ui from "@/uv-ui";

Vue.use(uv-ui);
```

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

### Performing a GET Request

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/js/http.md

Shows how to make a GET request, including passing parameters and overriding global configurations locally. Note that GET parameters are passed in the `params` object.

```javascript
// 基本用法，注意：get请求的参数以及配置项都在第二个参数中
uni.$uv.http.get('/user/login', {params: {userName: 'name', password: '123456'}}).then(res => {

}).catch(err => {

})

// 局部修改配置，局部配置优先级高于全局配置
uni.$uv.http.get('/user/login', {
    params: {userName: 'name', password: '123456'}, /* 会加在url上 */
    header: {}, /* 会与全局header合并，如有同名属性，局部覆盖全局 */
    dataType: 'json',
    // 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
    custom: {auth: true}, // 可以加一些自定义参数，在拦截器等地方使用。比如这里我加了一个auth，可在拦截器里拿到，如果true就传token
    // #ifndef MP-ALIPAY
    responseType: 'text',
    // #endif
    // #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
    timeout: 60000, // H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序（2.10.0）、支付宝小程序
    // #endif
    // #ifdef APP-PLUS
    sslVerify: true, // 验证 ssl 证书 仅5+App安卓端支持（HBuilderX 2.3.3+）
    // #endif
    // #ifdef APP-PLUS
    firstIpv4: false, // DNS解析时优先使用ipv4 仅 App-Android 支持 (HBuilderX 2.8.0+)
    // #endif
    // #ifdef H5
    withCredentials: false, // 跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX 2.6.15+）
    // #endif
    // 返回当前请求的task, options。请勿在此处修改options。非必填
    getTask: (task, options) => {
         // 相当于设置超时时间500ms
         // setTimeout(() => {
         //   task.abort()
         // }, 500)
    },
    //validateStatus: (statusCode) => { // statusCode 必存在。此处示例为全局默认配置。演示，非必填选项
	//	return statusCode >= 200 && statusCode < 300
	//}
}).then(res => {

}).catch(err => {

})
```

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

### uv-ui Plugin Install Method

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/vueUse.md

Shows how a plugin like uv-ui defines its install method to augment Vue's prototype.

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

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

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

### DOWNLOAD Request Example

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/js/http.md

Illustrates how to initiate a file download using `uni.$uv.http.download`. This includes setting parameters, timeout, headers, and custom options.

```javascript
uni.$uv.http.download('api/download', {
    params: {},
    // #ifdef H5 || APP-PLUS
    timeout: 3000,
    // #endif
    header: {}, 
    custom: {}, 
    getTask: (task, options) => {
		
    },
    //validateStatus: (statusCode) => {
   	//	return statusCode >= 200 && statusCode < 300
   	//}
}).then(res => {

}).catch(err => {

})
```

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

### Vue.use() Internal Implementation

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/vueUse.md

Illustrates the core logic within Vue's internal use method for plugin installation.

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

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

### UPLOAD Request Example

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/js/http.md

Demonstrates how to upload files using `uni.$uv.http.upload`. It includes options for specifying files, file type (for Alipay mini-program), file path, custom parameters, and headers.

```javascript
uni.$uv.http.upload('api/upload/img', {
    params: {},
    // #ifdef APP-PLUS || H5
    files: [],
    // #endif
    // #ifdef MP-ALIPAY
    fileType: 'image/video/audio',
    // #endif
    filePath: '',
    custom: {auth: true},
    name: 'file',
    // #ifdef H5 || APP-PLUS
    timeout: 60000,
    // #endif
    header: {}, 
    formData: {}, 
    getTask: (task, options) => {
      
    },
    //validateStatus: (statusCode) => {
    //	return statusCode >= 200 && statusCode < 300
    //}
}).then(res => {
	// 返回的res.data 已经进行JSON.parse
}).catch(err => {

})
```

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

### Making HTTP Requests with UV-UI

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/js/http.md

Demonstrates how to use the defined API functions (`postMenu`, `getMenu`) to send requests. Includes examples for handling authentication, disabling automatic toasts, and using `async/await`.

```javascript
import { postMenu, getMenu } from '/config/api.js';

// 发出post，假设需要带上token
postMenu({ custom: { auth: true }}).then(() => {
	
}).catch(() =>{
	
})

// await等待，注意与async结合使用
await postMenu({ custom: { auth: true }})

// 假设不需要在响应拦截器中自动弹出的toast，以及不想写catch(如果promise中进行reject，但是却没有catch的话会报错)
postMenu({ custom: { auth: true, toast: false, catch: false }}).then(() => {
	
})

// get请求
getMenu({ custom: { auth: true }}).then(() => {
	
}).catch(() =>{
	
})

// 也可以直接通过uni.$uv.post发出请求，注意此处需要写上接口地址
uni.$uv.http.post('/common/menu', { custom: { auth: true }}).then(() => {
	
}).catch(() =>{
	
})
```

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

### Install Sass and Sass-Loader

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/downloadSetting.md

Install the necessary Sass and Sass-Loader packages for SCSS support in your project. These are required if your project does not already have Sass support.

```bash
// Install sass
npm i sass -D

// Install sass-loader
npm i sass-loader -D
```

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

### Global Usage of UV-UI Utilities (Vue 3 Setup)

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/setting.md

Access UV-UI utility functions globally via `uni.$uv.xxx()` in Vue 3 projects with setup syntax. Methods like `getRect` are accessed via `ctx.$uv.xxx()`.

```javascript
// vue3之setup语法糖
<script setup>
	import { onReady } from '@dcloudio/uni-app';
	import {getCurrentInstance} from 'vue';
	const { ctx } = getCurrentInstance();
	onReady(()=>{
		ctx.$uv.getRect('.demo').then(res=>{
			console.log(res)
		})
	})
	console.log(uni.$uv.os())
	// ...
</script>
```

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

### Import UV-UI Theme (npm)

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/setting.md

Import UV-UI's theme SCSS file into your project's `uni.scss` for npm installations. This allows for global theme customization.

```scss
/* uni.scss */

@import '@climblee/uv-ui/theme.scss';

/* 也可以引入自己的scss文件，变量名和theme.scss中保持一致即可 */
@import '@/common/css/theme-self.scss';
```

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

### Basic Dropdown Usage

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/dropDown.md

Demonstrates the basic setup of uv-drop-down, uv-drop-down-item, and uv-drop-down-popup components. Ensure `sign` props match for proper communication. The `defaultValue` prop configures initial states for items.

```vue
<template>
	<view style="height: 1000px;">
		<uv-drop-down
			ref="dropDown"
			sign="dropDown_1" 
			:defaultValue="[0,'0','all']" 
		>
			<uv-drop-down-item 
				name="order" 
				type="2" 
				label="综合排序" 
				value="all">
			</uv-drop-down-item>
			<uv-drop-down-item 
				name="type" 
				type="2" 
				label="文档格式" 
				value="0">
			</uv-drop-down-item>
			<uv-drop-down-item 
				name="vip_type" 
				type="1" 
				label='VIP文档'
				:value="0">
			</uv-drop-down-item>
		</uv-drop-down>
		<uv-drop-down-popup
			sign="dropDown_1"
			@popupChange="change"
		>
			<view style="width: 750rpx;height: 300rpx;background-color: #fff;"></view>
		</uv-drop-down-popup>
	</view>
</template>
<script>
	export default {
		onPageScroll() {
			// 滚动后及时更新位置
			this.$refs.dropDown.init();
		},
		methods: {
			change(e){
				console.log('弹窗打开状态：',e);
			}
		}
	}
</script>
```

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

### Main.js Configuration

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/guide/globalVariable.md

Integrates the Vuex store and the custom mixin into the main Vue application instance. This setup is required for global state management to function.

```javascript
// main.js

let vuexStore = require("@/store/$uv.mixin.js");
Vue.mixin(vuexStore);

// main.js

import store from '@/store';

// 将store放入Vue对象创建中
const app = new Vue({
	store,
	...App
})

```

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

### Basic Tabs Usage

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/tabs.md

Demonstrates the fundamental setup of the uv-tabs component. Configure tabs using the 'list' array and handle tab clicks with the '@click' event.

```vue
<template>
	<uv-tabs :list="list" @click="click"></uv-tabs>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					name: '关注',
				}, {
					name: '推荐',
				}, {
					name: '电影'
				}, {
					name: '科技'
				}, {
					name: '音乐'
				}, {
					name: '美食'
				}, {
					name: '文化'
				}, {
					name: '财经'
				}, {
					name: '手工'
				}]
			}
		},
		methods: {
			click(item) {
				console.log('item', item);
			}
		}
	}
</script>
```

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

### Import UV-UI Theme (HBuilderX)

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/setting.md

Import UV-UI's theme SCSS file into your project's `uni.scss` for HBuilderX installations. This allows for global theme customization.

```scss
/* uni.scss */

@import '@/uni_modules/uv-ui-tools/theme.scss';

/* 也可以引入自己的scss文件，变量名和theme.scss中保持一致即可 */
@import '@/common/css/theme-self.scss';
```

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

### Basic ActionSheet Usage

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/actionSheet.md

Demonstrates the fundamental setup of the ActionSheet component, including defining actions, titles, and event handlers for selection and closing. Use this for standard action menu displays.

```vue
<template>
	<view>
		<uv-action-sheet 
		ref="actionSheet"
		:actions="list"
		title="标题"
		@select="select"
		@close="close">
		</uv-action-sheet>
		<button @click="open">打开ActionSheet</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					name: '选项一',
					subname: "选项一描述",
					color: '#ffaa7f',
					fontSize: '20'
				}, {
					name: '选项二禁用',
					disabled: true
				}, {
					name: '开启load加载', //开启后文字不显示
					loading: true
				}]
			}
		},
		methods: {
			open() {
				this.$refs.actionSheet.open();
			},
			select(e){
				console.log('选中该项：',e);
			},
			close(){
				console.log('关闭');
			}
		}
	}
</script>
```

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

### Basic Usage of Subsection

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/subsection.md

Demonstrates the basic setup for the uv-subsection component using a list of strings. The 'current' prop sets the initial active item, and the 'change' event updates it.

```vue
<template>
	<uv-subsection :list="list" :current="current" @change="change"></uv-subsection>
</template>
<script>
	export default {
		data() {
			return {
				list: ['未付款', '待评价', '已付款'],
				// 或者如下，也可以配置keyName参数修改对象键名
				// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
				current: 1
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>
```

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

### Basic NumberBox Usage

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/numberBox.md

Demonstrates the basic setup of the NumberBox component using v-model for initial value and @change for handling value updates. The 'value' is bound bidirectionally.

```vue
<template>
	<uv-number-box v-model="value" @change="valChange"></uv-number-box>
</template>
<script>
	export default {
		data() {
			return {
				value: 0
			}
		},
		methods: {
			valChange(e) {
				console.log('当前值为: ' + e.value)
			}
		}
	}
</script>
```

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

### Vue Image Component with Placeholder

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/testPic.md

Example of using the `<image>` component in Vue.js with a placeholder image URL from placeholder.com. Ensure to replace the URL with your desired image source.

```vue
<image src="https://via.placeholder.com/400x200.png/3c9cff/fff"></image>
```

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

### Dynamic Form Generation

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/form.md

This example demonstrates how to create a dynamic form where fields can be added or removed at runtime. It shows how to manage form data, rules, and UI elements programmatically using JavaScript.

```vue
<template>
	<view>
		<uv-form labelPosition="left" :model="model" :rules="rules" ref="form">
			<template v-for="(item,index) in list">
				<uv-form-item :label="item.label" :prop="item.name" borderBottom>
					<uv-input v-model="model[item.name]" border="none">
					</uv-input>
				</uv-form-item>
			</template>
			<uv-button type="info" text="添加字段" customStyle="margin-top: 10px" @click="add"></uv-button>
			<uv-button type="primary" text="提交" customStyle="margin-top: 10px" @click="submit"></uv-button>
			<uv-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></uv-button>
		</uv-form>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				model: {},
				list: [],
				rules: {}
			}
		},
		onLoad() {
			const data = this.getData();
			data.forEach(item => {
				this.model[item.name] = '';
				this.rules[item.name] = item.rules;
			})
			this.list = data;
		},
		methods: {
			add() {
				const addData = {
					name: 'demo',
					label: '添加的项',
					rules: {
						type: 'string',
						required: true,
						message: '请填写添加项',
						trigger: ['blur', 'change']
					}
				}
				this.model[addData.name] = '';
				this.rules[addData.name] = addData.rules;
				this.list.push(addData);
			},
			// 模拟请求后端的数据
			getData() {
				return [{
					name: 'name',
					label: '姓名',
					rules: {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}
				}, {
					name: 'age',
					label: '年龄',
					rules: {
						type: 'string',
						required: true,
						message: '请填写年龄',
						trigger: ['blur', 'change']
					}
				}, {
					name: 'like',
					label: '爱好',
					rules: {
						type: 'string',
						required: true,
						message: '请填写兴趣爱好',
						trigger: ['blur', 'change']
					}
				}]
			},
			// 提交
			submit() {
				this.$refs.form.validate().then(res => {
					uni.showToast({
						icon: 'success',
						title: '校验通过'
					})
				}).catch(errors => {
					uni.showToast({
						icon: 'error',
						title: '校验失败'
					})
				})
			},
			// 重置
			reset() {
				this.$refs.form.resetFields();
				this.$refs.form.clearValidate();
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		}
	}
</script>
```

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

### guid()

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/js/guid.md

Generates a globally unique, random GUID. By default, it starts with 'u' and has a length of 32 characters using a radix of 62. This is useful for element IDs or class names as it ensures uniqueness and avoids starting with a number.

```APIDOC
## guid(length = 32, firstU = true, radix = 62)

### Description
Generates a globally unique, random GUID. By default, it starts with 'u' and has a length of 32 characters using a radix of 62. This is useful for element IDs or class names as it ensures uniqueness and avoids starting with a number.

### Parameters
#### Path Parameters
- **length** (Number | null) - Optional - The length of the GUID. Defaults to 32. If null, generates a random number according to the rfc4122 standard.
- **firstU** (Boolean) - Optional - Whether the first character should be 'u'. Defaults to true. This is important because IDs or class names cannot start with a number.
- **radix** (Number) - Optional - The base for generating the random string. Defaults to 62, using characters '0-9A-Za-z'. Other values like 2, 10, or 7 would produce binary, decimal, or octal-like random strings respectively.

### Method
`guid()`

### Usage Example
```js
// Import the function (if not globally configured)
import { guid } from '@/uni_modules/uv-ui-tools/libs/function/index.js';

// Call the function with default parameters
const defaultGuid = guid(); 
console.log(defaultGuid); // Example output: u3a1b2c3d4e5f67890abcdef1234567890

// Call with custom parameters
const customGuid = guid(20, false, 10); // Length 20, no 'u' prefix, base 10
console.log(customGuid); // Example output: 12345678901234567890

const rfcGuid = guid(null); // RFC4122 standard format
console.log(rfcGuid); // Example output: a1b2c3d4-e5f6-7890-1234-567890abcdef
```

### Notes
All parameters have default values, so the function can be called without any arguments. It is recommended to use the default settings unless specific requirements dictate otherwise.
```

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

### Using guid for Dynamic Class Names

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/js/guid.md

This example demonstrates using the `uni.$uv.guid()` function to generate a dynamic class name for a view element. The generated GUID is used as a computed property, ensuring it's reactive. The default parameters for `guid()` are recommended for general use.

```vue
<template>
	<view :class="className"></view>
</template>
<script>
	export default {
		computed: {
			className() {
				return uni.$uv.guid(20);
			}
		},
		onLoad() {
			console.log(uni.$uv.guid());
		}
	}
</script>
```

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

### Get Current Page Path

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/js/fastUse.md

The page() method returns the path of the current page, starting with a '/'.

```javascript
// Returns something like /pages/example/components
uni.$uv.page()
```

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

### API Endpoint Definitions

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/js/http.md

Defines example API endpoints for making POST and GET requests, including how to pass parameters and configurations.

```APIDOC
## API Endpoint Definitions

### Description
This section provides examples of how to define and use API endpoints for POST and GET requests using the `uni.$uv.http` module. It demonstrates passing parameters and custom configurations for each request.

### Method
- `uni.$uv.http.post(url, params, config)`
- `uni.$uv.http.get(url, data, config)`

### Endpoint
- `/ebapi/public_api/index` (Example endpoint for both POST and GET)

### Parameters
#### `postMenu` (POST request)
- `params` (object) - The data payload for the POST request.
- `config` (object) - Optional configuration object for the request (e.g., `{ custom: { auth: true } }`).

#### `getMenu` (GET request)
- `data` (object) - The data or query parameters for the GET request.
- `config` (object) - Optional configuration object for the request (e.g., `{ custom: { auth: true } }`).

### Request Example
```javascript
// In /common/api.js
export const postMenu = (params, config = {}) => uni.$uv.http.post('/ebapi/public_api/index', params, config);
export const getMenu = (data) => uni.$uv.http.get('/ebapi/public_api/index', data);

// Sending a POST request with authentication
postMenu({ custom: { auth: true }}).then(() => {
    // Handle success
}).catch(() => {
    // Handle error
});

// Sending a GET request with authentication
getMenu({ custom: { auth: true }}).then(() => {
    // Handle success
}).catch(() => {
    // Handle error
});

// Sending a POST request without automatic toast and without catch
postMenu({ custom: { auth: true, toast: false, catch: false }}).then(() => {
    // Handle success
});

// Direct HTTP POST request
uni.$uv.http.post('/common/menu', { custom: { auth: true }}).then(() => {
    // Handle success
}).catch(() => {
    // Handle error
});
```

### Response
- The response structure depends on the API. The examples assume a structure handled by the response interceptor.
```

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

### Initializing Transition Animation Configuration

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/transition.md

Demonstrates the `init` method for manually setting animation configurations like duration, timing function, and delay. This method should be called after the component is ready.

```javascript
this.$refs.ani.init({
	duration: 1000,
	timingFunction: 'linear',
	transformOrigin: '50% 50%',
	delay: 500
})
```

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

### Fixed Tabbar Example

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/tabbar.md

This snippet demonstrates how to use the uv-tabbar component with the `fixed` prop set to true, ensuring it stays at the bottom of the screen. It includes basic setup with data binding for the active tab.

```vue
<template>
	<uv-tabbar :value="value" :fixed="true" @change="index=>value = index">
		<uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
		<uv-tabbar-item text="放映厅" icon="photo"></uv-tabbar-item>
		<uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
		<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
	</uv-tabbar>
</template>
<script>
	export default {
		data(){
			return {
				value: 0
			}
		}
	}
</script>
```

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

### Basic Usage of uv-transition

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/transition.md

Demonstrates how to control the visibility and apply basic styling to the transition component using the 'show' prop.

```vue
<template>
	<button type="default" @click="open">fade</button>
	<uv-transition 
		:show="show" 
		:custom-style="{'width':'100px','height':'100px','backgroundColor':'#3c9cff'}" 
		@change="change">
	</uv-transition>
</template>
<script>
	export default {
		data() {
			return {
				show: false
			}
		},
		methods: {
			open() {
				this.show = !this.show;
			},
			change(e) {
				console.log('动画触发：', e);
			}
		}
	}
</script>

```

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

### Custom Animation with uv-transition

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/transition.md

Illustrates how to define and run custom animations using the `init`, `step`, and `run` methods. The `init` method sets up animation configurations, `step` defines animation sequences, and `run` executes them.

```vue
<template>
	<view>
		<button type="primary" @click="run">执行动画</button>
		<uv-transition 
            ref="ani" 
            :custom-style="{'width':'100px','height':'100px','backgroundColor':'#3c9cff'}" 
            :show="show"  />
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: true,
		}
	},
	onReady() {
		this.$refs.ani.init({
			duration: 1000,
			timingFunction: 'linear',
			transformOrigin: '50% 50%',
			delay: 500
		})
	},
	methods: {
		run() {
			// 同时右平移到 100px,旋转 360 读 
			this.$refs.ani.step({
				translateX: '100px',
				rotate: '360'
			})
			// 上面的动画执行完成后，等待200毫秒平移到 0px,旋转到 0 读 
			this.$refs.ani.step({
				translateX: '0px',
				rotate: '0'
			},
			{
				timingFunction: 'ease-in',
				duration: 200
			})
			// 开始执行动画
			this.$refs.ani.run(()=>{
				console.log('动画支持完毕')
			})
		}
	}
}
</script>

```

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

### Get Platform Name

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/js/fastUse.md

Use the os() method to get the platform name, which will be 'ios' or 'android' in lowercase.

```javascript
uni.$uv.os()
```

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

### Importing the guid Function

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/js/guid.md

Import the guid function from the UV UI tools library if not using global configuration. This allows for direct use of the function.

```javascript
// Import
import { guid } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
// Call
guid(...);
```

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

### Queuing Transition Animation Steps

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/transition.md

Shows how to use the `step` method to define animation sequences. Multiple `step` calls create a queue, and each step can have its own configuration. The second argument allows specifying timing function and duration for the current step.

```javascript
// 上平移到 100px，同时旋转到 90 度
this.$refs.ani.step({
	translateX: '100px',
	rotate: '90'
},
{
	timingFunction: 'ease-in',
	duration: 200
})
```

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

### Vue 3 Setup: Avoiding Ref Name Conflicts

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/problem.md

When using Vue 3's setup syntax sugar, avoid naming your ref variables the same as the component tag name to prevent errors. This snippet shows the incorrect and corrected approach.

```vue
<template>
	<view style="padding-top: 100px;">
		<uv-demo ref="uvDemo"></uv-demo>
	</view>
</template>
<script setup>
	import { ref } from 'vue'
	const uvDemo = ref(null);
</script>
```

```vue
<template>
	<view style="padding-top: 100px;">
		<uv-demo ref="uvDemo1"></uv-demo>
	</view>
</template>
<script setup>
	import { ref } from 'vue'
	const uvDemo1 = ref(null);
</script>
```

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

### page()

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/js/fastUse.md

Retrieves the path of the current page, with the path starting with a '/'.

```APIDOC
## page()

### Description
Returns the path of the current page. The returned path will start with a '/'.

### Method
`uni.$uv.page()`

### Returns
(string) - The path of the current page.
```

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

### Importing Utility Functions

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/js/fastUse.md

Import specific utility functions like os, sys, and platform if global configuration is not set up.

```javascript
// Import, instance not fully written, write according to your needs
import { os, sys, platform } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import platform from '@/uni_modules/uv-ui-tools/libs/function/platform.js';
```

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

### Global HTTP Configuration Options

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/js/http.md

Lists the available configuration options for setting up global HTTP defaults. These include baseURL, headers, method, timeout, and custom validation logic.

```javascript
{
    baseURL: '',
    header: {},
    method: 'GET',
    dataType: 'json',
    // #ifndef MP-ALIPAY
    responseType: 'text',
    // #endif
    // 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
    custom: {}, // 全局自定义参数默认值
    // #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
    timeout: 60000,
    // #endif
    // #ifdef APP-PLUS
    sslVerify: true,
    // #endif
    // #ifdef H5
    // 跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX 2.6.15+）
    withCredentials: false,
    // #endif
    // #ifdef APP-PLUS
    firstIpv4: false, // DNS解析时优先使用ipv4 仅 App-Android 支持 (HBuilderX 2.8.0+)
    // #endif
    // 局部优先级高于全局，返回当前请求的task,options。请勿在此处修改options。非必填
    // getTask: (task, options) => {
    // 相当于设置了请求超时时间500ms
    //   setTimeout(() => {
    //     task.abort()
    //   }, 500)
    // },
    // 全局自定义验证器。参数为statusCode 且必存在，不用判断空情况。
    validateStatus: (statusCode) => { // statusCode 必存在。此处示例为全局默认配置
        return statusCode >= 200 && statusCode < 300
    }
}
```

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

### Get System Information

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/js/fastUse.md

The sys() method retrieves device information, equivalent to uni.getSystemInfoSync().

```javascript
uni.$uv.sys()
```

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

### Basic HTTP Methods

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/js/http.md

Demonstrates the available HTTP methods provided by uv-ui's http plugin. These methods can be used for various request types.

```javascript
uni.$uv.http.middleware(config)
uni.$uv.http.request(config)
uni.$uv.http.get(url[, config])
uni.$uv.http.upload(url[, config])
uni.$uv.http.delete(url[, data[, config]])
uni.$uv.http.head(url[, data[, config]])
uni.$uv.http.post(url[, data[, config]])
uni.$uv.http.put(url[, data[, config]])
uni.$uv.http.connect(url[, data[, config]])
uni.$uv.http.options(url[, data[, config]])
uni.$uv.http.trace(url[, data[, config]])
```

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

### POST Request Basic Usage

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/js/http.md

Demonstrates the basic usage of a POST request. Note that for POST requests, configuration options are passed as the third argument.

```javascript
// 基本用法，注意：post的第三个参数才为配置项
uni.$uv.http.post('/user/login', {userName: 'name', password: '123456'} ).then(res => {

}).catch(err => {

})
```

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

### Single and Multiple Select Tags

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/tag.md

Provides examples for implementing single and multiple selection tags with click event handling.

```vue
<template>
	<view>
		<!-- 单选 -->
		<!-- <view class="uv-page__tag-item" v-for="(item, index) in radios" :key="index">
			<uv-tags :text="`选项${index + 1}`" :plain="!item.checked" type="warning" :name="index" @click="radioClick">
			</uv-tags>
		</view> -->
		<!-- 多选 -->
		<view class="uv-page__tag-item" v-for="(item, index) in checkboxs" :key="index">
			<uv-tags 
				:text="`选项${index + 1}`" 
				:plain="!item.checked" 
				type="warning" 
				:name="index" 
				@click="checkboxClick">
			</uv-tags>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				radios: [{
					checked: true
				}, {
					checked: false
				}, {
					checked: false
				}],
				checkboxs: [{
					checked: true
				}, {
					checked: false
				}, {
					checked: false
				}]
			}
		},
		methods: {
			radioClick(name) {
				this.radios.map((item, index) => {
					item.checked = index === name ? true : false
				})
			},
			checkboxClick(name) {
				this.checkboxs[name].checked = !this.checkboxs[name].checked
			}
		}
	}
</script>
<style lang="scss">
	.uv-page__tag-item {
		margin-right: 20px;
	}
</style>
```

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

### Running Transition Animations

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/transition.md

Explains how to execute queued animations using the `run` method. A callback function can be provided to be executed once all animations are completed.

```javascript
// 开始执行动画，结束回调
this.$refs.ani.run(()=>{
	console.log('动画支持完毕')
})
```

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

### Accessing Background Color

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/js/color.md

Illustrates how to get the predefined light gray background color value '#f3f4f6' using $uv.color['bgColor'].

```javascript
export default{
	onLoad() {
		console.log(uni.$uv.color['bgColor']);
	}
}
```

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

### Import uv-ui Global SCSS Theme File

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/downloadSetting.md

Include the uv-ui global SCSS theme file in your project's `uni.scss` file to apply consistent styling.

```css
/* uni.scss */
@import '@/uni_modules/uv-ui-ui/theme.scss';
```

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

### Textarea with Custom Formatter

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/textarea.md

Implements custom input formatting using the `formatter` prop. This example filters input to allow only numeric characters.

```vue
<template>
	<uv-textarea v-model="value" :formatter="formatter" placeholder="请输入内容"></uv-textarea>
</template>
<script>
	export default {
		data() {
			return {
				value: ''
			}
		},
		methods: {
			formatter(value) {
				// 让输入框只能输入数值，过滤其他字符
				return value.replace(/[^0-9]/ig, "")
			}
		}
	}
</script>
```

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

### Vuex Store Configuration

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/guide/globalVariable.md

Set up a Vuex store in your uni-app project to manage global state. It's recommended to prefix state variables to avoid conflicts with local data.

```javascript
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		vuex_token: '123654789'
	},
	mutations: {
		// payload为用户传递的值，可以是单一值或者对象
		modifyToken(state, payload) {
			state.vuex_token = payload.token;
		}
	}
})

export default store
```

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

### Get Page Stack

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/js/fastUse.md

The pages() method is a wrapper for getCurrentPages() and returns an array of all page instances in the stack, ordered from the first page to the current page.

```javascript
uni.$uv.pages()
```

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

### Basic Textarea Usage

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/textarea.md

Demonstrates the fundamental usage of the uv-textarea component with a placeholder.

```vue
<template>
	<uv-textarea v-model="value" placeholder="请输入内容"></uv-textarea>
</template>
<script>
	export default {
		data() {
			return {
				value: ''
			}
		}
	}
</script>
```

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

### Basic Tabbar Usage

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/tabbar.md

Demonstrates the basic setup of the uv-tabbar component with uv-tabbar-item elements. The `value` prop controls the active item, and the `@change` event updates it.

```vue
<template>
	<uv-tabbar :value="value" @change="index=>value = index">
		<uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
		<uv-tabbar-item text="放映厅" icon="photo"></uv-tabbar-item>
		<uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
		<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
	</uv-tabbar>
</template>
<script>
	export default {
		data() {
			return {
				value: 0
			}
		}
	}
</script>
```

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

### 在main.js中引入和挂载API管理

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/js/apiManage.md

在`main.js`中引入`http.api.js`并使用`Vue.use()`进行挂载。此部分代码应放在拦截器引入之后。

```javascript
// 其他已有内容
const app = new Vue({
  ...App
})

// http拦截器，将此部分放在new Vue()和app.$mount()之间，才能App.vue中正常使用
import httpInterceptor from '@/common/http.interceptor.js'
Vue.use(httpInterceptor, app)

// http接口API集中管理引入部分
import httpApi from '@/common/http.api.js'
Vue.use(httpApi, app)

app.$mount()
```

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

### sys()

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/js/fastUse.md

Retrieves device information, equivalent to uni.getSystemInfoSync().

```APIDOC
## sys()

### Description
Retrieves device information, similar to `uni.getSystemInfoSync()`.

### Method
`uni.$uv.sys()`
```

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

### Basic SwipeAction Usage

Source: https://github.com/bzliukai/uv-ui-doc-cur/blob/master/docs/components/swipeAction.md

Demonstrates the fundamental setup of the SwipeAction component with a single delete button. Ensure unique keys when using v-for to prevent data corruption.

```vue
<template>
	<view>
		<uv-swipe-action>
			<uv-swipe-action-item :options="options">
				<view class="swipe-action uv-border-top uv-border-bottom">
					<view class="swipe-action__content">
						<text class="swipe-action__content__text">基础使用</text>
					</view>
				</view>
			</uv-swipe-action-item>
		</uv-swipe-action>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}]
			};
		},
	};
</script>
<style lang="scss">
	.uv-page {
		padding: 0;
	}
	.uv-demo-block__title {
		padding: 10px 0 2px 15px;
	}
	.swipe-action {
		&__content {
			padding: 25rpx 0;
			&__text {
				font-size: 15px;
				color: #222;
				padding-left: 30rpx;
			}
		}
	}
</style>
```