MyUI 现代化 Vue.js 组件库框架文档

框架概述

MyUI是一个基于 Vue.js 的轻量级 UI 组件库，提供了一系列美观、实用的组件，包括按钮、图标、卡片、轮播、表单等常见 UI 元素。本框架注重交互体验和视觉表现，同时保持高度的可定制性，提高前端开发效率。

核心组件

1. 按钮组件 (VcButton)

功能特性：

• 多种预设样式类型

• 丰富的交互状态

• 图标集成支持

• 加载状态指示

• 自适应尺寸

代码示例：

vue

<VcButton 
  type="primary"
  size="large"
  :loading="isLoading"
  icon="el-icon-search"
  @click="handleClick"
>
  搜索
</VcButton>

效果说明：

• 悬停时有颜色加深和轻微上浮效果

• 点击时有波纹动画

• 加载状态显示旋转指示器

• 禁用状态有透明度变化

2. 图标组件 (VcIcon)

功能特性：

• 支持 SVG 图标和字体图标

• 内置常用图标集

• 动态颜色和大小

• 动画效果支持

**代码示例：```

vue

<VcIcon 
  name="heart" 
  :filled="isFavorited"
  color="#ff4757"
  size="24px"
  :animated="true"
/>

效果说明：

• 点击时有弹性缩放动画

• 状态切换时有过渡效果

• 悬停时有轻微放大

3. 卡片组件 (VcCard)

功能特性：

• 多种卡片类型（基础、商品、特色等）

• 灵活的内容区域

• 可定制的头部和底部

• 悬停动画效果

• 响应式设计

代码示例：

vue

<VcCard
  type="product"
  title="商品名称"
  :price="99.99"
  cover="product.jpg"
  :rating="4.5"
  hoverable
>
  <template #footer>
    <VcButton type="primary">加入购物车</VcButton>
  </template>
</VcCard>

效果说明：

• 悬停时阴影加深和轻微上浮

• 商品图片悬停时有缩放效果

• 评分组件有动态星星显示

4. 轮播组件 (VcCarousel)

功能特性：

• 自动轮播和手动切换

• 多种过渡动画

• 自定义指示器

• 响应式控制

• 懒加载支持

代码示例：

vue

<VcCarousel 
  :autoplay="true"
  :interval="3000"
  animation="fade"
  :dots="true"
>
  <VcCarouselItem v-for="(item, index) in banners" :key="index">
    <img :src="item.image" :alt="item.title">
  </VcCarouselItem>
</VcCarousel>

效果说明：

• 平滑的过渡动画（淡入淡出/滑动）

• 悬停时暂停自动轮播

• 指示器有活跃状态提示

• 触摸设备支持手势滑动

5. 表单组件系列

5.1 输入框 (VcInput)

功能特性：

• 多种输入类型

• 前缀/后缀内容

• 验证状态提示

• 清除按钮

• 字数统计

代码示例：

vue

<VcInput
  v-model="username"
  placeholder="请输入用户名"
  prefix-icon="user"
  clearable
  :maxlength="20"
  show-word-limit
/>

效果说明：

• 聚焦时有边框高亮

• 输入验证错误时有抖动提示

• 清除按钮平滑出现

5.2 选择器 (VcSelect)

功能特性：

• 单选/多选支持

• 可搜索过滤

• 远程数据加载

• 自定义选项模板

• 分组显示

代码示例：

vue

<VcSelect
  v-model="selectedCity"
  :options="cities"
  filterable
  placeholder="请选择城市"
  multiple
>
  <template #option="{ item }">
    <span>{{ item.label }}</span>
    <span class="select-option-desc">{{ item.desc }}</span>
  </template>
</VcSelect>

效果说明：

• 下拉动画平滑

• 多选标签有移除动画

• 搜索过滤实时响应

5.3 日期选择器 (VcDatePicker)

功能特性：

• 多种日期选择模式

• 日期范围选择

• 自定义日期格式

• 禁用日期设置

• 快捷选项

代码示例：

vue

<VcDatePicker
  v-model="dateRange"
  type="daterange"
  :shortcuts="dateShortcuts"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
/>

效果说明：

• 日历弹出动画

• 日期选择有视觉反馈

• 范围选择有高亮区域

5.4 表单容器 (VcForm)

功能特性：

• 表单验证集成

• 标签对齐方式

• 响应式布局

• 错误信息展示

• 表单分组

代码示例：

vue

<VcForm 
  :model="formData"
  :rules="formRules"
  label-width="100px"
  ref="formRef"
>
  <VcFormItem label="用户名" prop="username">
    <VcInput v-model="formData.username" />
  </VcFormItem>
  <!-- 更多表单项 -->
</VcForm>

 

效果说明：

• 验证错误时有平滑滚动到错误项

• 错误提示有淡入动画

• 提交按钮有加载状态

设计特色

1. 现代化的交互设计

   • 微交互增强用户体验

   • 流畅的动画过渡

   • 一致的反馈机制

2. 高度可定制

   • 主题系统支持

   • 组件级样式覆盖

   • 灵活的插槽设计

3. 响应式适配

   • 移动端友好

   • 自适应布局

   • 触摸手势支持

4. 无障碍支持

   • ARIA 属性

   • 键盘导航

   • 高对比度模式

安装与使用

安装引入

下载安装包放入vue框架中，通过import Vc from ‘@/components/UI/Button.vue’方式引入项目中

按需引入

javascript

import { VcButton, VcInput } from 'vc-ui'

export default {
  components: {
    VcButton,
    VcInput
  }
}

主题定制

通过覆盖 CSS 变量实现主题定制：

css

:root {
  --vc-primary-color: #4285f4;
  --vc-border-radius: 6px;
  --vc-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

浏览器支持

• 现代浏览器 (Chrome, Firefox, Safari, Edge)

• IE 11+ (需要 polyfill)

• 移动端 Safari 和 Chrome

总结

MyUI提供了一套完整的 Vue.js UI 组件解决方案，从基础的按钮、表单到复杂的轮播、卡片组件，都经过精心设计和实现。每个组件都注重细节交互和视觉表现，同时保持高度的可定制性和易用性，能够满足大多数 Web 应用的界面开发需求。