ZovCloudUI

ZovCloudUI 是一个基于 Vue 3 开发的组件库，通过 Web Components 技术将 Vue 组件打包成标准的自定义元素，使其可以在任何框架（如 React、Angular）或无框架环境中使用。

特性

• 基于 Vue 3 和 Ant Design Vue 构建
• 使用 Web Components 技术，实现跨框架兼容
• 禁用 Shadow DOM，便于样式集成
• 提供多个用户界面相关组件
• 支持 TypeScript

安装

# 使用 npm
npm install zov-cloud-ui

# 使用 yarn
yarn add zov-cloud-ui

# 使用 pnpm
pnpm add zov-cloud-ui

快速开始

在 React 项目中使用

1. 首先在项目入口文件中注册组件：

import { register } from 'zov-cloud-ui';

// 注册所有组件为自定义元素
register();

2. 在 React 组件中使用：

属性必须用中划线

import React, { useEffect, useRef } from 'react';
import 'zov-cloud-ui/style'; // 导入样式

function App() {

  const userMenuRef = useRef(null);

  useEffect(() => {
    const logout = () => {
        //
    }

    // 通过原生自定义事件方式订阅事件
    userMenuRef.current.addEventListener('logout', logout);

    return () => {
        userMenuRef.current.removeEventListener('logout', logout);
    }
  }, [])

  return (
    <div>
      {/* 使用用户菜单组件 */}
      <user-menu
        ref={userMenuRef}
        base-url="http://user.binarysee.com.cn"
      ></user-menu>
      
      {/* 单独使用切换租户组件 */}
      <switch-tenant 
        base-url="http://user.binarysee.com.cn"
      ></switch-tenant>
      
      {/* 单独使用用户详情组件 */}
      <user-detail 
        base-url="http://user.binarysee.com.cn"
      ></user-detail>
      
      {/* 单独使用登出组件 */}
      <user-logout></user-logout>
    </div>
  );
}

export default App;

组件说明

UserMenu 用户菜单组件

集成了切换租户、用户详情和登出功能的下拉菜单组件。

属性

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | base-url | String | - | API 基础路径 | | user-detail-content | String | "个人设置" | 用户详情标题 | | skip-type | String | "window" | 跳转类型，可选值："window"、"tab" | | modal-title | String | "切换租户" | 切换租户模态框标题 | | modal-content | String | "确定切换租户并退出登录吗？" | 切换租户模态框内容 | | modal-cancel-text | String | "取消" | 切换租户模态框取消按钮文本 | | modal-ok-text | String | "确定" | 切换租户模态框确认按钮文本 | | success-tips | String | "切换租户成功" | 切换租户成功提示文本 | | includes | String | "" | 要包含的子组件，逗号分隔，如："switchTenant,userDetail" | | excludes | String | "" | 要排除的子组件，逗号分隔，如："logout" |

事件

| 事件名 | 说明 | |--------|------| | switch-tenant | 切换租户时触发 | | logout | 退出登录时触发 |

SwitchTenant 切换租户组件

提供切换租户功能的组件。

属性

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | base-url | String | - | API 基础路径 | | modal-title | String | "切换租户" | 模态框标题 | | modal-content | String | "确定切换租户并退出登录吗？" | 模态框内容 | | modal-cancel-text | String | "取消" | 模态框取消按钮文本 | | modal-ok-text | String | "确定" | 模态框确认按钮文本 | | success-tips | String | "切换租户成功" | 切换成功提示文本 |

事件

| 事件名 | 说明 | |--------|------| | switch-tenant | 切换租户时触发 |

UserDetail 用户详情组件

提供用户详情功能的组件。

属性

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | base-url | String | - | API 基础路径 | | content | String | "个人设置" | 标题 | | skip-type | String | "window" | 跳转类型，可选值："window"、"router" |

Logout 登出组件

提供登出功能的组件。

事件

| 事件名 | 说明 | |--------|------| | logout | 退出登录时触发 |