Tab组件的编写与动态日期的函数封装

src\components\Tab\Icon.vue

底部导航栏子组件。

javascript 复制代码
<template>
  <router-link :to="path" class="tab-icon">
    <i class="icon">{{iconText}}</i>
    <p class="text">
      <slot>{{ tabText }}</slot>
    </p>
  </router-link>
</template>

<script>
  export default {
    name: 'TabIcon',
    props: {
      iconText: String,
      path: String
    }
  }
</script>

src\components\Tab\index.vue

底部导航栏组件

javascript 复制代码
<template>
  <div class="tab">
    <div class="tab-item" v-for="(item, index) of tabData" :key="index">
      <tab-icon :iconText="item.iconText" :path="item.path">{{item.tabText}}</tab-icon>
    </div>
  </div>
</template>

<script>
import TabIcon from './Icon'
import tabData from '@/data/tab'
import { reactive } from 'vue'
export default {
  name: 'Tab',
  components: { TabIcon },
  setup() {
    const state = reactive({
      tabData,
    })
    return { ...state }
  },
}
</script>

src\libs\utils.js

动态日期的封装

javascript 复制代码
function _addZero(value) {
  return value < 10 ? '0' + value : value
}

function getIconDate(type) {
  const date = new Date()

  switch (type) {
    case 'day':
      return _addZero(date.getDate().toString())
    case 'month':
      return _addZero((date.getMonth() + 1).toString())
    case 'year':
      return date.getFullYear().toString().substring(2)
  }
}
export {
  getIconDate
}

src\data\tab.js

javascript 复制代码
import { getIconDate } from '@/libs/utils';

export default [{
        iconText: getIconDate("day"),
        tabText: "当天",
        path: "/",
    },
    {
        iconText: getIconDate("month"),
        tabText: "近期",
        path: "/month",
    },
    {
        iconText: getIconDate("year"),
        tabText: "当年",
        path: "/year",
    },
];
相关推荐
longgyy4 分钟前
5 分钟用火山引擎 DeepSeek 调用大模型生成小红书文案
java·数据库·火山引擎
90后的晨仔10 分钟前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀14 分钟前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
一成码农15 分钟前
JavaSE面向对象(下)
java·开发语言
Madison-No731 分钟前
【C++】探秘vector的底层实现
java·c++·算法
我登哥MVP36 分钟前
Ajax 详解
java·前端·ajax·javaweb
vue学习1 小时前
docker 学习dockerfile 构建 Nginx 镜像-部署 nginx 静态网
java·学习·docker
_extraordinary_1 小时前
Java Spring日志
java·开发语言·spring
PHP源码1 小时前
SpringBoot校园二手商城系统
java·spring boot·springboot二手商城·java校园二手商城系统