<template>
  <div>
    <!-- 使用 van-nav-bar 组件 -->
    <van-nav-bar
      title="导航栏标题"
      left-text="返回"
      right-text="按钮"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
  </div>
</template>

<script>
export default {
  setup() {
    // 处理点击左侧按钮的回调
    const onClickLeft = () => {
      console.log('点击左侧按钮');
    };

    // 处理点击右侧按钮的回调
    const onClickRight = () => {
      console.log('点击右侧按钮');
    };

    return {
      onClickLeft,
      onClickRight,
    };
  },
};
</script>

<style>
/* 这是一个简单的样式示例，你可以根据需求自定义样式 */
</style>

<template>
  <div>
    <!-- 使用 van-tabbar 组件 -->
    <van-tabbar v-model="activeTab" @change="onChangeTab">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="search">搜索</van-tabbar-item>
      <van-tabbar-item icon="friends-o">朋友</van-tabbar-item>
      <van-tabbar-item icon="setting-o">设置</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 当前激活的标签页
    const activeTab = ref(0);

    // 处理标签切换的回调
    const onChangeTab = (index) => {
      console.log('切换到标签页', index);
    };

    return {
      activeTab,
      onChangeTab,
    };
  },
};
</script>

<style>
/* 这是一个简单的样式示例，你可以根据需求自定义样式 */
</style>