FixedNav 悬浮导航

演示

FixedNav 跨端示例与演示

年度订阅

Varo Pro

全部组件、Registry Blocks 与 Agent UI。

¥299/ 年

• 双端运行时
• 源码归属业务
• 优先更新

基础用法

<script setup lang="ts">
import { VFixedNav } from '@varo-ui/h5'
import { ref } from 'vue'

const visible = ref(true)
const navList = [
  { text: '首页', icon: '⌂' },
  { text: '消息', icon: '✉', num: 2 },
  { text: '客服', icon: '?' }
]
</script>

<template>
  <VFixedNav v-model:visible="visible" :nav-list="navList" active-text="导航" />
</template>

Props

Prop	类型	默认值	描述
visible	boolean	undefined	是否展开
defaultVisible	boolean	false	非受控默认展开状态
navList	FixedNavItem[]	[]	导航项
position	'left' | 'right'	'right'	悬浮位置
activeText	string	'导航'	触发按钮文本

Events

Event	Payload	描述
update:visible	boolean	展开状态变化
visibleChange	boolean	展开状态变化
select	(item, index)	点击导航项