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",
    },
];
相关推荐
yddddddy29 分钟前
css的基本知识
前端·css
昔人'32 分钟前
css `lh`单位
前端·css
hdsoft_huge42 分钟前
Java & Spring Boot常见异常全解析:原因、危害、处理与防范
java·开发语言·spring boot
雨白1 小时前
Java 多线程指南:从基础用法到线程安全
android·java
Hungry_Shark2 小时前
IDEA版本控制管理之使用Gitee
java·gitee·intellij-idea
赛姐在努力.2 小时前
《IDEA 突然“三无”?三秒找回消失的绿色启动键、主菜单和项目树!》
java·intellij-idea
猎板PCB黄浩2 小时前
从废料到碳减排:猎板 PCB 埋容埋阻的绿色制造革命,如何实现环保与性能双赢
java·服务器·制造
ZzzK,2 小时前
JAVA虚拟机(JVM)
java·linux·jvm
西红柿维生素2 小时前
JVM相关总结
java·jvm·算法
Nan_Shu_6142 小时前
Web前端面试题(2)
前端