KY UI Vue

一个空灵、悠远风格的 Vue 3 组件库

特性

• 🎨 空灵、悠远的设计风格
• 🚀 基于 Vue 3 + TypeScript 4.1
• ⚡️ Vite 构建，快速开发
• 📦 按需加载，优化包体积
• 🌓 支持亮色/暗色主题切换
• 📱 完整的 H5 移动端适配
• 👆 触摸手势支持
• 📐 响应式布局系统
• 🎯 完整的 TypeScript 类型定义

安装

npm install ky-ui-vue

快速开始

import { createApp } from 'vue'
import KyUI from 'ky-ui-vue'
import 'ky-ui-vue/dist/style.css'

const app = createApp(App)
app.use(KyUI)
app.mount('#app')

按需引入

import { KyButton, KyInput } from 'ky-ui-vue'

组件列表

基础组件

• Button 按钮
• Input 输入框
• Form 表单

布局组件

• Grid 栅格系统
• Flex 弹性布局

动态组件

• Modal 模态框
• Tabs 标签页
• Accordion 手风琴

移动端组件

• Swiper 轮播
• PullRefresh 下拉刷新

开发

# 安装依赖
npm install

# 启动开发服务器（自动识别设备类型）
npm run dev

# 构建
npm run build

# 运行测试
npm run test

# 代码检查
npm run lint

H5 移动端适配

项目已完整支持 H5 移动端，包含：

• ✅ 视口配置和安全区域适配
• ✅ 触摸优化和手势支持
• ✅ 1px 边框解决方案
• ✅ rem 自适应布局
• ✅ 防止滚动穿透
• ✅ 屏幕旋转监听
• ✅ 移动端组件（Swiper、PullRefresh）

查看 H5_ADAPTATION.md 了解详细适配方案。

移动端工具

import { 
  isMobile, 
  isIOS, 
  isAndroid,
  setRemUnit,
  useMobile,
  useTouch 
} from 'ky-ui-vue'

// 设备检测
if (isMobile()) {
  console.log('移动设备')
}

// rem 适配
setRemUnit(750)

// Composables
const { isMobileDevice, orientation } = useMobile()

主题定制

使用 CSS Variables 自定义主题：

:root {
  --ky-primary-color: #4a90e2;
  --ky-text-color: #333;
  --ky-bg-color: #fff;
  --ky-border-radius: 8px;
}

License

MIT