@rubyli/web-components NPM

das-ce-tabs 使用方法

引入 das-ce-tabs 组件并注册。

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

定义 options 和 modelValue 属性。

das-ce-tabs 接收 options 和 modelValue 属性，options 属性配置如下：

interface TabOption {
  /** 唯一标识 */
  key: string | number
  /** 选项卡头显示文字 */
  tab: string
  /** 是否禁用 */
  disabled?: boolean
  /** 是否隐藏 */
  hidden?: boolean
  /** 被隐藏时是否渲染 DOM 结构 */
  forceRender?: boolean
  /** tab显示文字插槽 */
  tabSlot?: string
  /** 关闭图标插槽 */
  closeIconSlot?: string
  /** 显示内容插槽 */
  contentSlot?: string
}

定义实例如下：

const activeKey = ref(1)

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

监听组件事件

使用组件时，监听到的事件对象为 customEvent ，该对象中的 detail 属性是个数组，数组元素为组件事件的返回值。 das-ce-tabs 组件暴露了以下事件：

update:modelValue：当 modelValue 属性变化时触发，要实现切换页签时 activeKey 属性自动变化，需要监听该事件。

import { ref } from 'vue'
import { createCeTabs } from '@/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"
  @update:modelValue="(customEvent) => (activeKey = customEvent.detail[0])"
></das-ce-tabs>

tabClick：当 tab 被点击时触发。返回被点击页签的 key 值。

import { ref } from 'vue'
import { createCeTabs } from '@/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' },
])

const tabClick = (customEvent) => {
  console.log('当前点击页签的key: ', customEvent.detail[0])
}

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

tabDelete：当 tab 被删除时触发。返回被删除页签的 key 值。

import { ref } from 'vue'
import { createCeTabs } from '@/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' },
])

const tabDelete = (customEvent) => {
  console.log('当前删除页签的key：', customEvent.detail[0])
}

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

menuClick：当右键呼出的操作项选中时触发。返回被选中的操作项和当前右键操作的页签对象。

import { ref } from 'vue'
import { createCeTabs } from '@/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' },
])

const menuClick = (customEvent) => {
  console.log('当前选中操作项：', customEvent.detail[0], '当前页签对象：', customEvent.detail[1])
}

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

pageRefresh: 当点击右侧刷新按钮时触发。无返回值。

import { ref } from 'vue'
import { createCeTabs } from '@/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' },
])

const pageRefresh = () => {
  console.log('刷新')
}

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

toggleFullScreen: 切换全屏状态。无返回值。

import { ref } from 'vue'
import { createCeTabs } from '@/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' },
])

const toggleFullScreen = () => {
  console.log('全屏')
}

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

das-ce-nav 使用方法

1. 引入 `das-ce-nav` 组件并注册。

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

① 在 vue 文件中使用

<das-ce-nav
  @update:modelValue="(event) => (activeKey = event.detail[0])"
  :modelValue="activeKey"
  @handleTabClick="handleTabClick"
  @handleTabDelete="handleTabDelete"
  :config="config"
  :logoUrl="logoUrl"
  :searchConfig="searchConfig"
  @searchToPage="searchToPage"
  @clearSearchList="clearSearchList"
  @deleteSearchItem="deleteSearchItem"
  :userInfoConfig="userInfoConfig"
  @userCommandHandle="userCommandHandle"
  :projectTreeConfig="projectTreeConfig"
  @changeTreeHandle="changeTreeHandle"
  :innerPagesConfig="innerPagesConfig"
  @changeInnerPage="changeInnerPage"
></das-ce-nav>

① 在 html 文件中使用

<head>
  <script type="module">
    import { createCeNav } from '@das-fed/web-components'
    createCeNav('das-ce-nav')
    const handleTabClick = (event) => {
      console.log(event)
    }
    const dasceNavEle = document.getElementsByTagName('das-ce-nav')[0]
    dasceNavEle.addEventListener('handleTabClick', handleTabClick)
  </script>
</head>
<body>
  <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>
</body>

2. 属性

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

config

属性名	描述	类型	默认值	是否必填
showSearch	是否显示搜索	bool	false	否
showProjectTree	是否显示项目下拉树	bool	false	否
subAppList	导航栏菜单数据	{name:string,code:string/number}[]	-	否

innerPagesConfig

属性名	描述	类型	默认值	是否必填
activeInnerPagePath	内置菜单当前选中值	string/number	false	否
innerPages	内置菜单数据	{title: string, path: string}[]	false	否

searchConfig

属性名	描述	类型	默认值	是否必填
defaultProps	-	{value: string,label: string}	{value: 'id',label: 'name'}	否
getHistoryList	获取历史搜索记录	() => Promise	-	否
getSearchList	获取菜单	() => Promise	-	否
addHistory	添加历史记录	(data:any) => void	-	否

userInfoConfig

属性名	描述	类型	默认值	是否必填
headPicture	用户头像	默认头像	否
commandList	用户信息操作项	() => Promise	-	否
getSearchList	获取菜单	{value?: string /number,label?: string / number}[]	-	否

projectTreeConfig

属性名	描述	类型	默认值	是否必填
projectStore	项目数据	-	否
defaultProps	-	{value: string,label: string}	{value: 'id',label: 'name'}	否
treeProps	树组件配置	TreeOptionProps	-	否
filterNode	搜索过滤	(value: any, data: any) => projectTreeType[]	-	否
filterFlatCondition	树切换平铺，符合条件的加入平铺列表	(data: any) => boolean[]	-	否

TreeOptionProps

interface TreeOptionProps {
  label?: string // 默认name
  pathName?: string // 默认pathName
  children?: string // 默认children
  parentId?: string // 默认parentId
  disabled?: string | ((data: TreeNodeData, node?: Node) => boolean) // 默认disabled
  isLeaf?: string | ((data: TreeNodeData, node?: Node) => boolean) // 默认leaf;懒加载不支持方法
  // 允许取消选中（keepSelected为true时生效）
  allowUnSelect?: string | ((data: TreeNodeData) => boolean) // 默认allowUnSelect
  class?: (
    data: TreeNodeData,
    node: Node,
  ) =>
    | string
    | {
        [key: string]: boolean
      }
    | string
}

projectTreeType

属性名	描述	类型	默认值	是否必填
-	唯一标识（可使用 defaultProps.value 配置）	id	是
-	项目名称（可使用 defaultProps.label 配置）	name	是
children	树组件配置	projectTreeType	-	否

3. 事件

事件	说明	回调参数
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)

das-ce-menu 使用方法

引入 das-ce-menu 组件并注册。

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>

属性

属性名	描述	类型	默认值	是否必填
modelValue	当前选中菜单	string/number	-	是
data	导航栏配置	array	[]	是
collapse	初始菜单栏折叠状态	boolean	false	是

事件

事件	说明	回调参数
change	选中项改变触发	function(value: string/number, option: any)
collapse-change	折叠状态改变触发	function(value:boolean)

@ant-design/icons-vue @antv/x6 @das-fed/cli @das-fed/ui @das-fed/utils @element-plus/icons-vue ant-design-vue element-plus sass vue vue-router

0.0.0

8 months ago

das-ce-tabs 使用方法

das-ce-nav 使用方法

1. 引入 das-ce-nav 组件并注册。

① 在 vue 文件中使用

① 在 html 文件中使用

2. 属性

config

innerPagesConfig

searchConfig

userInfoConfig

projectTreeConfig

TreeOptionProps

projectTreeType

3. 事件

das-ce-menu 使用方法

1. 引入 `das-ce-nav` 组件并注册。