website·Indexed 29 days ago
https://uni-ui-plus-docs.netlify.appA modern component library built with Vue 3 and TypeScript specifically for the uni-app ecosystem. It features a variety of high-quality components including Waterfall layouts, LivePhoto support, Skeleton screens, and an enhanced List component with virtual scrolling, as well as built-in dark mode support via ConfigProvider.
The library includes utility components for loading and empty states:
The Img component provides two slots to replace the default loading and error UI with custom content:
loading: Content to display while the image is loading.error: Content to display after the image fails to load.<up-image src="...">
<template #loading>
<view>Custom Loading Spinner...</view>
</template>
<template #error>
<view>Custom Error Icon...</view>
</template>
</up-image>direction prop to vertical. When doing so, ensure the indicator configuration also specifies direction: 'vertical' and a compatible indicatorPosition (e.g., right).<up-swiper
:list="swiperList"
:height="300"
direction="vertical"
:indicator="{ type: 'dots', direction: 'vertical', indicatorPosition: 'right' }"
/>show-controls. You can handle navigation via the @prev and @next events, or the generic @change event which provides the direction and source.<up-swiper-nav
:current="currentIndex"
:total="5"
:show-controls="true"
@prev="handlePrev"
@next="handleNext"
/>const handlePrev = () => {
if (currentIndex.value > 0) currentIndex.value--
}
const handleNext = () => {
if (currentIndex.value < 4) currentIndex.value++
}up-live-photo component allows users to play a video by long-pressing a static image. It requires both a video source (video-src) and a static image source (src). For best results, ensure the video and image share the same aspect ratio.<up-live-photo
video-src="https://sample-videos.com/zip/10/mp4/SampleVideo_360x240_1mb.mp4"
src="https://picsum.photos/400/300?random=1"
width="300"
height="200"
radius="12"
/>up-waterfall component creates a multi-column layout where items are distributed based on their height. By default, if no slot is used, the component renders images based on the field specified in imageField (defaults to imgUrl).<template>
<up-waterfall
:list="waterfallList"
:column="2"
@item-click="handleItemClick"
@load-complete="handleLoadComplete"
/>
</template>
<script setup>
import { ref } from 'vue'
const waterfallList = ref([
{
id: 1,
imgUrl: 'https://picsum.photos/300/400?random=1',
title: 'Project 1'
},
{
id: 2,
imgUrl: 'https://picsum.photos/300/600?random=2',
title: 'Project 2'
}
])
function handleItemClick(item, index) {
console.log('Clicked item:', item, index)
}
function handleLoadComplete() {
console.log('Waterfall load complete')
}
</script>up-empty component provides slots to override the default image, description, or add additional content (like buttons) below the placeholder.<template>
<up-empty image="error" description="加载失败">
<!-- Default slot for content below the description -->
<div style="margin-top: 10px">
<button icon="refresh" type="primary">重试</button>
</div>
</up-empty>
</template>up-list component uses v-model:list-obj to bind the list state (loading, finished, refreshing, and the data array). It integrates with scroll-view properties to enable refreshing and scrolling. Use the @on-refresh event for pull-to-refresh and @on-load for infinite scrolling.<template>
<view class="h-50vh">
<up-list
v-model:list-obj="result"
:scroll-view-props="{ refresherEnabled: true, scrollY: true }"
@on-load="onLoadMore"
@on-refresh="onRefresh"
>
<template #default="{ data: { list } }">
<view v-for="(item, index) in list" :key="index" class="mb-4 flex">
<image :src="item.cover" class="h-20 w-20" mode="widthFix" />
<view>{{ item.title }}</view>
</view>
</template>
</up-list>
</view>
</template>
<script setup>
// result should be an object containing { list: [], loading: boolean, finished: boolean, refreshing: boolean }
const result = ref({ list: [], loading: false, finished: false, refreshing: false });
const onRefresh = () => { /* Fetch first page */ };
const onLoadMore = () => { /* Fetch next page */ };
</script>To enable dark mode for components in uni-ui-plus, wrap them in the up-config-provider component and set the theme prop to dark.
Prerequisite: You must import the theme variable file in your entry file (e.g., App.vue) before using dark mode. The import path depends on your installation method:
@use 'uni-ui-plus/styles/theme/index.scss' as *;@use '@/uni_modules/uni-ui-plus/styles/theme/index.scss' as *;<up-config-provider theme="dark">
<up-empty description="暂无数据" />
</up-config-provider>