@vup/ui 组件库

基于 Element Plus 的 Vue 3 UI 组件库封装，提供常用业务组件与方法型 API。如果你希望替换为其它组件库，可按需替换对应实现。

技术栈

• Element Plus - Vue 3 组件库
• Vue 3 - 渐进式 JavaScript 框架
• TypeScript - 类型安全

快速开始

安装

pnpm add @vup/ui

全局注册

在应用入口文件中全局注册所有组件：

import { createApp } from 'vue';
import App from './App.vue';
import VUI from '@vup/ui';

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

按需使用

如果只需要使用部分组件，可以按需导入：

<script setup lang="ts">
import { VButton } from '@vup/ui';
</script>

<template>
  <VButton type="primary">Primary</VButton>
</template>

可用组件

基础组件

• VButton - 按钮组件
• VInput - 输入框组件
• VText - 文本组件
• VIcon - 图标组件
• VLink - 链接组件
• VTag - 标签组件
• VBadge - 徽章组件

表单组件

• VCheckbox - 复选框
• VCheckboxGroup - 复选框组
• VRadio - 单选框
• VRadioGroup - 单选框组
• VSelect - 选择器
• VSwitch - 开关
• VDatePicker - 日期选择器
• VInputNumber - 数字输入框
• VUpload - 文件上传

数据展示

• VCard - 卡片
• VEmpty - 空状态
• VImage - 图片
• VPagination - 分页
• VScrollbar - 滚动条
• VFileList - 文件列表
• VFileModal - 文件预览弹窗

反馈组件

• VModal - 对话框
• VDrawer - 抽屉
• VMessage - 消息提示
• VMessageBox - 消息确认框
• VNotification - 通知
• VLoading - 加载
• VTooltip - 文字提示
• VPopover - 弹出框
• VPopconfirm - 气泡确认框

导航组件

• VMenu - 菜单
• VMenuGroup - 菜单组
• VMenuItem - 菜单项
• VDropdown - 下拉菜单

方法型 API

除了组件形式，还提供了方法型 API，方便在 JavaScript 代码中调用：

import { VMessage, VMessageBox, VNotification, VLoading } from '@vup/ui';

// 消息提示
VMessage.success('操作成功');
VMessage.error('操作失败');
VMessage.warning('警告信息');
VMessage.info('提示信息');

// 消息确认框
VMessageBox.confirm('确定要删除吗？', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
})
  .then(() => {
    // 确认操作
  })
  .catch(() => {
    // 取消操作
  });

// 通知
VNotification({
  title: '通知标题',
  message: '通知内容',
  type: 'success',
});

// 加载
const loading = VLoading.service({
  target: '.container',
  text: '加载中...',
});
// 关闭加载
loading.close();

使用示例

基础按钮

<template>
  <div class="button-demo">
    <VButton>默认按钮</VButton>
    <VButton type="primary">主要按钮</VButton>
    <VButton type="success">成功按钮</VButton>
    <VButton type="warning">警告按钮</VButton>
    <VButton type="danger">危险按钮</VButton>
  </div>
</template>

表单组件

<template>
  <div class="form-demo">
    <VInput v-model="username" placeholder="请输入用户名" />
    <VSelect v-model="city" placeholder="请选择城市">
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
    </VSelect>
    <VCheckbox v-model="agree">我同意用户协议</VCheckbox>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { VInput, VSelect, VCheckbox } from '@vup/ui';

const username = ref('');
const city = ref('');
const agree = ref(false);
</script>

对话框

<template>
  <div>
    <VButton @click="showModal = true">打开对话框</VButton>
    <VModal v-model="showModal" title="标题">
      <p>对话框内容</p>
      <template #footer>
        <VButton @click="showModal = false">取消</VButton>
        <VButton type="primary" @click="handleConfirm">确定</VButton>
      </template>
    </VModal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { VButton, VModal } from '@vup/ui';

const showModal = ref(false);

const handleConfirm = () => {
  // 处理确认逻辑
  showModal.value = false;
};
</script>

注意事项

• 组件全局注册使用文件名作为组件名（如 VButton、VModal）
• 基于 Element Plus 封装，具体用法请参考 Element Plus 官方文档
• 如需替换为其它组件库，可按需替换对应实现
• 方法型 API 返回的实例可以调用 close() 方法关闭

相关资源

• Element Plus 官方文档
• Vue 3 官方文档