@das-fed/web-components

das-web-components 组件库说明文档

一、简介

das-web-components 是 DAS 前端体系的 Web 组件库，基于 Web Components 技术，支持 Vue、React、原生 JS 等多种框架集成，适用于企业级中后台系统的统一架构和快速开发。

二、核心组件与用法

1. das-ce-tabs 页签组件

• 支持动态页签、右键菜单、刷新、全屏等功能。
• 通过 createCeTabs('das-ce-tabs') 注册。
• 主要属性：
  • options：页签配置数组，支持禁用、隐藏、插槽等。
  • modelValue：当前激活页签 key。
• 主要事件：
  • update:modelValue：切换页签时触发，返回新激活 key。
  • tabClick：点击页签时触发，返回 key。
  • tabDelete：删除页签时触发，返回 key。
  • menuClick：右键菜单操作，返回操作项和页签对象。
  • pageRefresh：点击刷新按钮时触发。
  • toggleFullScreen：切换全屏。
• 主要方法与类型定义见下方代码示例。

用法示例

import { ref } from 'vue'
import { createCeTabs } from '@das-fed/web-components'
createCeTabs('das-ce-tabs')

const activeKey = ref(1)
const options = ref([
  { key: 1, tab: 'Tab 1' },
  { key: 2, tab: 'Tab 2', disabled: true },
  { key: 3, tab: 'Tab 3' },
])

<das-ce-tabs :modelValue="activeKey" :options="options" @menuClick="menuClick"></das-ce-tabs>

事件与类型

interface MenuListType {
  key: string | number
  name: string
  hidden?: boolean | Function
  disabled?: boolean | Function
}

2. das-ce-nav 顶部导航栏组件

• 支持菜单、logo、搜索、用户信息、项目树、内置页面等多种功能。
• 通过 createCeNav('das-ce-nav') 注册。
• 主要属性：
  • modelValue：当前选中菜单 key。
  • config：导航栏配置。
  • logoUrl、searchConfig、userInfoConfig、projectTreeConfig、innerPagesConfig 等。
• 主要事件：
  • handleTabClick、handleTabDelete、changeInnerPage、searchToPage、clearSearchList、deleteSearchItem、userCommandHandle、changeTreeHandle。
• 详细属性与事件见下方表格。

用法示例

import { createCeNav } from '@das-fed/web-components'
createCeNav('das-ce-nav')

<das-ce-nav
  @update:modelValue="(event) => (activeKey = event.detail[0])"
  :modelValue="activeKey"
  :config="config"
  :logoUrl="logoUrl"
  :searchConfig="searchConfig"
  :userInfoConfig="userInfoConfig"
  :projectTreeConfig="projectTreeConfig"
  :innerPagesConfig="innerPagesConfig"
></das-ce-nav>

主要属性与事件

属性名	描述	类型	是否必填
modelValue	当前选中菜单	string/number	是
config	导航栏配置	object	是
logoUrl	logo 图片链接	string	否
innerPagesConfig	内置页面配置	object	否
searchConfig	搜索配置	object	否
userInfoConfig	用户信息配置	object	否
projectTreeConfig	项目树配置	object	否

事件	说明	回调参数
handleTabClick	切换应用	function(value:any)
handleTabDelete	删除应用	function(value:any)
changeInnerPage	切换内置页面	function(value:any)
searchToPage	搜索-选中菜单跳转	function(value:any)
clearSearchList	搜索-清空历史记录	void
deleteSearchItem	搜索-删除指定的历史记录	function(value:any)
userCommandHandle	用户信息-操作项	function(value:any)
changeTreeHandle	项目树-是否确定切换选中项目	function(status:bool,value:any)

3. das-ce-menu 侧边菜单栏组件

• 支持菜单折叠、选中、动态数据等功能。
• 通过 createCeMenu('das-ce-menu') 注册。
• 主要属性：
  • modelValue：当前选中菜单 key。
  • data：菜单数据数组。
  • collapse：菜单栏初始折叠状态。
• 主要事件：
  • change：选中项改变时触发。
  • collapse-change：菜单折叠状态改变时触发。
• 主要方法：
  • changeCollapse：切换菜单折叠状态。

用法示例

import { createCeMenu } from '@das-fed/web-components'
createCeMenu('das-ce-menu')

<das-ce-menu
  :data="menuData"
  :modelValue.prop="currentVal"
  @update:modelValue="(event) => (currentVal = event.detail[0])"
  :collapse.prop="collapse"
  @change="onChange"
  @collapse-change="onCollapseChange"
></das-ce-menu>

三、组件属性与类型定义

详细属性、类型定义和事件请参考源码及注释。

四、常见问题与扩展

• 支持在 Vue、React、原生 JS 项目中直接注册和使用。
• 组件事件均通过 customEvent.detail 获取返回值。
• 支持自定义插槽、动态数据、复杂交互。
• 推荐结合 DAS Web 主应用统一布局和微前端架构使用。

五、贡献与维护

如需详细 API 说明、组件开发指南，请参考源码及注释。