Viog UI

导航 nav 待优化

基础导航组件，可用于侧边栏、顶栏等任意区域

使用说明

简单引入

引入nav组件后，你可以通过nav-item组件定义导航内容，也可以绑定一个普通dom

nav仅会处理一层子节点！！！若你传入插槽的是一个组件，请保证它仅由一个节点构成

通过change事件，你可以接收到当前选中的下标（下标由0开始）

其他
开始
我的
展开代码
<vi-nav @change="handleChange">
  <vi-icon type="shouye" style="font-size: 18px; width: 18px;"></vi-icon>
  <vi-button type="transparent">just演示，有些丑</vi-button>
  <vi-nav-item>其他</vi-nav-item>
  <vi-nav-item>开始</vi-nav-item>
  <vi-nav-item>我的</vi-nav-item>
</vi-nav>

<script setup>
  function handleChange (val) {
    console.log(val)
  }
</script>

在某些情况下，如icon所示，更改font-size等会使width自动变换的属性可能会导致下方line样式计算错误，你可以设定一个固定的值来解决这个问题

通过defaultId给定默认选择的下标

菜单1
菜单2不是菜单3
菜单3
展开代码
<vi-nav :default-id="2">
  <vi-icon type="shouye" style="font-size: 18px; width: 18px;"></vi-icon>
  <vi-nav-item>菜单1</vi-nav-item>
  <vi-nav-item>菜单2不是菜单3</vi-nav-item>
  <vi-nav-item>菜单3</vi-nav-item>
</vi-nav>

自操控nav下标

你也可以通过v-model操控选择下标

菜单0
菜单1
菜单2
展开代码
<template>
  <vi-nav v-model="pick">
    <vi-nav-item>菜单0</vi-nav-item>
    <vi-nav-item>菜单1</vi-nav-item>
    <vi-nav-item>菜单2</vi-nav-item>
  </vi-nav>
</template>
<script>
  const pick = ref(1)
</script>

方向

通过direction属性可以更改导航的方向（vertical、horizontal）

默认为horizontal

菜单1
菜单2
菜单3
展开代码
<vi-nav direction="vertical">
  <vi-icon type="shouye" style="font-size: 18px; width: 18px;"></vi-icon>
  <vi-nav-item>菜单1</vi-nav-item>
  <vi-nav-item>菜单2</vi-nav-item>
  <vi-nav-item>菜单3</vi-nav-item>
</vi-nav>

触发方式

你可以更换切换下标的触发方式：hover、click（默认）

菜单1
菜单2
菜单3
展开代码
<vi-nav trigger="hover">
  <vi-icon type="shouye" style="font-size: 18px; width: 18px;"></vi-icon>
  <vi-nav-item>菜单1</vi-nav-item>
  <vi-nav-item>菜单2</vi-nav-item>
  <vi-nav-item>菜单3</vi-nav-item>
</vi-nav>

选项组 开发中

你可以通过vi-nav-item-group组件定义一组导航

菜单1
菜单1
菜单2
菜单3
展开代码
<vi-nav trigger="hover">
  <vi-nav-item-group title="菜单1">
    <vi-nav-item>菜单1.1</vi-nav-item>
    <vi-nav-item>菜单1.2</vi-nav-item>
    <vi-nav-item>菜单1.3</vi-nav-item>
  </vi-nav-item-group>
  <vi-nav-item>菜单1</vi-nav-item>
  <vi-nav-item>菜单2</vi-nav-item>
  <vi-nav-item>菜单3</vi-nav-item>
</vi-nav>

Props

属性名描述类型默认值
属性名描述类型默认值

插槽

插槽名描述有无默认内容

事件支持

事件名描述参数列表

css变量

变量名描述默认值