-
引入
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 '@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>
-
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>
-
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>
-
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
}
-
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>
-
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>
import { createCeNav } from '@das-fed/web-components'
createCeNav('das-ce-nav')
<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>
<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>
属性名 |
描述 |
类型 |
默认值 |
是否必填 |
showSearch |
是否显示搜索 |
bool |
false |
否 |
showProjectTree |
是否显示项目下拉树 |
bool |
false |
否 |
subAppList |
导航栏菜单数据 |
{name:string,code:string/number}[] |
- |
否 |
属性名 |
描述 |
类型 |
默认值 |
是否必填 |
activeInnerPagePath |
内置菜单当前选中值 |
string/number |
false |
否 |
innerPages |
内置菜单数据 |
{title: string, path: string}[] |
false |
否 |
属性名 |
描述 |
类型 |
默认值 |
是否必填 |
defaultProps |
- |
{value: string,label: string} |
{value: 'id',label: 'name'} |
否 |
getHistoryList |
获取历史搜索记录 |
() => Promise
|
- |
否 |
getSearchList |
获取菜单 |
() => Promise
|
- |
否 |
addHistory |
添加历史记录 |
(data:any) => void |
- |
否 |
属性名 |
描述 |
类型 |
默认值 |
是否必填 |
headPicture |
用户头像 |
默认头像 |
否 |
|
commandList |
用户信息操作项 |
() => Promise
|
- |
否 |
getSearchList |
获取菜单 |
{value?: string /number,label?: string / number}[] |
- |
否 |
属性名 |
描述 |
类型 |
默认值 |
是否必填 |
projectStore |
项目数据 |
- |
否 |
|
defaultProps |
- |
{value: string,label: string} |
{value: 'id',label: 'name'} |
否 |
treeProps |
树组件配置 |
TreeOptionProps |
- |
否 |
filterNode |
搜索过滤 |
(value: any, data: any) => projectTreeType[] |
- |
否 |
filterFlatCondition |
树切换平铺,符合条件的加入平铺列表 |
(data: any) => boolean[] |
- |
否 |
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
}
属性名 |
描述 |
类型 |
默认值 |
是否必填 |
- |
唯一标识(可使用 defaultProps.value 配置) |
id |
是 |
|
- |
项目名称(可使用 defaultProps.label 配置) |
name |
是 |
|
children |
树组件配置 |
projectTreeType |
- |
否 |
事件 |
说明 |
回调参数 |
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) |
- 方法
方法 |
描述 |
参数 |
changeCollapse |
切换折叠状态 |
接收一个布尔类型参数:折叠状态 |