@das-fed/web-components v1.0.4

das-ce-tabs 使用方法

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

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

2. 定义 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' },
])

3. 监听组件事件

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

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

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"
  @update:modelValue="(customEvent) => (activeKey = customEvent.detail[0])"
></das-ce-tabs>

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

import { ref } from 'vue'
import { createCeTabs } from '@das-fed/web-components/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>

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

import { ref } from 'vue'
import { createCeTabs } from '@das-fed/web-components/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>

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

import { ref } from 'vue'
import { createCeTabs } from '@das-fed/web-components/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
}

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

import { ref } from 'vue'
import { createCeTabs } from '@das-fed/web-components/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>

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

import { ref } from 'vue'
import { createCeTabs } from '@das-fed/web-components/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. 属性

config

innerPagesConfig

searchConfig

userInfoConfig

projectTreeConfig

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

3. 事件

das-ce-menu 使用方法

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

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

2. 使用。

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

3. 属性

4. 事件

5. 方法