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

最新推荐文章于 2024-06-09 18:24:15 发布

小二李

最新推荐文章于 2024-06-09 18:24:15 发布

阅读量229

点赞数 1

分类专栏： Vue 3.0实战项目之『万年历』文章标签： java 前端 vue

本文链接：https://blog.csdn.net/weixin_43800535/article/details/136618912

版权

Vue 3.0实战项目之『万年历』专栏收录该内容

14 篇文章 1 订阅

订阅专栏

src\components\Tab\Icon.vue

底部导航栏子组件。

<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

底部导航栏组件

<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

动态日期的封装

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

import { getIconDate } from '@/libs/utils';

export default [{
        iconText: getIconDate("day"),
        tabText: "当天",
        path: "/",
    },
    {
        iconText: getIconDate("month"),
        tabText: "近期",
        path: "/month",
    },
    {
        iconText: getIconDate("year"),
        tabText: "当年",
        path: "/year",
    },
];