UV-UI

https://www.uvui.cn/components/
Admin
UV-UI is a comprehensive UI framework for uni-app that supports Vue 3+2, NVue, App, H5, and multiple...
Tokens:150,605
Snippets:1,222
Trust Score:1.6
Update:2 months ago
Show doc for...
Tokens:
Raw
### Vue3 Setup 语法糖中 ref 与组件名重名示例

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

当在Vue3的setup语法糖中，使用的ref名称与组件名重名时，会导致报错。此示例展示了错误用法和正确的解决方案，即修改ref的名称。

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

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

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

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

Access UV-UI utility functions globally via `uni.$uv.xxx()` or `ctx.$uv.xxx()` in Vue 3 projects using the setup syntax.

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

```

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

### Basic Skeleton Usage

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

Demonstrates the basic setup of the skeleton component with a specified number of rows. Ensure 'loading' is set to true to display the skeleton.

```html
<template>
	<uv-skeleton rows="3" title loading></uv-skeleton>
</template>
```

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

### Basic Usage of PickColor

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

Demonstrates how to open the color picker using a ref and handle the confirm event to get the selected color.

```template
<template>
	<view>
		<uv-pick-color ref="pickerColor" @confirm="confirm"></uv-pick-color>
		<button @click="openColor">打开</button>
	</view>
</template>
```

```script
<script>
	export default {
		methods: {
			openColor() {
				this.$refs.pickerColor.open();
			},
			confirm(e) {
				console.log('confirm', e)
			}
		}
	}
</script>
```

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

### Closable Tags Example

Source: https://www.uvui.cn/components/tag.html

Provides an example of creating closable tags with dynamic visibility control.

```vue
<template>
	<view>
		<uv-tags text="标签" size="mini" closable :show="close1" @close="close1 = false"></uv-tags>
		<uv-tags text="标签" type="warning" closable :show="close2" @close="close2 = false"></uv-tags>
		<uv-tags 
			text="标签" 
			type="success" 
			plain 
			size="large" 
			closable 
			:show="close3" 
			@close="close3 = false">
		</uv-tags>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				close1: true,
				close2: true,
				close3: true,
				radios: [{
					checked: true
				}, {
					checked: false
				}, {
					checked: false
				}],
				checkboxs: [{
					checked: true
				}, {
					checked: false
				}, {
					checked: false
				}]
			}
		}
	}
</script>
```

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

### 实现验证码倒计时功能

Source: https://www.uvui.cn/components/code.html

通过 ref 调用组件的 start 方法，并使用 change 事件更新按钮提示文本。在调用 start 前应检查 canGetCode 状态以防止重复请求。

```vue
<template>
	<view class="wrap">
		<uv-toast ref="toast"></uv-toast>
		<uv-code :seconds="seconds" @end="end" @start="start" ref="code" @change="codeChange"></uv-code>
		<uv-button @tap="getCode">{{tips}}</uv-button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tips: '',
				seconds: 10
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.code.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$uv.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.code.start();
					}, 2000);
				} else {
					uni.$uv.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$uv.toast('倒计时结束');
			},
			start() {
				uni.$uv.toast('倒计时开始');
			}
		}
	}
</script>
<style lang="scss">
	.wrap {
		padding: 24rpx;
	}
</style>
```

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

### Configure UV-UI JS Tools (HBuilderX)

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

Import and use the uv-ui-tools library in main.js for HBuilderX installations. Ensure this is placed after the App import.

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

```

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

### Basic Textarea Usage

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

Demonstrates the fundamental setup for the uv-textarea component. Use this for standard text input fields.

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

```

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

### Single and Multi-Select Tags

Source: https://www.uvui.cn/components/tag.html

Shows examples for implementing single and multi-selection behavior with tags, including 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>
```

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

### Basic Usage of LoadMore

Source: https://www.uvui.cn/components/loadMore.html

Demonstrates the fundamental use of the uv-load-more component by controlling its status prop. This example simulates data loading and updates the status accordingly.

```vue
<template>
	<view class="wrap">
		<view class="item uv-border-bottom" v-for="(item, index) in list" :key="index">{{'第' + item + '条数据'}}</view>
		<uv-load-more :status="status" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				list: 15,
				page: 0
			}
		},
		onReachBottom() {
			if (this.page >= 3) return;
			this.status = 'loading';
			this.page = ++this.page;
			setTimeout(() => {
				this.list += 10;
				if (this.page >= 3) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		}
	}
</script>
<style lang="scss" scoped>
	.wrap {
		padding: 24rpx;
	}
	.item {
		padding: 24rpx 0;
		color: #222;
		font-size: 28rpx;
	}
</style>

```

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

### Import UV-UI Theme (NPM)

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

Import UV-UI's theme.scss file into your project's uni.scss for NPM installations to enable custom theming.

```scss
/* uni.scss */

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

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

```

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

### Import UV-UI Theme (HBuilderX)

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

Import UV-UI's theme.scss file into your project's uni.scss for HBuilderX installations to enable custom theming.

```scss
/* uni.scss */

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

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

```

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

### Basic Tabbar Usage

Source: https://www.uvui.cn/components/tabbar.html

Demonstrates the fundamental setup of a uv-tabbar with uv-tabbar-item components. Use the 'value' prop to control the active item and the '@change' event to handle item clicks.

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

```

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

### Configure UV-UI with setConfig (NPM)

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

Use `uni.$uv.setConfig` after `app.use(uvUI)` in main.js to deeply merge and modify UV-UI's internal config and props for NPM installations.

```javascript
// main.js

// hbuilderx导入安装的配置方式：
// import uvUI from '@/uni_modules/uv-ui-tools' 

// 或

// npm安装的配置方式：
import uvUI from '@climblee/uv-ui'

// #ifndef VUE3
Vue.use(uvUI);
// #endif
// #ifdef VUE3
app.use(uvUI);
// #endif

// 调用setConfig方法，方法内部会进行对象属性深度合并，可以放心嵌套配置
// 需要在Vue.use(uvUI)之后执行
uni.$uv.setConfig({
	// 修改$uv.config对象的属性
	config: {
		// 修改默认单位为rpx，相当于执行 uni.$uv.config.unit = 'rpx'
		unit: 'rpx'
	},
	// 修改$uv.props对象的属性
	props: {
		// 修改uv-text组件的size参数的默认值，注意：默认值都要用default声明
		text: {
			color: {
				default: 'red'
			}
		}
		// 其他组件属性配置，具体的参数名称可以去每个组件的props.js中进行查看
		// ......
	}
})


```

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

### Basic Usage of uv-search

Source: https://www.uvui.cn/components/search.html

Demonstrates the basic setup of the uv-search component using placeholder text and v-model for data binding. The v-model automatically updates the bound variable with input changes, eliminating the need for a separate change event listener.

```html
<template>
	<uv-search placeholder="请输入搜索内容" v-model="keyword"></uv-search>
</template>
<script>
	export default {
		data() {
			return {
				keyword: '水调歌头'
			}
		}
	}
</script>

```

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

### Basic Usage

Source: https://www.uvui.cn/components/subsection.html

Demonstrates the basic implementation of the uv-subsection component using a list of strings and handling the change event.

```APIDOC
## Basic Usage

### Description
This example shows how to use the `uv-subsection` component with a simple array of strings for its options and how to handle the selection change.

### Component
`<uv-subsection>`

### Props
- `list` (Array): An array of strings or objects representing the options.
- `current` (Number): The index of the initially active option.
- `@change` (Function): Event handler for when the selected option changes, returning the new index.

### Request Example
```html
<template>
	<uv-subsection :list="list" :current="current" @change="change"></uv-subsection>
</template>
<script>
	export default {
		data() {
			return {
				list: ['未付款', '待评价', '已付款'],
				current: 1
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>
```
```

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

### Default Date Example

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

Demonstrates how to set a default date for the calendar component using the `defaultDate` prop. This example shows setting multiple default dates for a 'multiple' mode calendar.

```vue
<template>
	<view>
		<uv-calendar ref="calendar" mode="multiple" :defaultDate="defaultDateMultiple" @confirm="confirm"></uv-calendar>
		<button @click="open">打开</button>
	</view>
</template>
<script>
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	export default {
		data() {
			return {
				defaultDateMultiple: [`${year}-${month}-${date}`, `${year}-${month}-${date + 1}`, `${year}-${month}-${date + 2}`]
			}
		},
		methods: {
			open() {
				this.$refs.calendar.open();
			},
			confirm(e) {
				console.log('日历选择：', e)
			}
		}
	}
</script>

```

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

### Mini Program Open Capabilities

Source: https://www.uvui.cn/components/text.html

For mini program open capabilities, we provide sharing functionality. Please use this within a mini program environment. Note: To use the uv-ui built-in methods mounted on uni, you need to perform the corresponding configuration according to the extension configuration - JS tool library, otherwise it will directly report an error!

```APIDOC
## Mini Program Open Capabilities

For mini program open capabilities, we provide sharing. Please use this in a mini program environment.
Note: To use the uv-ui built-in methods mounted on uni, you need to perform the corresponding configuration according to the extension configuration - JS tool library, otherwise it will directly report an error!

```vue
<uv-text text="Share to WeChat" openType="share" type="success" @click="clickHandler"></uv-text>
<script>
	export default {
		onLoad() {},
		methods: {
			clickHandler() {
				// #ifndef MP-WEIXIN
				uni.showToast({
					icon: 'none',
					title: 'Please view the effect within the WeChat mini program'
				})
				// #endif
			}
		},
	}
</script>
```
```

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

### Show Method Parameters

Source: https://www.uvui.cn/components/notify.html

Demonstrates passing all notification parameters directly to the `show` method. This provides a flexible way to configure the notification's appearance and behavior dynamically.

```APIDOC
## Show Method Parameters

Configure the notification by passing an object of parameters directly to the `show` method. This method accepts the same parameters as the component's props for detailed customization.

```vue
<template>
	<uv-notify ref="notify"></uv-notify>
</template>
<script>
	export default {
		onReady() {
			this.$refs.notify.show({
				top: 10,
				type: 'error',
				color: '#000',
				bgColor: '#e8e8e8',
				message: 'Hi uv-ui',
				duration: 1000 * 3,
				fontSize: '20rpx',
				safeAreaInsetTop: true
			})
		}
	}
</script>
```
```

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

### Popup Methods

Source: https://www.uvui.cn/components/subsection.html

Information about the `init` method, useful for initializing the component in dynamic scenarios like popups.

```APIDOC
## Popup Methods

### Description
This section describes the `init` method, which is particularly useful when the `uv-subsection` component is used within dynamic contexts such as popups or modals, where initial rendering might require explicit initialization.

### Methods Table
| Method Name | Description | Parameters |
|---|---|---|
| `init` | Initializes the component. This method can be called to ensure correct rendering and functionality, especially in scenarios like popups where initial calculations might be inaccurate before the component is fully displayed. | None |
```

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

### Basic Usage

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

Demonstrates the basic usage of the uv-overlay component. The overlay is controlled by the `show` prop and emits a `click` event when clicked, which can be used to close the overlay.

```APIDOC
## Basic Usage

- Use the `show` prop to control the visibility of the overlay.
- Clicking the overlay emits a `click` event. To disable this, set `mask-click-able` to `false`.

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

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

### Name Masking

Source: https://www.uvui.cn/components/text.html

Set `mode` to `name` and `format` to `encrypt` to mask a name. For example, '张三三' becomes '张*三'.

```html
<uv-text mode="name" text="张三三" format="encrypt"></uv-text> <!--张*三-->
```

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

### make()

Source: https://www.uvui.cn/components/qrcode.html

生成二维码。调用此方法以根据当前配置生成二维码图像。

```APIDOC
### make()

### Description
生成二维码。在调用前请确保组件已初始化。

### Usage
```javascript
this.$refs.qrcode.make({
  success: () => {
    console.log('生成成功');
  },
  fail: err => {
    console.log(err)
  }
});
```
```

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

### Basic Picker Usage

Source: https://www.uvui.cn/components/picker.html

Demonstrates the fundamental usage of the uv-picker component. Use `ref` to call `open()` and configure options via the `columns` prop. Ensure `columns` is an array of arrays to avoid display issues.

```vue
<template>
	<view>
		<uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
		<button @click="openPicker">打开</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				columns: [
					['中国', '美国', '日本']
				]
			}
		},
		methods: {
			openPicker() {
				this.$refs.picker.open();
			},
			confirm(e) {
				console.log('confirm', e);
			}
		}
	}
</script>

```

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

### Subsection with Custom Styling

Source: https://www.uvui.cn/components/subsection.html

Applies custom styles to the uv-subsection and its items using 'custom-style' and 'custom-item-style' props, for example, to set border-radius for rounded corners.

```html
<template>
	<uv-subsection 
	:list="list" 
	:current="current"
	custom-style="height: 60rpx;border-radius: 30rpx;" 
	custom-item-style="border-radius: 30rpx;" 
	@change="change"></uv-subsection>
</template>
<script>
	export default {
		data() {
			return {
				list: ['未付款', '待评价', '已付款'],
				current: 1
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

```

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

### Using uv-ui Icon Component

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

Demonstrates how to use the uv-icon component. No import is needed; simply use the component tag directly in your template.

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

```

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

### Custom Icon in Notify

Source: https://www.uvui.cn/components/notify.html

Illustrates how to customize the icon displayed in the notification using a `v-slot:icon`. The example uses an `image` tag within the slot.

```vue
<template>
	<uv-notify ref="notify" :duration="10*1000" type="error" message="HI uvui">
		<template v-slot:icon>
			<image src="https://via.placeholder.com/50x50.png/2878ff" style="width: 30rpx;height: 30rpx;" mode="aspectFit"></image>
		</template>
	</uv-notify>
</template>
<script>
	export default {
		onReady() {
			this.$refs.notify.show()
		}
	}
</script>

```

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

### Configure UV-UI JS Tools (NPM)

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

Import and use the uv-ui library from NPM in main.js. Ensure this is placed after the App import.

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

```

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

### Initialize Transition Animation Configuration

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

Call the `init()` method via the component's ref to manually set animation configurations. This should be done after the page has rendered.

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

```

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

### 异步数据初始化

Source: https://www.uvui.cn/components/readMore.html

在异步获取数据并渲染后，通过 $nextTick 调用 init 方法重新计算组件高度。

```vue
<template>
	<uv-read-more show-height="200px" :toggle="false" ref="readMore">
		<rich-text class="content" :nodes="content"></rich-text>
	</uv-read-more>
</template>
<script>
	export default {
		data() {
			return {
				content: '',
				getContent: `<p class="content">
					<p>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。</p>
					<p>明月几时有？把酒问青天。不知天上宫阙，今夕是何年。</p>
					<p>我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。</p>
					<p>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？</p>
					<p>人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</p>
					<p>译文：丙辰年的中秋节，高兴地喝酒直到第二天早晨，喝到大醉，写了这首词，同时思念弟弟苏辙。明月从什么时候才开始出现的？我端起酒杯遥问苍天。不知道在天上的宫殿，何年何月。我想要乘御清风回到天上，又恐怕在美玉砌成的楼宇，受不住高耸九天的寒冷。翩翩起舞玩赏着月下清影，哪像是在人间。月儿转过朱红色的楼阁，低低地挂在雕花的窗户上，照着没有睡意的自己。明月不该对人们有什么怨恨吧，为什么偏在人们离别时才圆呢？人有悲欢离合的变迁，月有阴晴圆缺的转换，这种事自古来难以周全。只希望这世上所有人的亲人能平安健康，即便相隔千里，也能共享这美好的月光。</p>
				</p>`
			}
		},
		async onLoad() {
			// 模拟后端请求
			this.content = await this.getData();;
			this.$nextTick(() => {
				this.$refs.readMore.init();
			})
		},
		methods: {
			getData() {
				uni.showLoading({
					title: '加载中...'
				})
				return new Promise((resolve) => {
					setTimeout(() => {
						resolve(this.getContent);
						uni.hideLoading();
					}, 1000)
				})
			}
		}
	}
</script>
<style scoped>
	.content {
		line-height: 48rpx;
		padding: 0 30rpx;
	}
</style>
```

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

### NPM 安装 uv-ui

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

在项目根目录执行此命令以安装 uv-ui 依赖包。

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

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

### Implement Waterfall in NVUE

Source: https://www.uvui.cn/components/waterfall.html

A complete example showing the template structure, script logic for data fetching, and SCSS styling required for a functional waterfall layout in NVUE.

```vue
<template>
	<view class="waterfall">
		<uv-waterfall 
		column-count="2"
		left-gap="10"
		right-gap="10"
		column-gap="8"
		@scrolltolower="init">
			<cell 
				v-for="(item,index) in list"
				class="waterfall-item-cell"
			>
				<view class="waterfall-item">
					<view class="waterfall-item__image">
							<image :src="item.image" mode="widthFix" style="border-radius: 20rpx;"></image>
					</view>
					<view class="waterfall-item__ft">
						<view class="waterfall-item__ft__title">
							<text class="value">{{item.title}}</text>
						</view>
						<view class="waterfall-item__ft__desc uv-line-2">
							<text class="value">{{item.desc}}</text>
						</view>
					</view>
				</view>
				<view style="height: 4px;width: 4px;"></view>
			</cell>
		</uv-waterfall>
	</view>
</template>
<script>
	import { guid } from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	export default {
		data() {
			return {
				list: [],// 瀑布流全部数据
				loadStatus: 'loadmore'
			}
		},
		async onLoad() {
			const { data } = await this.getData();
			this.list = data;
		},
		// 下拉刷新数据
		async onPullDownRefresh() {
			this.list = [];
			this.init();
			uni.showToast({
				icon: 'success',
				title: '刷新成功'
			})
			uni.stopPullDownRefresh();
		},
		// 触底加载更多
		async onReachBottom() {
			if(this.loadStatus == 'loadmore') {
				this.init();
			}
		},
		methods: {
			async init() {
				this.loadStatus = 'loading';
				const { data } = await this.getData();
				this.list.push.apply(this.list,data);
				this.loadStatus = 'loadmore';
			},
			// 模拟的后端数据
			getData() {
				return new Promise((resolve)=>{
					const imgs = [
						{url: 'https://via.placeholder.com/100x110.png/3c9cff/fff',width: 100, height: 110},
						{url: 'https://via.placeholder.com/200x220.png/f9ae3d/fff',width: 200, height: 220},
						{url: 'https://via.placeholder.com/300x340.png/5ac725/fff',width: 300, height: 340},
						{url: 'https://via.placeholder.com/400x400.png/f56c6c/fff',width: 400, height: 400},
						{url: 'https://via.placeholder.com/500x510.png/909399/fff',width: 500, height: 510},
						{url: 'https://via.placeholder.com/600x606.png/3c9cff/fff',width: 600, height: 606},
						{url: 'https://via.placeholder.com/310x422.png/f1a532/fff',width: 310, height: 422},
						{url: 'https://via.placeholder.com/320x430.png/3c9cff/fff',width: 320, height: 430},
						{url: 'https://via.placeholder.com/330x424.png/f9ae3d/fff',width: 330, height: 424},
						{url: 'https://via.placeholder.com/340x435.png/5ac725/fff',width: 340, height: 435},
						{url: 'https://via.placeholder.com/350x440.png/f56c6c/fff',width: 350, height: 440},
						{url: 'https://via.placeholder.com/380x470.png/909399/fff',width: 380, height: 470}
					];
					let list = [];
					const doFn = (i)=>{
						const randomIndex = Math.floor(Math.random() * 10);
						return {
							id: guid(),
							allowEdit: i==0,
							image: imgs[randomIndex].url,
							w: imgs[randomIndex].width,
							h: imgs[randomIndex].height,
							title: i % 2 == 0 ? `(${this.list.length + i + 1})体验uv-ui框架`: `(${this.list.length + i +1})uv-ui支持多平台`,
							desc: i % 2 == 0 ? `(${this.list.length + i + 1})欢迎使用uv-ui，uni-app生态专用的UI框架` : 
							`(${this.list.length + i})开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序`
						}
					};
					// 模拟异步
					setTimeout(() => {
						for (let i = 0; i < 20; i++) {
							list.push(doFn(i));
						}
						resolve({data:list});
					}, 200)
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	$show-lines: 1;
	@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
	.waterfall {
		background-color: #f1f1f1;
	}
	.waterfall-item {
		overflow: hidden;
		margin-top: 10px;
		border-radius: 6px;
	}
	.waterfall-item__ft {
		padding: 20rpx;
		background: #fff;
		&__title {
			margin-bottom: 10rpx;
			line-height: 48rpx;
			font-weight: 700;
			.value {
				font-size: 32rpx;
				color: #303133;
			}
		}
		&__desc .value {
			font-size: 28rpx;
			color: #606266;
		}
		&__btn {
			padding: 10px 0;
		}
	}
</style>
```

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

### Custom Input Formatting with formatter Prop

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

Applies custom input formatting rules 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>

```

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

### Overlay Styling

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

Illustrates how to style the overlay using props like `duration`, `z-index`, and `opacity`.

```APIDOC
## Overlay Styling

- Use the `duration` prop to set the fade-in/out duration in milliseconds.
- Use the `z-index` prop to control the stacking order.
- Use the `opacity` prop to set the opacity level.

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

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

### Combined Usage with Options

Source: https://www.uvui.cn/components/swipeAction.html

Achieve combined button effects by configuring the 'options' property within the 'options' array. This example shows disabled, normal, and auto-close states.

```html
<template>
	<view>
		<uv-swipe-action>
			<uv-swipe-action-item 
				:options="item.options" 
				v-for="(item, index) in options"
				:disabled="item.disabled" 
				:key="index">
				<view class="swipe-action uv-border-top" 
                :class="[index === options.length - 1 && 'uv-border-bottom']">
					<view class="swipe-action__content">
						<text class="swipe-action__content__text">{{ item.text }}</text>
					</view>
				</view>
			</uv-swipe-action-item>
		</uv-swipe-action>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				options: [{
					text: '禁用状态',
					disabled: true,
					options: [{
							text: '置顶',
							style: {
								backgroundColor: '#3c9cff',
							}
						},
						{
							text: '取消',
							style: {
								backgroundColor: '#f9ae3d',
							}
						},
					],
				}, {
					text: '正常状态',
					disabled: false,
					options: [{
							text: '置顶',
							style: {
								backgroundColor: '#3c9cff',
							}
						},
						{
							text: '取消',
							style: {
								backgroundColor: '#f9ae3d',
							}
						},
					],
				}, {
					text: '自动关闭',
					disabled: false,
					options: [{
							text: '置顶',
							style: {
								backgroundColor: '#3c9cff',
							}
						},
						{
							text: '取消',
							style: {
								backgroundColor: '#f9ae3d',
							}
						}
					]
				}]
			}
		}
	}
</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>
```

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

### Custom Date Formatting and Behavior

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

Defines custom text and behavior for dates using the 'formatter' function. This example sets a 'bottomInfo' and 'disabled' state for a specific date.

```vue
	day: {
		bottomInfo: "打8折",
		date: Sat Jul 22 2023 08:00:00 GMT+0800 (中国标准时间) {},
		day: 22,
		disabled: true,
		dot: true,
		month: 7,
		topInfo: "",
		week: 6
	}


```

```vue
<template>
	<view>
		<uv-calendar
			ref="calendar"
			mode="range"
			startText="住店"
			endText="离店"
			confirmDisabledText="请选择离店日期"
		></uv-calendar>
		<button @click="open">打开</button>
	</view>
</template>
<script>
	export default {
		onReady() {
			this.$refs.calendar.setFormatter(this.formatter);
		},
		methods: {
			open() {
				this.$refs.calendar.open();
			},
			confirm(e) {
				console.log('日历选择：', e)
			},
			formatter(day) {
				const d = new Date();
				let month = d.getMonth() + 1;
				const date = d.getDate();
				if (day.month == month && day.day == date + 3) {
					day.bottomInfo = '打8折';
					day.dot = true;
					day.disabled = true;
					console.log(day)
				}
				return day;
			}
		}
	}
</script>

```

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

### Customizing Tag Sizes

Source: https://www.uvui.cn/components/tag.html

Demonstrates how to set different tag sizes (mini, default, large) using the 'size' attribute.

```html
<uv-tags text="标签" plain size="mini"></uv-tags>
<uv-tags text="标签" type="warning"></uv-tags>
<uv-tags text="标签" type="success" plain size="large"></uv-tags>
```

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

### Hide Upload Button / Limit Upload Count

Source: https://www.uvui.cn/components/upload.html

The upload button is hidden when the number of uploaded files reaches the 'maxCount'. This example shows limiting uploads to one file.

```vue
<template>
	<uv-upload :fileList="fileList" name="3" :maxCount="1" multiple :previewFullImage="true"></uv-upload>
</template>
<script>
	export default {
		data() {
			return {
				fileList: [{
					url: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
				},{
					url: 'https://cdn.uviewui.com/uview/swiper/2.jpg'
				}]
			}
		}
	}
</script>
```

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

### Configuring BackTop Appearance Trigger

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

Adjust the scroll distance required for the BackTop button to appear using the `top` prop. This example sets the button to appear after scrolling 600px.

```vue
<template>
	<view class="wrap" style="height: 2000px;" ref="backTop" top="600">
		<text>滑动页面，返回顶部按钮将出现在右下角</text>
		<uv-back-top :scroll-top="scrollTop"></uv-back-top>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				scrollTop: 0
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		}
	}
</script>

```

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

### Basic Alert Usage

Source: https://www.uvui.cn/components/alert.html

Demonstrates the basic configuration of the Alert component with a title, type, and description.

```vue
<uv-alert title="uv-ui" type="warning" description="uv-ui的目标是成为uni-app生态最优秀的UI框架"></uv-alert>
```

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

### Basic Calendar Usage

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

Demonstrates how to open the calendar in popup mode using a ref and the `open()` method. The `confirm` event is triggered upon selection.

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

```

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

### Basic Usage of uv-drop-down

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

Demonstrates the structure of the dropdown menu, including item configuration and the popup container. Ensure the sign attribute matches between the dropdown and the popup to prevent conflicts.

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

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

### Configure UV-UI with setConfig (HBuilderX)

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

Use `uni.$uv.setConfig` after `Vue.use(uvUI)` in main.js to deeply merge and modify UV-UI's internal config and props for HBuilderX installations.

```javascript
// main.js

// hbuilderx导入安装的配置方式：
import uvUI from '@/uni_modules/uv-ui-tools' 

// 或

// npm安装的配置方式：
// import uvUI from '@climblee/uv-ui'

// #ifndef VUE3
Vue.use(uvUI);
// #endif
// #ifdef VUE3
app.use(uvUI);
// #endif

// 调用setConfig方法，方法内部会进行对象属性深度合并，可以放心嵌套配置
// 需要在Vue.use(uvUI)之后执行
uni.$uv.setConfig({
	// 修改$uv.config对象的属性
	config: {
		// 修改默认单位为rpx，相当于执行 uni.$uv.config.unit = 'rpx'
		unit: 'rpx'
	},
	// 修改$uv.props对象的属性
	props: {
		// 修改uv-text组件的size参数的默认值，注意：默认值都要用default声明
		text: {
			color: {
				default: 'red'
			}
		}
		// 其他组件属性配置，具体的参数名称可以去每个组件的props.js中进行查看
		// ......
	}
})


```
Tokens:
Raw