vue-color-ui

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

安装

使用 npm 安装 vue-color-ui：

npm install vue-color-ui

Nuxt 3 快速开始

在 Nuxt 3 项目中快速配置 vue-color-ui：

1. 创建插件文件 plugins/vue-color-ui.ts：

import TempColorUI from "vue-color-ui";
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";

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>

贡献

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

许可证

MIT

颜色

BgColorName 背景颜色类型

BgColorName 类型可以是以下颜色名称之一：

type ColorName =
  | "red"
  | "orange"
  | "yellow"
  | "olive"
  | "green"
  | "cyan"
  | "blue"
  | "purple"
  | "mauve"
  | "pink"
  | "brown"
  | "grey"
  | "gray"
  | "black"
  | "white";

type GradientColorName =
  | "gradual-red"
  | "gradual-orange"
  | "gradual-green"
  | "gradual-purple"
  | "gradual-pink"
  | "gradual-blue";

type BgColorName = ColorName | GradientColorName;

TNavBar组件使用文档

TNavBar 是一个全局注册的组件，用于创建底部或顶部导航栏。该组件支持图标、图片、徽标等多种元素，并允许自定义背景颜色和文本颜色。

属性

| 属性名 | 类型 | 默认值 | 描述 | | ------------- | -------------- | ------- | ------------------------------------------------------------ | | bg | string | white | 导航栏背景颜色 | | color | string | gray | 文本颜色 | | activeColor | string | red | 活动项的文本颜色 | | items | NavBarItem[] | [] | 导航栏项的数组，每个项包含 icon、img、label 和 badge | | isFoot | boolean | false | 是否为底部导航栏 | | activeIndex | number | 0 | 当前激活项的索引 | | onItemClick | function | null | 点击导航项时的回调函数，接收 item 和 index 两个参数 |

示例

示例 1: 基本使用

<template>
  <TNavBar />
</template>

示例 2: 自定义导航项

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

示例 3: 自定义背景颜色和文本颜色

<template>
  <TNavBar bg="blue" color="white" activeColor="yellow" />
</template>

示例 4: 底部导航栏

<template>
  <TNavBar :isFoot="true" />
</template>

示例 5: 带徽标的导航项

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

<script setup>
const navItemsWithBadge = [
  { icon: "homefill", label: "首页" },
  { icon: "similar", label: "分类" },
  { icon: "cart", label: "购物车", badge: 99 },
  { icon: "my", label: "我的", badge: 5 }
];
</script>

示例 6: 使用回调函数处理点击事件

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

<script setup>
const navItems = [
  { icon: "homefill", label: "首页", path: "/home" },
  { icon: "similar", label: "分类", path: "/category" },
  { icon: "discover", label: "刷刷", path: "/discover" },
  { icon: "edit", label: "报告", path: "/report" },
  { icon: "my", label: "我的", path: "/profile" }
];

const handleItemClick = (item, index) => {
  console.log("Clicked item:", item, "at index:", index);
  // 处理导航逻辑，例如路由跳转
};
</script>

属性类型定义

ColorName

ColorName 是一个字符串类型，用于定义颜色名称。可以是预定义的颜色名称，例如 red、blue、gray 等。

NavBarItem

NavBarItem 是一个对象类型，包含以下属性：

| 属性名 | 类型 | 描述 | | ------- | -------- | -------------------- | | icon | string | 图标名称 | | img | string | 图片 URL | | label | string | 导航项标签 | | badge | number | 徽标数字（可选） | | path | string | 导航项对应的路由路径 |

TTag 组件使用文档

TTag 是一个用于显示标签的 Vue 组件，支持多种样式和自定义内容。

基本用法

<template>
  <TTag>标签内容</TTag>
</template>

属性

TTag 组件支持以下属性：

| 属性名 | 类型 | 默认值 | 描述 | | ------- | ------------- | --------- | ------------------------------------------------- | | text | string | - | 标签的文本内容 | | bg | BgColorName | blue | 标签的背景颜色，支持颜色名称或渐变颜色名称 | | size | string | default | 标签的大小，可选值有 default, small, large | | shape | string | default | 标签的形状，可选值有 default, radius, round | | light | boolean | false | 是否使用浅色背景 | | line | boolean | false | 是否使用线条样式 |

示例

基本标签

<template>
  <TTag text="默认标签" />
</template>

不同背景颜色的标签

<template>
  <TTag text="红色标签" bg="red" />
  <TTag text="渐变橙色标签" bg="gradual-orange" />
</template>

不同大小的标签

<template>
  <TTag text="默认大小" size="default" />
  <TTag text="小号标签" size="small" />
  <TTag text="大号标签" size="large" />
</template>

不同形状的标签

<template>
  <TTag text="默认形状" shape="default" />
  <TTag text="圆角标签" shape="radius" />
  <TTag text="圆形标签" shape="round" />
</template>

浅色背景的标签

<template>
  <TTag text="浅色标签" light />
</template>

线条样式的标签

<template>
  <TTag text="线条标签" line />
</template>

组合样式的标签

<template>
  <TTag text="自定义标签" bg="purple" size="large" shape="round" light />
</template>