NavigationBar 导航栏

何时使用

如果你希望你的页面有一个导航栏时

开发者注意事项

默认数据第一项不能删除，该配置不支持修改。

代码演示

案例一

vue

<script setup lang="ts">
import { ref } from 'vue';
import { Button } from 'ant-design-vue';
import { NavigationBar } from '@/library';
import type { NavBarList } from '@/library/NavigationBar';

const navBarList = ref<NavBarList>([
  { key: '111', label: '农业一张图' },
  { key: '222', label: '理赔数据导入' },
  { key: '333', label: '承保数据导入' },
  { key: '444', label: '数据接受日志' },
  { key: '555', label: '合规保单查询' },
  { key: '666', label: '存疑保单查询' },
  { key: '777', label: '数据统计' },
  { key: '888', label: '承保区域分析' },
  { key: '999', label: '用户管理' },
  { key: 'xxx', label: '角色管理' },
  { key: 'yyy', label: '字典管理' },
  { key: 'zzz', label: '系统日志管理' },
]);
const activeKey = ref('111');

function onChange(key: string) {
  activeKey.value = key;
}
function onDelete(newNavBarList: NavBarList) {
  navBarList.value = newNavBarList;
}
function onAdd() {
  navBarList.value.push({ key: Math.random().toString(32).slice(2), label: Math.random().toString(32).slice(2) });
}
</script>

<template>
  <Button @click="onAdd">添加</Button>
  <div class="box">
    <NavigationBar :navBarList="navBarList" :activeKey="activeKey" @change="onChange" @delete="onDelete" />
  </div>
</template>

<style lang="less">
.box {
  width: 100%;
  background: #fff;
  margin-top: 20px;
}
.qm-navbar-content-list.qm-navbar-content-list {
  list-style: none;
  margin: 5px 0 0;
  padding: 0;
}
.qm-navbar-content-list-item + .qm-navbar-content-list-item,
.qm-navbar-content-list-item + .qm-navbar-indicator {
  margin-top: 0;
}
</style>

<script setup lang="ts">
import { ref } from 'vue';
import { Button } from 'ant-design-vue';
import { NavigationBar } from '@/library';
import type { NavBarList } from '@/library/NavigationBar';

const navBarList = ref<NavBarList>([
  { key: '111', label: '农业一张图' },
  { key: '222', label: '理赔数据导入' },
  { key: '333', label: '承保数据导入' },
  { key: '444', label: '数据接受日志' },
  { key: '555', label: '合规保单查询' },
  { key: '666', label: '存疑保单查询' },
  { key: '777', label: '数据统计' },
  { key: '888', label: '承保区域分析' },
  { key: '999', label: '用户管理' },
  { key: 'xxx', label: '角色管理' },
  { key: 'yyy', label: '字典管理' },
  { key: 'zzz', label: '系统日志管理' },
]);
const activeKey = ref('111');

function onChange(key: string) {
  activeKey.value = key;
}
function onDelete(newNavBarList: NavBarList) {
  navBarList.value = newNavBarList;
}
function onAdd() {
  navBarList.value.push({ key: Math.random().toString(32).slice(2), label: Math.random().toString(32).slice(2) });
}
</script>

<template>
  <Button @click="onAdd">添加</Button>
  <div class="box">
    <NavigationBar :navBarList="navBarList" :activeKey="activeKey" @change="onChange" @delete="onDelete" />
  </div>
</template>

<style lang="less">
.box {
  width: 100%;
  background: #fff;
  margin-top: 20px;
}
.qm-navbar-content-list.qm-navbar-content-list {
  list-style: none;
  margin: 5px 0 0;
  padding: 0;
}
.qm-navbar-content-list-item + .qm-navbar-content-list-item,
.qm-navbar-content-list-item + .qm-navbar-indicator {
  margin-top: 0;
}
</style>

NavigationBar API

propName	description	type	default value
activeKey	当前选中的导航项	string	-
navBarList	列表	NavBarList	-
change	当用户点击导航栏时触发	(activeKey: string) => void	-
delete	当用户删除导航栏时触发	(newNavBarList: NavBarList) => void	-

NavigationBar 导航栏 ​

何时使用 ​

开发者注意事项 ​

代码演示 ​

NavigationBar API ​

NavigationBar 导航栏

何时使用

开发者注意事项

代码演示

NavigationBar API