vue-color-ui

vue-color-ui

vue-color-ui 是 ColorUI 在 uniapp 生态中的 Vue 版本。这个项目是一个临时解决方案，旨在填补原作者更新之前的空白。

安装

使用 npm 安装 vue-color-ui：

npm install vue-color-ui

Nuxt 3/4 快速开始

在 Nuxt 3 或 Nuxt 4 项目中配置 vue-color-ui：

1. 配置 nuxt.config.ts

在 nuxt.config.ts 中添加 CSS 配置：

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: [
    'vue-color-ui/lib/style.css',
    'vue-color-ui/lib/css/main.css',
    'vue-color-ui/lib/css/animation.css',
    'vue-color-ui/lib/css/icon.css'
  ]
})

2. 在 app.vue 中引入 CSS（可选）

如果不在 nuxt.config.ts 中配置，也可以在 app.vue 中引入：

<template>
  <NuxtPage />
</template>

<script setup>
// 引入样式（如果不在 nuxt.config.ts 中配置）
import 'vue-color-ui/lib/style.css';
import 'vue-color-ui/lib/css/main.css';
import 'vue-color-ui/lib/css/animation.css';
import 'vue-color-ui/lib/css/icon.css';
</script>

3. 创建插件文件

在 plugins 目录下创建 vue-color-ui.ts：

import TempColorUI from "vue-color-ui";

export default defineNuxtPlugin((app) => {
  app.vueApp.use(TempColorUI);
});

使用

在你的 Vue 组件中，你可以直接使用 vue-color-ui 提供的组件。例如：

<template>
  <TNavBar :items="navItems" />
</template>

<script setup>
const navItems = [
  { icon: "homefill", label: "首页" },
  { icon: "similar", label: "分类" },
  { img: "https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png", label: "积分" },
  { icon: "cart", label: "购物车", badge: 99 },
  { icon: "my", label: "我的" }
];
</script>

文档

📖 详细文档请查看 docs/README.md

快速链接

• 颜色系统
• 组件文档

主要组件

基础组件

• TIcon - 图标组件
• TTitle - 标题组件
• TAvatar - 头像组件
• TButton - 按钮组件
• TTag - 标签组件

导航组件

• TNavBar - 导航栏组件
• TTopBar - 顶部操作条
• TTabs - 标签页组件

表单组件

• TSearchBar - 搜索栏
• TInputBar - 输入栏

聊天组件

• ChatList - 聊天列表
• ChatRoom - 聊天室

其他组件

• Loading - 加载动画
• TimeLine - 时间轴
• TVirtualScrollSlide - 虚拟滚动

查看 完整组件列表

贡献

这个项目是一个临时解决方案，等原作者更新了之后再决定是否继续维护。如果你有任何建议或发现任何问题，欢迎提交 issue 或 pull request。

许可证

MIT