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",
    },
];
相关推荐
代码小学僧几秒前
让 AI 真正帮你开发:前端 MCP 实用技巧分享
前端
晴殇i9 分钟前
前端鉴权新时代:告别 localStorage,拥抱更安全的 JWT 存储方案
前端·javascript·面试
来旺10 分钟前
互联网大厂Java面试全解析及三轮问答专项
java·数据库·spring boot·安全·缓存·微服务·面试
Json____10 分钟前
使用node Express 框架框架开发一个前后端分离的二手交易平台项目。
java·前端·express
since �10 分钟前
前端转Java,从0到1学习教程
java·前端·学习
詩句☾⋆᭄南笙11 分钟前
Mybatis一对一、一对多
java·mybatis·resulttype·resultmap·一对多·一对一
Andya_net24 分钟前
Java | 基于redis实现分布式批量设置各个数据中心的服务器配置方案设计和代码实践
java·服务器·分布式
lang2015092824 分钟前
Spring Boot 外部化配置最佳实践指南
java·spring boot
小奋斗28 分钟前
面试官:[1] == '1'和[1] == 1结果是什么?
前端·面试
萌萌哒草头将军28 分钟前
尤雨溪宣布 oxfmt 即将发布!比 Prettier 快45倍 🚀🚀🚀
前端·webpack·vite