KLNavBar

考拉导航条组件

效果

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessageBox } from "element-plus";
const navs = [
  { label: '相机模块', value: 'camera' },
  { label: '运动轴', value: 'axis' },
]
const current = ref(navs[0].value);

async function beforeChange(item: { label: string, value: string }) {
  try {
    await ElMessageBox.confirm(
      `是否切换到${item.label}`,
      '导航切换');
    return true;
  } catch {
    return false;
  }
}
</script>
<template>
  <KLNavBar :navs="navs" v-model:current="current" fullWidth />
  <KLNavBar class="mt20" :navs="navs" v-model:current="current" :beforeChange="beforeChange" />
</template>

Attributes

属性	说明	类型	默认值
navs	列表	nav[]	-
v-model:current	当前值	string	-
fullWidth	导航条是否铺满容器	boolean	-
beforeChange	切换之前的回调函数，返回值决定是否继续切换	(item: nav) => Promise<boolean>	-

interface nav {
  label: string;
  value: string;
}