uv-ui

https://www.uvui.cn/
Admin
uv-ui is an ecological UI framework based on uni-app and uView2.x, offering comprehensive components...
Tokens:201,030
Snippets:764
Trust Score:1.6
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install uv-ui via NPM

Source: https://www.uvui.cn/components/install

Installs the uv-ui component library using npm. This is a common method for managing project dependencies. Ensure you have Node.js and npm installed.

```bash
npm i @climblee/uv-ui
```

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

### Configure easycom for uv-ui in pages.json

Source: https://www.uvui.cn/components/install

Configures the easycom component framework in the pages.json file to enable automatic scanning and importing of uv-ui components. This simplifies component usage by removing the need for manual imports.

```json
{
    "easycom": {
		"autoscan": true,
		"custom": {
			"^uv-(.*)": "@climblee/uv-ui/components/uv-$1/uv-$1.vue"
		}
	},
    // other content
    pages:[
        // ...
    ]
}
```

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

### Making GET Requests with uv-ui

Source: https://www.uvui.cn/js/http

This example illustrates how to perform a GET request using the uv-ui http plugin. It shows the basic usage where parameters and configuration are passed in the second argument. It also details how to include parameters in the URL and how local configurations can override global settings, including custom parameters for interceptors.

```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: {auth: true}, // 可以加一些自定义参数，在拦截器等地方使用。
    // #ifndef MP-ALIPAY
    responseType: 'text',
    // #endif
    // #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
    timeout: 60000, 
    // #endif
    // #ifdef APP-PLUS
    sslVerify: true, 
    // #endif
    // #ifdef APP-PLUS
    firstIpv4: false, 
    // #endif
    // #ifdef H5
    withCredentials: false,
    // #endif
    getTask: (task, options) => {
         // 相当于设置超时时间500ms
         // setTimeout(() => {
         //   task.abort()
         // }, 500)
    }
}).then(res => {

}).catch(err => {

})

```

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

### Install uv-ui via HBuilderX Plugin Market

Source: https://context7.com/context7/uvui_cn/llms.txt

This describes the manual installation process of uv-ui using the HBuilderX plugin market. It involves downloading the plugin, importing it into HBuilderX, and restarting the project. This is an alternative to npm installation.

```text
1. 访问插件市场：https://ext.dcloud.net.cn/plugin?name=uv-ui
2. 点击"下载插件并导入HBuilderX"
3. 选择对应项目导入
4. 重启项目即可使用
```

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

### Install uv-ui using npm

Source: https://context7.com/context7/uvui_cn/llms.txt

This command installs the uv-ui package via npm. It's a prerequisite for using the uv-ui components in your project. Ensure you have Node.js and npm installed.

```bash
# 安装 uv-ui
npm i @climblee/uv-ui
```

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

### Basic Usage Example

Source: https://www.uvui.cn/components/noNetwork

A basic example demonstrating how to use the uv-no-network component in a Vue template.

```APIDOC
## Basic Usage

```vue
<template>
	<view>
		<uv-no-network @disconnected="disconnected" @connected="connected" @retry="retry"></uv-no-network>
		<!-- Your business logic below -->
		<view class="uv-content">
			<view class="uv-content__circle">
				<uv-icon name="checkbox-mark" color="#fff" size="30"></uv-icon>
			</view>
			<text class="uv-content__normal">Network is normal</text>
		</view>
	</view>
</template>

<script>
export default {
	methods: {
		disconnected() {
			console.log('disconnected');
		},
		connected() {
			console.log('connected');
		},
		retry() {
			console.log('retry');
		}
	},
}
</script>

<style lang="scss" scoped>
@mixin flex($direction: row) {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: $direction;
}
.uv-content {
	padding: 150px 60px 0;
	@include flex(column);
	align-items: center;
	justify-content: center;
	&__circle {
		background-color: #5ac725;
		@include flex;
		border-radius: 100px;
		width: 60px;
		height: 60px;
		align-items: center;
		justify-content: center;
	}
	&__normal {
		font-size: 30rpx;
		color: #5ac725;
		margin-top: 30rpx;
	}
}
</style>
```
```

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

### Vue3 Setup 语法糖中避免 ref 与组件名重名

Source: https://www.uvui.cn/components/problem

当在 Vue 3 的 setup 语法糖中使用 `ref` 时，如果 `ref` 的名称与组件名相同，会导致报错。此示例展示了如何通过修改 `ref` 的名称来解决此问题，确保组件能正常渲染。

```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>

```

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

### Vue: uv-ui Button Component Examples

Source: https://context7.com/context7/uvui_cn/llms.txt

Demonstrates various configurations and usages of the uv-ui Button component. Includes examples for different types, states (disabled, loading), shapes, sizes, and custom styling. This snippet shows how to implement buttons with diverse visual and functional requirements.

```vue
<template>
  <view style="padding: 20px;">
    <!-- 基础按钮 -->
    <uv-button text="确定"></uv-button>

    <!-- 主题类型按钮 -->
    <uv-button type="primary" text="主要按钮"></uv-button>
    <uv-button type="success" text="成功按钮"></uv-button>
    <uv-button type="error" text="错误按钮"></uv-button>
    <uv-button type="warning" text="警告按钮"></uv-button>

    <!-- 镂空和细边按钮 -->
    <uv-button type="primary" :plain="true" text="镂空按钮"></uv-button>
    <uv-button type="primary" :plain="true" :hairline="true" text="细边按钮"></uv-button>

    <!-- 禁用和加载状态 -->
    <uv-button type="primary" :disabled="true" text="禁用按钮"></uv-button>
    <uv-button type="primary" loading loadingText="加载中"></uv-button>

    <!-- 图标按钮 -->
    <uv-button type="primary" icon="search" text="搜索"></uv-button>

    <!-- 圆角和尺寸 -->
    <uv-button type="primary" shape="circle" text="圆角按钮"></uv-button>
    <uv-button type="primary" size="small" text="小尺寸"></uv-button>
    <uv-button type="primary" size="large" text="大尺寸"></uv-button>

    <!-- 渐变色按钮 -->
    <uv-button
      text="渐变色"
      color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
    ></uv-button>

    <!-- 自定义样式 -->
    <uv-button
      :custom-style="customStyle"
      color="#fff"
      text="自定义样式"
    ></uv-button>
  </view>
</template>

<script>
export default {
  computed: {
    customStyle() {
      return {
        height: '80rpx',
        background: '#3c9cff',
        color: '#fff',
        borderRadius: '40rpx'
      }
    }
  }
}
</script>
```

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

### UV-UI Overlay: Basic Usage Example

Source: https://www.uvui.cn/components/overlay

演示了 `uv-overlay` 组件的基本使用方法。通过 `show` 属性控制遮罩层的显示与隐藏。当遮罩层被点击时，会触发 `click` 事件，将 `show` 设置为 `false` 以关闭遮罩层。

```vue
<template>
	<uv-overlay :show="show" @click="show = false"></uv-overlay>
</template>
<script>
	export default {
		data() {
			return {
				show: true
			}
		}
	}
</script>
```

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

### UV-Calendar Basic Usage Example

Source: https://www.uvui.cn/components/calendar

Demonstrates the fundamental integration of the uv-calendar component. It shows how to open and close the calendar using refs and how to handle confirmed selections via the @confirm event.

```vue
<template>
	<view>
		<uv-calendar ref="calendar" @confirm="confirm"></uv-calendar>
		<button @click="open">打开</button>
	</view>
</template>
<script>
	export default {
		methods: {
			open() {
				this.$refs.calendar.open();
			},
			confirm(e) {
				console.log('日历选择：',e)
			}
		}
	}
</script>

```

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

### Configuring Navbar Background

Source: https://www.uvui.cn/components/navbar

Demonstrates how to set the background color, transparency, gradients, and images for the uv-navbar.

```APIDOC
## Configuring Navbar Background

### Description
This example illustrates various ways to set the background of the `uv-navbar`, including solid colors, transparent colors, gradients, and background images.

### Method
`template`

### Endpoint
N/A (Component Usage)

### Parameters
#### Props
- `bgColor` (String): The background color. Supports CSS color values, rgba, and linear-gradient.
- `imgMode` (String): The image scaling mode when `bgColor` is an image URL. Defaults to `aspectFill`.

### Request Example
```html
<template>
	<view>
		<!-- 普通颜色 -->
		<uv-navbar title="个人中心" bgColor="#c0c4cc"></uv-navbar>
		<!-- 透明色 -->
		<uv-navbar title="个人中心" bg-color="rgba(0,0,0,.5)"></uv-navbar>
		<!-- 渐变色 -->
		<uv-navbar 
			title="个人中心" 
			bg-color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))">
		</uv-navbar>
		<!-- 背景图片 -->
		<uv-navbar 
			title="个人中心" 
			bg-color="https://via.placeholder.com/400x200.png/3c9cff/fff" 
			imgMode="aspectFit">
		</uv-navbar>
	</view>
</template>
```

### Response
N/A (Component Usage)

### Response Example
N/A (Component Usage)
```

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

### GET Request

Source: https://www.uvui.cn/js/http

Details on how to perform GET requests, including how parameters and configuration options are handled.

```APIDOC
## GET Request

### Description
GET requests differ slightly from POST requests. In GET requests, all parameters and configuration options are included in the second argument. For POST requests, the second argument is the request parameters (`data`), and the third argument is the configuration item.

### Basic Usage

```javascript
// Basic usage, note: parameters and configuration items for GET requests are in the second argument
uni.$uv.http.get('/user/login', {
    params: {
        userName: 'name',
        password: '123456'
    }
}).then(res => {
    // Handle successful response
}).catch(err => {
    // Handle error
})
```

### Local Configuration Overrides

Local configurations take precedence over global configurations.

```javascript
// Modify configuration locally, local configuration priority is higher than global configuration
uni.$uv.http.get('/user/login', {
    params: {
        userName: 'name',
        password: '123456' /* Will be appended to the URL */
    },
    header: {}, /* Will be merged with global header, local overwrites global if property names are the same */
    dataType: 'json',
    // Note: If local 'custom' has the same property as global 'custom', the latter will overwrite the former, equivalent to Object.assign(global, local)
    custom: { auth: true }, // Custom parameters can be added here, used in interceptors etc. For example, adding 'auth' here, if true, token will be sent.
    // #ifndef MP-ALIPAY
    responseType: 'text',
    // #endif
    // #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
    timeout: 60000, // Supported in H5(HBuilderX 2.9.9+), APP(HBuilderX 2.9.9+), WeChat Mini Program (2.10.0), Alipay Mini Program
    // #endif
    // #ifdef APP-PLUS
    sslVerify: true, // Verify SSL certificate, only supported in App-Android (HBuilderX 2.3.3+)
    // #endif
    // #ifdef APP-PLUS
    firstIpv4: false, // Prioritize using ipv4 during DNS resolution, only App-Android supported (HBuilderX 2.8.0+)
    // #endif
    // #ifdef H5
    withCredentials: false, // Whether to carry credentials (cookies) for cross-domain requests, only H5 supported (HBuilderX 2.6.15+)
    // #endif
    // Returns the current request task and options. Do not modify options here. Not a required field.
    getTask: (task, options) => {
         // Equivalent to setting a request timeout of 500ms
         // setTimeout(() => {
         //   task.abort()
         // }, 500)
    },
    // validateStatus: (statusCode) => { // statusCode must exist. This is a global default configuration example. For demonstration, not a required option.
    //  return statusCode >= 200 && statusCode < 300
    //}
}).then(res => {
    // Handle successful response
}).catch(err => {
    // Handle error
})
```
```

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

### UV-UI Overlay: Styling and Duration Example

Source: https://www.uvui.cn/components/overlay

展示了如何通过 `duration` 属性控制 `uv-overlay` 组件的淡入淡出动画时长（单位为毫秒），以及通过 `z-index` 和 `opacity` 属性调整其层级和透明度。

```vue
<uv-overlay :show="true" :duration="400" :z-index ="999" :opacity="0.3"></uv-overlay>
```

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

### Basic Textarea Usage with uv-ui

Source: https://www.uvui.cn/components/textarea

Demonstrates the fundamental implementation of the uv-textarea component, showing how to bind input values and set placeholders. It's a core example for integrating the component into a Vue template.

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

```

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

### Basic uv-line Usage (Vue)

Source: https://www.uvui.cn/components/line

Demonstrates the basic usage of the uv-line component for creating simple dividers. It shows examples of default initialization, custom color, direction, and length.

```html
<template>
	/* 基础使用 */
	<uv-line></uv-line>
	
	/* 自定义颜色 */
	<uv-line color="#2979ff"></uv-line>
	
	/* 自定义线条方向 */
	<uv-line direction="col"></uv-line>
	
	/* 自定义线条长度 */
	<uv-line length="50%"></uv-line>
</template>
```

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

### Node Layout Info in vue3 Setup with $uv.getRect

Source: https://www.uvui.cn/js/getRect

This example demonstrates how to get node layout information within a vue3 `script setup` block using `$uv.getRect`. It leverages `onReady` lifecycle hook and `getCurrentInstance` to access the `$uv` instance and its `getRect` method asynchronously.

```javascript
<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)
		})
	})
</script>
```

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

### Manual Control of Countdown Timer

Source: https://www.uvui.cn/components/countDown

This example demonstrates manual control over the countdown timer using refs. It shows how to get a reference to the `uv-count-down` component and use its `start`, `pause`, and `reset` methods to manage the timer's lifecycle. The timer is initially set not to auto-start.

```html
<template>
	<uv-count-down 
		ref="countDown" 
		:time="10* 1000" 
		format="ss:SSS" 
		:autoStart="false" 
		millisecond 
		@change="onChange">
	</uv-count-down>
	<button type="primary" size="small" @click="reset">重置</button>
	<button type="primary" size="small" @click="start">开始</button>
	<button type="primary" size="small" @click="pause">暂停</button>
</template>
<script>
	export default {
		data() {
			return {
				timeData: {}
			}
		},
		methods: {
			//开始
			start() {
				this.$refs.countDown.start();
			},
			// 暂停
			pause() {
				this.$refs.countDown.pause();
			},
			// 重置
			reset() {
				this.$refs.countDown.reset();
			},
			onChange(e) {
				this.timeData = e
			}
		}
	}
</script>

```

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

### Basic Usage of Overlay

Source: https://www.uvui.cn/components/overlay

Demonstrates how to show or hide the overlay using the `show` prop and how to handle click events.

```APIDOC
## Basic Usage

- Configure whether to display the mask using the `show` parameter.
- When the mask is clicked, a `click` event is emitted. If this event is not needed, set the `mask-clickable` parameter to `false`.

```vue
<template>
	<uv-overlay :show="show" @click="show = false"></uv-overlay>
</template>
<script>
	export default {
		data() {
			return {
				show: true
			}
		}
	}
</script>
```
```

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

### Get Current Page Path (page)

Source: https://www.uvui.cn/js/fastUse

The `page()` method returns the path of the current page, starting with a '/'. This is a convenient way to get the current route within the uni-app application.

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

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

### Configure vue.config.js for uv-ui transpilation

Source: https://www.uvui.cn/components/install

Configures the vue.config.js file to transpile the uv-ui package when using vue2-cli with npm installations. This resolves issues where babel-loader might ignore node_modules, preventing conditional compilation from working correctly.

```javascript
// create vue.config.js file in the root directory, and configure as follows
module.exports = {
    transpileDependencies: ['@climblee/uv-ui']
}
```

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

### Get Node Info After Data Fetch in vue using $uv.getRect and $nextTick

Source: https://www.uvui.cn/js/getRect

This code snippet shows how to get node layout information after data has been fetched and rendered in a vue component. It uses `this.$nextTick` to ensure the DOM is updated before calling `$uv.getRect`, providing accurate dimensions for dynamically rendered content. The example includes a simulated HTTP POST request.

```javascript
<template>
	<view>
		<view class="user-name">
			{{userName}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName: ''
			}
		},
		onLoad() {
			this.getElInfo();
		},
		methods: {
			getElInfo() {
				uni.$uv.http.post('http://www.example.com/user/info').then(res => {
					this.userName = res.name;
					this.$nextTick(() => {
						this.$uv.getRect('.user-avatar').then(rect => {
							console.log(rect);
						})
					})
				})
			}
		}
	}
</script>
```

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

### Import uv-ui Tools Functions

Source: https://www.uvui.cn/js/fastUse

Demonstrates how to import specific utility functions like os, sys, and platform from the uv-ui-tools library for on-demand usage. This is useful when global extension configuration is not applied.

```javascript
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';
```

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

### Basic Usage

Source: https://www.uvui.cn/components/skeleton

Demonstrates the basic implementation of the Skeleton component with title, paragraph, and avatar placeholders.

```APIDOC
## Basic Usage

### Description
This example shows the fundamental usage of the `uv-skeleton` component. It includes configuration for rows, title, and avatar.

### Method
N/A (Component Usage)

### Endpoint
N/A

### Parameters
- `rows`: Specifies the number of paragraph rows to display.
- `title`: Controls the visibility of the title placeholder.
- `avatar`: Controls the visibility of the avatar placeholder.
- `loading`: Indicates the loading state. When `true`, the skeleton is shown; when `false`, the content within the slot is displayed.

### Request Example
```html
<template>
	<uv-skeleton rows="3" title avatar loading></uv-skeleton>
</template>
```

### Response
#### Success Response (N/A)
N/A

#### Response Example
N/A
```

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

### Basic Navbar Usage in Vue

Source: https://www.uvui.cn/components/navbar

Demonstrates the fundamental usage of the uv-navbar component in a Vue template. It includes setting a title and handling a click event on the left icon. This snippet requires the uv-ui framework to be installed.

```vue
<template>
	<view>
		<uv-navbar title="个人中心" @leftClick="leftClick"></uv-navbar>
	</view>
</template>
<script>
	export default {
		methods: {
			leftClick() {
				console.log('leftClick');
			}
		}
	}
</script>
```

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

### UVUI Icon Component Examples

Source: https://context7.com/context7/uvui_cn/llms.txt

Demonstrates the usage of the UVUI Icon component, including basic display, custom colors and sizes, icon combinations, image icons from URLs, icons with labels, and clickable icons with event handling.

```vue
<template>
  <view style="padding: 20px;">
    <!-- 基础图标 -->
    <uv-icon name="photo"></uv-icon>

    <!-- 自定义颜色和大小 -->
    <uv-icon name="photo" color="#2979ff" size="28"></uv-icon>
    <uv-icon name="search" color="primary" size="32"></uv-icon>

    <!-- 多个图标组合 -->
    <view style="display: flex; gap: 10px;">
      <uv-icon name="home" color="#3c9cff" size="24"></uv-icon>
      <uv-icon name="star" color="#f9ae3d" size="24"></uv-icon>
      <uv-icon name="heart" color="#f56c6c" size="24"></uv-icon>
      <uv-icon name="setting" color="#909399" size="24"></uv-icon>
    </view>

    <!-- 图片图标（在线地址）-->
    <uv-icon
      size="40"
      name="https://via.placeholder.com/50x50.png/3c9cff/fff"
    ></uv-icon>

    <!-- 带标签的图标 -->
    <uv-icon
      name="email"
      color="#3c9cff"
      size="24"
      label="邮件"
      labelPos="right"
      labelSize="14"
      labelColor="#606266"
    ></uv-icon>

    <uv-icon
      name="phone"
      color="#19be6b"
      size="24"
      label="电话"
      labelPos="bottom"
      labelSize="12"
      labelColor="#909399"
    ></uv-icon>

    <!-- 可点击图标 -->
    <uv-icon
      name="close-circle"
      color="#f56c6c"
      size="24"
      index="closeBtn"
      @click="handleIconClick"
    ></uv-icon>
  </view>
</template>

<script>
export default {
  methods: {
    handleIconClick(index) {
      console.log('点击了图标:', index)
      uni.showToast({
        title: '点击了关闭图标',
        icon: 'none'
      })
    }
  }
}
</script>
```

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

### Customizing Animations with uv-transition Methods

Source: https://www.uvui.cn/components/transition

Shows how to create custom animation sequences using the 'init', 'step', and 'run' methods of the uv-transition component. The 'init' method configures animation properties, 'step' defines animation keyframes, and 'run' executes the defined sequence.

```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>
```

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

### Date Range Selection Mode in uv-calendars

Source: https://www.uvui.cn/components/calendars

Details the configuration for selecting a range of dates using the uv-calendars component by setting the `mode` attribute to 'range'. It includes an example of initializing the range selection with specific start and end dates via the `date` attribute.

```vue
<template>
	<view>
		<uv-calendars ref="calendars" mode="range" @confirm="confirm" />
		<button @click="open">打开日历</button>
	</view>
</template>
<script>
	export default {
		methods: {
			open() {
				this.$refs.calendars.open();
			},
			confirm(e) {
				console.log(e)
			}
		}
	}
</script>
```

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

### Customizing Navbar Left Slot Content

Source: https://www.uvui.cn/components/navbar

Shows how to override the default left content of the uv-navbar using a template slot. This example includes custom icons and a vertical line, demonstrating advanced UI customization. It requires uv-ui components like `uv-icon` and `uv-line`.

```vue
<template>
	<view>
		<uv-navbar leftText="返回" :fixed="false" title="个人中心" :safeAreaInsetTop="false">
			<template v-slot:left>
				<view class="uv-nav-slot">
					<uv-icon name="arrow-left" size="19"></uv-icon>
					<uv-line direction="column" :hairline="false" length="16" margin="0 8px"></uv-line>
					<uv-icon name="home" size="20"></uv-icon>
				</view>
			</template>
		</uv-navbar>
	</view>
</template>
<style scoped lang="scss">
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
</style>
```

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

### Generate guid for Element Class (Vue)

Source: https://www.uvui.cn/js/guid

Shows how to use the guid function within a Vue component's computed property to dynamically generate a unique class name for an element. The guid function is called with a length of 20.

```html
<template>
	<view :class="className"></view>
</template>

```

```javascript
<script>
	export default {
		computed: {
			className() {
				return uni.$uv.guid(20);
			}
		},
		onLoad() {
			console.log(uni.$uv.guid());
		}
	}
</script>

```

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

### uv-pick-color Basic Usage

Source: https://www.uvui.cn/components/pickColor

Demonstrates the basic usage of the uv-pick-color component, showing how to open it using a ref and handle the confirm event.

```APIDOC
## uv-pick-color Basic Usage

### Description
This example shows how to use the `uv-pick-color` component. You can control the component's opening via its `ref` and listen for the `@confirm` event to get the selected color value.

### Method
This is a Vue component example, not a direct API endpoint.

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```html
<template>
	<view>
		<uv-pick-color ref="pickerColor" @confirm="confirm"></uv-pick-color>
		<button @click="openColor">打开</button>
	</view>
</template>
<script>
	export default {
		methods: {
			openColor() {
				this.$refs.pickerColor.open();
			},
			confirm(e) {
				console.log('confirm', e)
			}
		}
	}
</script>
```

### Response
#### Success Response (200)
N/A for component events.

#### Response Example
On `@confirm` event, `e` will be the selected color value, e.g., `{hex: "#000000", rgba:{r:0,g:0,b:0,a:0}}`.
```

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

### Get Layout Info for All Matching Nodes in vue using $uv.getRect(selector, true)

Source: https://www.uvui.cn/js/getRect

This example demonstrates how to retrieve layout information for all elements matching a given selector in a vue component. By passing `true` as the second argument to `$uv.getRect`, the method returns an array of layout objects, one for each matching element. This is useful when dealing with lists or multiple instances of the same component.

```javascript
<template>
	<view>
		<view class="item">
			uv-ui
		</view>
		<view class="item">
			<view>红豆生南国，春来发几枝</view>
			<view>愿君多采撷，此物最相思</view>
		</view>
	</view>
</template>

<script>
	export default {
		onReady() {
			this.getElInfo();
		},
		methods: {
			getElInfo() {
				this.$uv.getRect('.item', true).then(rect => {
					// rect为一个数组(内有2个元素)，因为页面有2个.item节点
					console.log(rect);
				})
			}
		}
	}
</script>
```

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

### 使用 uv-ui 图标组件

Source: https://www.uvui.cn/components/quickstart

展示了如何在模板中直接使用 uv-ui 的图标组件，通过 `name`、`size` 和 `color` 属性进行配置。此组件无需通过 import 引入。

```html
<uv-icon name="photo" size="30" color="#909399"></uv-icon>
```

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

### Basic Usage of uv-drop-down Component

Source: https://www.uvui.cn/components/dropDown

Demonstrates the fundamental setup of the uv-drop-down component, including its associated items and popup. This example shows how to configure filter options for sorting and document types, along with a VIP document toggle. It highlights the importance of the 'sign' prop for unique identification and the 'defaultValue' for setting initial states. The 'onPageScroll' method is included to ensure the dropdown's position is updated correctly during scrolling.

```html
<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>

```

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

### Basic Usage

Source: https://www.uvui.cn/components/calendars

Demonstrates how to open the calendar in popup mode using a ref and the open() method. It also shows how to handle the confirm event.

```APIDOC
## Basic Usage

This section shows the basic implementation of the `uv-calendars` component.

### Method
To open the calendar in popup mode, you need to use a ref to access the component's `open()` method.

### Endpoint
N/A (Component usage)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```html
<template>
	<view>
		<uv-calendars ref="calendars" @confirm="confirm" />
		<button @click="open">打开日历</button>
	</view>
</template>
<script>
	export default {
		methods: {
			open() {
				this.$refs.calendars.open();
			},
			confirm(e) {
				console.log(e)
			}
		}
	}
</script>
```

### Response
#### Success Response (200)
(Event emitted when a date is confirmed)

#### Response Example
(The `e` object in the `confirm` method will contain the selected date(s).)

```

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

### Import and Use guid Function (JavaScript)

Source: https://www.uvui.cn/js/guid

Demonstrates how to import the guid function from uvui and use it. This function generates a globally unique, random identifier. It can be used without arguments, taking default values for length, prefix, and radix.

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

```

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

### uv-back-top API Documentation

Source: https://www.uvui.cn/components/backTop

Detailed API documentation for the uv-back-top component, including all available props, methods, and slots for comprehensive control and customization.

```APIDOC
## uv-back-top API Documentation

### Props
| Parameter | Description | Type | Default | Optional Values |
|---|---|---|---|---|
| mode | Button shape, 'circle' for round, 'square' for square | String | circle | circle | square |
| icon | uv-ui built-in icon name, or image path | String | arrow-upward | - |
| text | Text prompt for the back-to-top button | String | - | - |
| duration | Transition time for the back-to-top process, in ms | String | Number | 100 | - |
| scrollTop | Page scroll distance, obtained via `onPageScroll` lifecycle | String | Number | 0 | - |
| top | Scroll distance threshold for displaying the button, in px(rpx) | String | Number | 400 | - |
| bottom | Distance from the bottom of the screen to the back button position, in px(rpx) | String | Number | 100 | - |
| right | Distance from the right side of the screen to the back button position, in px(rpx) | String | Number | 20 | - |
| z-index | Layering level of the back-to-top button | String | Number | 9 | - |
| iconStyle | Styles for the icon, in object format | Object | - | - |
| customStyle | Custom styles for the button's outer layer | Object | - | - |

### Methods
| Method Name | Description |
|---|---|
| backToTop | Can be called to return to the top when using custom content. |

### Slots
| Name | Description |
|---|---|
| default | All content for the custom back button. |

### Notes
- If an image path is provided via the `icon` parameter, you need to set the `width` and `height` properties using the `iconStyle` parameter.
```

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

### Basic Usage

Source: https://www.uvui.cn/components/keyboard

Demonstrates the basic usage of the uv-keyboard component, including how to set the mode and control opening/closing.

```APIDOC
## Basic Usage

Use the `mode` prop to define the keyboard type and the `ref` attribute to call the `open()` method to control the component's visibility.

- `mode = "car"` (default): Car license plate keyboard. The prompt text in the middle of the top toolbar will be "车牌号键盘".
- `mode = "number"`: Numeric keyboard. The prompt text in the middle of the top toolbar will be "数字键盘".
- `mode = "card"`: ID card keyboard. The prompt text in the middle of the top toolbar will be "身份证键盘".

```vue
<template>
	<view>
		<uv-keyboard ref="keyboard" mode="car" @change="change" @confirm="confirm"></uv-keyboard>
		<button @click="open">打开</button>
	</view>
</template>
<script>
	export default {
		methods: {
			open() {
				this.$refs.keyboard.open();
			},
			change(e) {
				console.log('change', e)
			},
			confirm() {
				console.log('confirm')
			}
		}
	}
</script>
```
```

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

### 全局使用JS工具库 - Vue 3 Setup

Source: https://www.uvui.cn/components/setting

在 Vue 3 Setup 语法糖中全局使用 uv-ui 的 JS 工具库方法，需要通过 getCurrentInstance 获取上下文。

```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>

```

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

### 配置 webpack-dev-server 禁用 Host 检查

Source: https://www.uvui.cn/guide/note

在 uniapp 项目根目录下创建或修改 `vue.config.js` 文件，配置 `webpack-dev-server` 的 `disableHostCheck` 选项为 `true`，以允许外部访问本地调试网页，常用于内网穿透场景。

```javascript
module.exports = {
	configureWebpack: {
		devServer: {
		    disableHostCheck: true
		}
	}
}
```

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

### Override onShareTimeline in Vue 3 Setup for WeChat Moments

Source: https://www.uvui.cn/js/mpShare

Override the onShareTimeline lifecycle hook in Vue 3 using the setup syntax for custom sharing to WeChat Moments. It is recommended to implement this within the onReady hook or with a delay.

```javascript
<script setup>
	import { onReady, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	onReady(() => {
		onShareTimeline(()=>{
			return {
				title: '自定义分享标题',
				path: '/pages/test/test?id=123'
			}
		})
	})
</script>

```

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

### Basic Transition Usage with uv-transition

Source: https://www.uvui.cn/components/transition

Demonstrates the fundamental usage of the uv-transition component by controlling its visibility with the 'show' prop and handling animation events. It requires the 'show' prop to toggle the animation and optionally listens for a 'change' event.

```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>
```

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

### Override onShareAppMessage in Vue 3 Setup

Source: https://www.uvui.cn/js/mpShare

Override the default onShareAppMessage lifecycle hook in Vue 3 using the setup syntax for custom sharing logic. It is recommended to implement this within the onReady hook or with a delay to ensure successful overriding.

```javascript
<script setup>
	import { onReady, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	onReady(() => {
		onShareAppMessage(()=>{
			return {
				title: '自定义分享标题',
				path: '/pages/test/test?id=123'
			}
		})
	})
</script>

```

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

### Basic uv-input Usage with Placeholder and Border

Source: https://www.uvui.cn/components/input

Demonstrates the fundamental usage of the uv-input component. It shows how to set a placeholder, bind input values using v-model, configure border styles, and handle input changes via the @change event. This is a core example for integrating the input field into a form.

```vue
<template>
  <uv-input placeholder="请输入内容" border="surround" v-model="value" @change="change"></uv-input>
</template>

<script>
	export default {
      data() {
        return {
          value: ''
        }
      },
      methods: {
        change(e) {
          console.log('change', e);
        }
      }
	}
</script>

```

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

### Basic Usage

Source: https://www.uvui.cn/components/icon

Demonstrates how to use the `uv-icon` component with basic configuration.

```APIDOC
## Basic Usage

### Description

Use the `<uv-icon>` tag and set the `name` attribute to the desired icon name. The `color` defaults to `#606266` and `size` defaults to `16px`.

### Code Example

```html
<uv-icon name="photo"></uv-icon>
```
```
Tokens:
Raw