由 uniapp + Vue3 + Ts + Vite5 + UnoCss + wot-ui + z-paging 构成，

基础组件

• Button：按钮组件，支持多种样式和状态
• Dialog：对话框组件，用于信息提示和用户交互
• Divider：分割线组件，用于分隔内容
• Popup：弹出层组件，支持多种弹出方式
• Toast：轻提示组件，用于短暂信息展示
• Swiper：轮播图组件，支持自动轮播和手势滑动

交互组件

• InfiniteScroll：无限滚动组件，用于加载更多数据
• PullRefresh：下拉刷新组件，用于刷新页面内容

表单组件

• DropdownSelect：下拉选择器组件，支持单选和多选
• DropdownWithBadge：带徽章的下拉组件，用于展示带有数量提示的选择项

筛选组件

• FilterDrawer：筛选抽屉组件，用于复杂条件筛选

📖 组件引用与示例

全局引入

在 main.ts 中全局引入所有组件：

import { createApp } from 'vue'
import App from './App.vue'
import uniappDyckui from 'uniapp-dyckui'
import 'uniapp-dyckui/style' // 引用CSS文件

const app = createApp(App)

 app.component('SButton', uniappDyckui.Button)
 app.component('SToast', uniappDyckui.Toast)  
 ...

组件使用示例

在需要使用的页面或组件中局部引入：

<script setup lang="ts">

</script>

<template>
  <s-button>主要按钮</s-button>
</template>

组件使用示例

平台兼容性

| H5 | IOS | 安卓 | 微信小程序 | 字节小程序 | 快手小程序 | 支付宝小程序 | 钉钉小程序 | 百度小程序 | | --- | --- | ---- | ---------- | ---------- | ---------- | ------------ | ---------- | ---------- | | √ | √ | √ | √ | √ | √ | √ | √ | √ |

注意每种 UI框架 支持的平台有所不同，详情请看各 UI框架 的官网，也可以看 unibest 文档。

⚙️ 环境

• node>=18
• pnpm>=7.30
• Vue Official>=2.1.10
• TypeScript>=5.0