?????????️✍️?️????️??️????⚠️??⬇️·正文开始⬇️·???????????✅?❓??? ?0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣??*️⃣#️⃣

DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_天气预报日历示例（CalendarView01_18）

?前言

DeepSeek-R1-0528 基于Qwen3-8B Base开展思维链后训练，由此衍生出DeepSeek-R1-0528-Qwen3-8B。这款8B模型在AIME 2024数学测试中表现亮眼，成绩仅次于DeepSeek-R1-0528，较Qwen3-8B提升10.0%，性能与Qwen3-235B持平。我们认为，DeepSeek-R1-0528的思维链训练方法，对学术界推理模型研究及工业界小模型开发均具有重要参考价值。

?本文简介：

本文是一个基于DeepSeek生成的日历组件的调用示例。
DeepSeek生成的日历组件文章?

?本文页面效果

?组件代码

\src\views\CalendarView01_18.vue

<template>
  <div class="demo">
    <h1>天气预报日历示例</h1>
    <div class="weather-summary">
      <div class="current-weather">
        <div class="temp-now">{{ currentTemp }}°C</div>
        <div class="weather-icon">{{ weatherIcons[currentWeather] }}</div>
        <div class="weather-desc">{{ weatherDesc[currentWeather] }}</div>
      </div>
      <div class="weather-details">
        <div class="detail-item">
          <span class="detail-label">湿度</span>
          <span class="detail-value">{{ humidity }}%</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">风速</span>
          <span class="detail-value">{{ windSpeed }}km/h</span>
        </div>
      </div>
    </div>
    <Calendar
      theme="dark"
      :cell-size="60"
      locale="zh-cn"
      :current-date="today"
    >
      <template #date-cell="{ date }">
        <div class="weather-cell">
          <span class="date-number">{{ date.getDate() }}</span>
          <div v-if="getWeather(date)" class="weather-info">
            <span class="weather-icon">{{ weatherIcons[getWeather(date).type] }}</span>
            <span class="temp-range">
              {{ getWeather(date).high }}° / {{ getWeather(date).low }}°
            </span>
          </div>
        </div>
      </template>
    </Calendar>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Calendar from '@/components/Calendar/Calendar.vue'

const today = new Date()
const weatherData = ref(new Map())
const currentTemp = ref(22)
const currentWeather = ref('sunny')
const humidity = ref(65)
const windSpeed = ref(12)

const weatherIcons = {
  sunny: '☀️',
  cloudy: '☁️',
  rainy: '?️',
  stormy: '⛈️',
  snowy: '?️',
  partlyCloudy: '⛅'
}

const weatherDesc = {
  sunny: '晴天',
  cloudy: '多云',
  rainy: '雨天',
  stormy: '雷雨',
  snowy: '雪天',
  partlyCloudy: '局部多云'
}

// 模拟天气数据
const generateWeatherData = () => {
  const weatherTypes = ['sunny', 'cloudy', 'rainy', 'stormy', 'snowy', 'partlyCloudy']
  const date = new Date()
  
  for (let i = 0; i < 15; i++) {
    const weatherType = weatherTypes[Math.floor(Math.random() * weatherTypes.length)]
    const baseTemp = 20 + Math.sin(i * 0.5) * 5
    
    weatherData.value.set(date.toDateString(), {
      type: weatherType,
      high: Math.round(baseTemp + Math.random() * 5),
      low: Math.round(baseTemp - Math.random() * 5)
    })
    
    date.setDate(date.getDate() + 1)
  }
}

const getWeather = (date) => {
  return weatherData.value.get(date.toDateString())
}

onMounted(() => {
  generateWeatherData()
})
</script>

<style scoped>
.weather-summary {
  width: 420px;
  margin: 0 auto 20px;
  background: #333;
  padding: 20px;
  border-radius: 8px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.current-weather {
  text-align: center;
}

.temp-now {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 8px;
}

.weather-icon {
  font-size: 32px;
  margin-bottom: 4px;
}

.weather-desc {
  color: #bbb;
}

.weather-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-label {
  color: #bbb;
  font-size: 14px;
}

.detail-value {
  font-size: 16px;
  font-weight: 500;
}

.weather-cell {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  padding: 4px;
  box-sizing: border-box;
}

.date-number {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.weather-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.temp-range {
  font-size: 10px;
  color: #bbb;
}

.demo :deep(.calendar) {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

.demo :deep(.date-cell) {
  width: 100px !important;
  height: 100px !important;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.demo :deep(.theme-dark .current-month .date-number) {
  color: #000;
}
/* 日历布局样式... */
</style>

?代码测试

运行正常

?测试代码正常跑通，附其他基本代码

• 添加路由
• 页面展示入口

?编写路由 \src\router\index.js

import { createRouter, createWebHistory } from 'vue-router'
import RightClickMenuView from '../views/RightClickMenuView.vue'
import RangePickerView from '../views/RangePickerView.vue'


const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'progress',
      component:  () => import('../views/ProgressView.vue'),
    },
    {
      path: '/tabs',
      name: 'tabs',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      // 标签页（Tabs）
      component: () => import('../views/TabsView.vue'),
    },
    {
      path: '/accordion',
      name: 'accordion',
      // 折叠面板（Accordion）
      component: () => import('../views/AccordionView.vue'),
    },
    {
      path: '/timeline',
      name: 'timeline',
      // 时间线（Timeline）
      component: () => import('../views/TimelineView.vue'),
    },
    {
      path: '/backToTop',
      name: 'backToTop',
      component: () => import('../views/BackToTopView.vue')
    },
    {
      path: '/notification',
      name: 'notification',
      component: () => import('../views/NotificationView.vue')
    },
    {
      path: '/card',
      name: 'card',
      component: () => import('../views/CardView.vue')
    },
    {
      path: '/infiniteScroll',
      name: 'infiniteScroll',
      component: () => import('../views/InfiniteScrollView.vue')
    },
    {
      path: '/switch',
      name: 'switch',
      component: () => import('../views/SwitchView.vue')
    },
    {
      path: '/sidebar',
      name: 'sidebar',
      component: () => import('../views/SidebarView.vue')
    },
    {
      path: '/breadcrumbs',
      name: 'breadcrumbs',
      component: () => import('../views/BreadcrumbsView.vue')
    },
    {
      path: '/masonryLayout',
      name: 'masonryLayout',
      component: () => import('../views/MasonryLayoutView.vue')
    },
    {
      path: '/rating',
      name: 'rating',
      component: () => import('../views/RatingView.vue')
    },
    {
      path: '/datePicker',
      name: 'datePicker',
      component: () => import('../views/DatePickerView.vue')
    },
    {
      path: '/colorPicker',
      name: 'colorPicker',
      component: () => import('../views/ColorPickerView.vue')
    },
    {
      path: '/rightClickMenu',
      name: 'rightClickMenu',
      component: RightClickMenuView
    },
    {
      path: '/rangePicker',
      name: 'rangePicker',
      component: () => import('../views/RangePickerView.vue')
    },
    {
      path: '/navbar',
      name: 'navbar',
      component: () => import('../views/NavbarView.vue')
    },
    {
      path: '/formValidation',
      name: 'formValidation',
      component: () => import('../views/FormValidationView.vue')
    },
    {
      path: '/copyToClipboard',
      name: 'copyToClipboard',
      component: () => import('../views/CopyToClipboardView.vue')
    },
    {
      path: '/clickAnimations',
      name: 'clickAnimations',
      component: () => import('../views/ClickAnimationsView.vue')
    },
    {
      path: '/thumbnailList',
      name: 'thumbnailList',
      component: () => import('../views/ThumbnailListView.vue')
    },
    {
      path: '/keyboardShortcuts',
      name: 'keyboardShortcuts',
      component: () => import('../views/KeyboardShortcutsView.vue')
    },
    {
      path: '/commentSystem',
      name: 'commentSystem',
      component: () => import('../views/CommentSystemView.vue')
    },
    {
      path: '/qRCode',
      name: 'qRCode',
      component: () => import('../views/QRCodeView.vue')
    },
    {
      path: '/radioButton',
      name: 'radioButton',
      component: () => import('../views/RadioButtonView.vue')
    },
    {
      path: '/slider',
      name: 'slider',
      component: () => import('../views/SliderView.vue')
    },
    {
      path: '/scrollAnimations',
      name: 'scrollAnimations',
      component: () => import('../views/ScrollAnimationsView.vue')
    },
    {
      path: '/textInputView',
      name: 'textInputView',
      component: () => import('../views/TextInputView.vue')
    },
    {
      path: '/divider',
      name: 'divider',
      component: () => import('../views/DividerView.vue')
    },
    {
      path: '/checkbox',
      name: 'checkbox',
      component: () => import('../views/CheckboxView.vue')
    },
    {
      path: '/tagInput',
      name: 'tagInput',
      component: () => import('../views/TagInputView.vue')
    },
    {
      path: '/dropdownSelect',
      name: 'dropdownSelect',
      component: () => import('../views/DropdownSelectView.vue')
    },
    {
      path: '/list',
      name: 'list',
      component: () => import('../views/ListView.vue')
    },
    {
      path: '/header',
      name: 'header',
      component: () => import('../views/HeaderView.vue')
    },
    {
      path: '/footer',
      name: 'footer',
      component: () => import('../views/FooterView.vue')
    },
    {
      path: '/pagination',
      name: 'pagination',
      component: () => import('../views/PaginationView.vue')
    },
    {
      path: '/floatingActionButton',
      name: 'floatingActionButton',
      component: () => import('../views/FloatingActionButtonView.vue')
    },
    {
      path: '/gridLayout',
      name: 'gridLayout',
      component: () => import('../views/GridLayoutView.vue')
    },
    {
      path: '/passwordInput',
      name: 'passwordInput',
      component: () => import('../views/PasswordInputView.vue')
    },
    {
      path: '/flexbox',
      name: 'flexbox',
      component: () => import('../views/FlexboxView.vue')
    },
    {
      path: '/modal',
      name: 'modal',
      component: () => import('../views/ModalView.vue')
    },
    {
      path: '/richTextEditor',
      name: 'richTextEditor',
      component: () => import('../views/RichTextEditorView.vue')
    },
    {
      path: '/timePickerView',
      name: 'timePickerView',
      component: () => import('../views/TimePickerView.vue')
    },
    {
      path: '/multistepForm',
      name: 'multistepForm',
      component: () => import('../views/MultistepFormView.vue')
    },
    {
      path: '/table1',
      name: 'table1',
      component: () => import('../views/TableView1.vue')
    },
    {
      path: '/table2',
      name: 'table2',
      component: () => import('../views/TableView2.vue')
    },
    {
      path: '/table3',
      name: 'table3',
      component: () => import('../views/TableView3.vue')
    },
    {
      path: '/table4',
      name: 'table4',
      component: () => import('../views/TableView4.vue')
    },
    {
      path: '/table5',
      name: 'table5',
      component: () => import('../views/TableView5.vue')
    },
    {
      path: '/table6',
      name: 'table6',
      component: () => import('../views/TableView6.vue')
    },
    {
      path: '/table7',
      name: 'table7',
      component: () => import('../views/TableView7.vue')
    },
    {
      path: '/table8',
      name: 'table8',
      component: () => import('../views/TableView8.vue')
    },
    {
      path: '/table9',
      name: 'table9',
      component: () => import('../views/TableView9.vue')
    },
    {
      path: '/table10',
      name: 'table10',
      component: () => import('../views/TableView10.vue')
    },
    {
      path: '/table11',
      name: 'table11',
      component: () => import('../views/TableView11.vue')
    },
    {
      path: '/table12',
      name: 'table12',
      component: () => import('../views/TableView12.vue')
    },
    {
      path: '/table12_02',
      name: 'table12_02',
      component: () => import('../views/TableView12_02.vue')
    },
    {
      path: '/table14',
      name: 'table14',
      component: () => import('../views/TableView14.vue')
    },
    {
      path: '/table14_01',
      name: 'table14_01',
      component: () => import('../views/TableView14_01.vue')
    },
    {
      path: '/table14_02',
      name: 'table14_02',
      component: () => import('../views/TableView14_02.vue')
    },
    {
      path: '/table14_03',
      name: 'table14_03',
      component: () => import('../views/TableView14_03.vue')
    },
    {
      path: '/table14_04',
      name: 'table14_04',
      component: () => import('../views/TableView14_04.vue')
    },
    {
      path: '/table14_05',
      name: 'table14_05',
      component: () => import('../views/TableView14_05.vue')
    },
    {
      path: '/table14_06',
      name: 'table14_06',
      component: () => import('../views/TableView14_06.vue')
    },
    {
      path: '/table14_07',
      name: 'table14_07',
      component: () => import('../views/TableView14_07.vue')
    },
    {
      path: '/table14_08',
      name: 'table14_08',
      component: () => import('../views/TableView14_08.vue')
    },
    {
      path: '/table14_09',
      name: 'table14_09',
      component: () => import('../views/TableView14_09.vue')
    },
    {
      path: '/table14_10',
      name: 'table14_10',
      component: () => import('../views/TableView14_10.vue')
    },
    {
      path: '/table14_11',
      name: 'table14_11',
      component: () => import('../views/TableView14_11.vue')
    },
    {
      path: '/table14_12',
      name: 'table14_12',
      component: () => import('../views/TableView14_12.vue')
    },
    {
      path: '/table14_13',
      name: 'table14_13',
      component: () => import('../views/TableView14_13.vue')
    },
    {
      path: '/table14_14',
      name: 'table14_14',
      component: () => import('../views/TableView14_14.vue')
    },
    {
      path: '/table15',
      name: 'table15',
      component: () => import('../views/TableView15.vue')
    },
    {
      path: '/table15_01',
      name: 'table15_01',
      component: () => import('../views/TableView15_01.vue')
    },
    {
      path: '/table15_02',
      name: 'table15_02',
      component: () => import('../views/TableView15_02.vue')
    },
    {
      path: '/table15_03',
      name: 'table15_03',
      component: () => import('../views/TableView15_03.vue')
    },
    {
      path: '/table15_04',
      name: 'table15_04',
      component: () => import('../views/TableView15_04.vue')
    },
    {
      path: '/table15_05',
      name: 'table15_05',
      component: () => import('../views/TableView15_05.vue')
    },
    {
      path: '/table15_06',
      name: 'table15_06',
      component: () => import('../views/TableView15_06.vue')
    },
    {
      path: '/table15_07',
      name: 'table15_07',
      component: () => import('../views/TableView15_07.vue')
    },
    {
      path: '/table15_08',
      name: 'table15_08',
      component: () => import('../views/TableView15_08.vue')
    },
    {
      path: '/table15_09',
      name: 'table15_09',
      component: () => import('../views/TableView15_09.vue')
    },
    {
      path: '/table15_10',
      name: 'table15_10',
      component: () => import('../views/TableView15_10.vue')
    },
    {
      path: '/table15_11',
      name: 'table15_11',
      component: () => import('../views/TableView15_11.vue')
    },
    {
      path: '/table15_12',
      name: 'table15_12',
      component: () => import('../views/TableView15_12.vue')
    },
    {
      path: '/table15_13',
      name: 'table15_13',
      component: () => import('../views/TableView15_13.vue')
    },
    {
      path: '/table15_14',
      name: 'table15_14',
      component: () => import('../views/TableView15_14.vue')
    },
    {
      path: '/table16',
      name: 'table16',
      component: () => import('../views/TableView16.vue')
    },
    {
      path: '/table16_01',
      name: 'table16_01',
      component: () => import('../views/TableView16_01.vue')
    },
    {
      path: '/table16_02',
      name: 'table16_02',
      component: () => import('../views/TableView16_02.vue')
    },
    {
      path: '/table16_03',
      name: 'table16_03',
      component: () => import('../views/TableView16_03.vue')
    },
    {
      path: '/table16_04',
      name: 'table16_04',
      component: () => import('../views/TableView16_04.vue')
    },
    {
      path: '/table16_05',
      name: 'table16_05',
      component: () => import('../views/TableView16_05.vue')
    },
    {
      path: '/table16_06',
      name: 'table16_06',
      component: () => import('../views/TableView16_06.vue')
    },
    {
      path: '/table16_07',
      name: 'table16_07',
      component: () => import('../views/TableView16_07.vue')
    },
    {
      path: '/table16_08',
      name: 'table16_08',
      component: () => import('../views/TableView16_08.vue')
    },
    {
      path: '/table16_09',
      name: 'table16_09',
      component: () => import('../views/TableView16_09.vue')
    },
    {
      path: '/table16_10',
      name: 'table16_10',
      component: () => import('../views/TableView16_10.vue')
    },
    {
      path: '/table16_11',
      name: 'table16_11',
      component: () => import('../views/TableView16_11.vue')
    },
    {
      path: '/table16_12',
      name: 'table16_12',
      component: () => import('../views/TableView16_12.vue')
    },
    {
      path: '/table16_13',
      name: 'table16_13',
      component: () => import('../views/TableView16_13.vue')
    },
    {
      path: '/table16_14',
      name: 'table16_14',
      component: () => import('../views/TableView16_14.vue')
    },
    {
      path: '/table17',
      name: 'table17',
      component: () => import('../views/TableView17.vue')
    },
    {
      path: '/calendar',
      name: 'calendar',
      component: () => import('../views/CalendarView.vue')
    },
    {
      path: '/calendar01_01',
      name: 'calendar01_01',
      component: () => import('../views/CalendarView01_01.vue')
    },
    {
      path: '/calendar01_02',
      name: 'calendar01_02',
      component: () => import('../views/CalendarView01_02.vue')
    },
    {
      path: '/calendar01_03',
      name: 'calendar01_03',
      component: () => import('../views/CalendarView01_03.vue')
    },
    {
      path: '/calendar01_04',
      name: 'calendar01_04',
      component: () => import('../views/CalendarView01_04.vue')
    },
    {
      path: '/calendar01_05',
      name: 'calendar01_05',
      component: () => import('../views/CalendarView01_05.vue')
    },
    {
      path: '/calendar01_06',
      name: 'calendar01_06',
      component: () => import('../views/CalendarView01_06.vue')
    },
    {
      path: '/calendar01_07',
      name: 'calendar01_07',
      component: () => import('../views/CalendarView01_07.vue')
    },
    {
      path: '/calendar01_08',
      name: 'calendar01_08',
      component: () => import('../views/CalendarView01_08.vue')
    },
    {
      path: '/calendar01_09',
      name: 'calendar01_09',
      component: () => import('../views/CalendarView01_09.vue')
    },
    {
      path: '/calendar01_10',
      name: 'calendar01_10',
      component: () => import('../views/CalendarView01_10.vue')
    },
    {
      path: '/calendar01_11',
      name: 'calendar01_11',
      component: () => import('../views/CalendarView01_11.vue')
    },
    {
      path: '/calendar01_12',
      name: 'calendar01_12',
      component: () => import('../views/CalendarView01_12.vue')
    },
    {
      path: '/calendar01_13',
      name: 'calendar01_13',
      component: () => import('../views/CalendarView01_13.vue')
    },
    {
      path: '/calendar01_14',
      name: 'calendar01_14',
      component: () => import('../views/CalendarView01_14.vue')
    },
    {
      path: '/calendar01_15',
      name: 'calendar01_15',
      component: () => import('../views/CalendarView01_15.vue')
    },
    {
      path: '/calendar01_16',
      name: 'calendar01_16',
      component: () => import('../views/CalendarView01_16.vue')
    },
    {
      path: '/calendar01_17',
      name: 'calendar01_17',
      component: () => import('../views/CalendarView01_17.vue')
    },
    {
      path: '/calendar01_18',
      name: 'calendar01_18',
      component: () => import('../views/CalendarView01_18.vue')
    }
  ],
})

export default router

?编写展示入口 \src\App.vue

<script setup>
import {RouterLink, RouterView} from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125"/>

    <div class="wrapper">
      <HelloWorld msg="You did it!"/>
      <nav>
        <RouterLink to="/">Progress</RouterLink>
        <RouterLink to="/tabs">Tabs</RouterLink>
        <RouterLink to="/accordion">Accordion</RouterLink>
        <RouterLink to="/timeline">Timeline</RouterLink>
        <RouterLink to="/backToTop">BackToTop</RouterLink>
        <RouterLink to="/notification">Notification</RouterLink>
        <RouterLink to="/card">Card</RouterLink>
        <RouterLink to="/infiniteScroll">InfiniteScroll</RouterLink>
        <RouterLink to="/switch">Switch</RouterLink>
        <RouterLink to="/sidebar">Sidebar</RouterLink>
        <RouterLink to="/breadcrumbs">Breadcrumbs</RouterLink>
        <RouterLink to="/masonryLayout">MasonryLayout</RouterLink>
        <RouterLink to="/rating">Rating</RouterLink>
        <RouterLink to="/datePicker">DatePicker</RouterLink>
        <RouterLink to="/colorPicker">ColorPicker</RouterLink>
        <RouterLink to="/rightClickMenu">RightClickMenu</RouterLink>
        <RouterLink to="/rangePicker">RangePicker</RouterLink>
        <RouterLink to="/navbar">Navbar</RouterLink>
        <RouterLink to="/formValidation">FormValidation</RouterLink>
        <RouterLink to="/copyToClipboard">CopyToClipboard</RouterLink>
        <RouterLink to="/clickAnimations">ClickAnimations</RouterLink>
        <RouterLink to="/thumbnailList">ThumbnailList</RouterLink>
        <RouterLink to="/keyboardShortcuts">KeyboardShortcuts</RouterLink>
        <RouterLink to="/commentSystem">CommentSystem</RouterLink>
        <RouterLink to="/qRCode">QRCode</RouterLink>
        <RouterLink to="/radioButton">RadioButton</RouterLink>
        <RouterLink to="/slider">Slider</RouterLink>
        <RouterLink to="/scrollAnimations">ScrollAnimations</RouterLink>
        <RouterLink to="/textInputView">TextInput</RouterLink>
        <RouterLink to="/divider">Divider</RouterLink>
        <RouterLink to="/checkbox">Checkbox</RouterLink>
        <RouterLink to="/tagInput">TagInput</RouterLink>
        <RouterLink to="/dropdownSelect">DropdownSelect</RouterLink>
        <RouterLink to="/list">List</RouterLink>
        <RouterLink to="/header">Header</RouterLink>
        <RouterLink to="/footer">Footer</RouterLink>
        <RouterLink to="/pagination">Pagination</RouterLink>
        <RouterLink to="/floatingActionButton">FloatingActionButton</RouterLink>
        <RouterLink to="/gridLayout">GridLayout</RouterLink>
        <RouterLink to="/passwordInput">PasswordInput</RouterLink>
        <RouterLink to="/flexbox">Flexbox</RouterLink>
        <RouterLink to="/modal">Modal</RouterLink>
        <RouterLink to="/richTextEditor">RichTextEditor</RouterLink>
        <RouterLink to="/timePickerView">TimePickerView</RouterLink>
        <RouterLink to="/multistepForm">MultistepFormView</RouterLink>
        <RouterLink to="/table1">Table1</RouterLink>
        <RouterLink to="/table2">Table2</RouterLink>
        <RouterLink to="/table3">Table3</RouterLink>
        <RouterLink to="/table4">Table4</RouterLink>
        <RouterLink to="/table5">Table5</RouterLink>
        <RouterLink to="/table6">Table6空状态</RouterLink>
        <RouterLink to="/table7">Table7空状态2</RouterLink>
        <RouterLink to="/table8">Table8基础加载状态</RouterLink>
        <RouterLink to="/table9">Table9自定义加载文本</RouterLink>
        <RouterLink to="/table10">Table10完全自定义加载内容</RouterLink>
        <RouterLink to="/table11">Table11加载结合分页</RouterLink>
        <RouterLink to="/table12">Table12启用列宽调整</RouterLink>
        <RouterLink to="/table12_02">table12_02自定义选择列宽度</RouterLink>
        <RouterLink to="/table14">table14 添加表头固定功能</RouterLink>
        <RouterLink to="/table14_01">table14_01</RouterLink>
        <RouterLink to="/table14_02">table14_02</RouterLink>
        <RouterLink to="/table14_03">table14_03</RouterLink>
        <RouterLink to="/table14_04">table14_04</RouterLink>
        <RouterLink to="/table14_05">table14_05</RouterLink>
        <RouterLink to="/table14_06">table14_06</RouterLink>
        <RouterLink to="/table14_07">table14_07</RouterLink>
        <RouterLink to="/table14_08">table14_08</RouterLink>
        <RouterLink to="/table14_09">table14_09</RouterLink>
        <RouterLink to="/table14_10">table14_10</RouterLink>
        <RouterLink to="/table14_11">table14_11</RouterLink>
        <RouterLink to="/table14_12">table14_12</RouterLink>
        <RouterLink to="/table14_13">table14_13</RouterLink>
        <RouterLink to="/table14_14">table14_14</RouterLink>
        <RouterLink to="/table15">table15 导出数据功能</RouterLink>
        <RouterLink to="/table15_01">table15_01</RouterLink>
        <RouterLink to="/table15_02">table15_02</RouterLink>
        <RouterLink to="/table15_03">table15_03</RouterLink>
        <RouterLink to="/table15_04">table15_04</RouterLink>
        <RouterLink to="/table15_05">table15_05</RouterLink>
        <RouterLink to="/table15_06">table15_06</RouterLink>
        <RouterLink to="/table15_07">table15_07</RouterLink>
        <RouterLink to="/table15_08">table15_08</RouterLink>
        <RouterLink to="/table15_09">table15_09</RouterLink>
        <RouterLink to="/table15_10">table15_10</RouterLink>
        <RouterLink to="/table15_11">table15_11</RouterLink>
        <RouterLink to="/table15_12">table15_12</RouterLink>
        <RouterLink to="/table15_13">table15_13</RouterLink>
        <RouterLink to="/table15_14">table15_14</RouterLink>
        <RouterLink to="/table16">table16添加行拖拽排序功能</RouterLink>
        <RouterLink to="/table16_01">table16_01</RouterLink>
        <RouterLink to="/table16_02">table16_02</RouterLink>
        <RouterLink to="/table16_03">table16_03</RouterLink>
        <RouterLink to="/table16_04">table16_04</RouterLink>
        <RouterLink to="/table16_05">table16_05</RouterLink>
        <RouterLink to="/table16_06">table16_06</RouterLink>
        <RouterLink to="/table16_07">table16_07</RouterLink>
        <RouterLink to="/table16_08">table16_08</RouterLink>
        <RouterLink to="/table16_09">table16_09</RouterLink>
        <RouterLink to="/table16_10">table16_10</RouterLink>
        <RouterLink to="/table16_11">table16_11</RouterLink>
        <RouterLink to="/table16_12">table16_12</RouterLink>
        <RouterLink to="/table16_13">table16_13</RouterLink>
        <RouterLink to="/table16_14">table16_14</RouterLink>
        <RouterLink to="/calendar">日历（Calendar）</RouterLink>
        <RouterLink to="/calendar01_01">日历_基础功能示例（CalendarView01_01）</RouterLink>
        <RouterLink to="/calendar01_02">日历_日期范围选择示例（CalendarView01_02）</RouterLink>
        <RouterLink to="/calendar01_03">日历_深色主题示例（CalendarView01_03）</RouterLink>
        <RouterLink to="/calendar01_04">日历_工作日高亮显示示例（CalendarView01_04）</RouterLink>
        <RouterLink to="/calendar01_05">日历_今日按钮示例（CalendarView01_05）</RouterLink>
        <RouterLink to="/calendar01_06">日历_日期范围限制示例（CalendarView01_06）</RouterLink>
        <RouterLink to="/calendar01_07">日历_自定义单元格大小示例（CalendarView01_07）</RouterLink>
        <RouterLink to="/calendar01_08">日历_自定义周起始日示例（CalendarView01_08）</RouterLink>
        <RouterLink to="/calendar01_09">日历_生日年龄计算示例（CalendarView01_09）</RouterLink>
        <RouterLink to="/calendar01_10">日历_自定义当前日期示例（CalendarView01_10）</RouterLink>
        <RouterLink to="/calendar01_11">日历_节假日倒计时示例（CalendarView01_11）</RouterLink>
        <RouterLink to="/calendar01_12">日历_日历签到打卡示例（CalendarView01_12）</RouterLink>
        <RouterLink to="/calendar01_13">日历_日历心情记录示例（CalendarView01_13）</RouterLink>
        <RouterLink to="/calendar01_14">日历_德语本地化与日期范围示例（CalendarView01_14）</RouterLink>
        <RouterLink to="/calendar01_15">日历_西班牙语无头部显示示例（CalendarView01_15）</RouterLink>
        <RouterLink to="/calendar01_16">日历_倒班排班日历示例（CalendarView01_16）</RouterLink>
        <RouterLink to="/calendar01_17">日历_运动计划日历示例（CalendarView01_17）</RouterLink>
        <RouterLink to="/calendar01_18">日历_天气预报日历示例（CalendarView01_18）</RouterLink>
      </nav>
    </div>
  </header>
  <RouterView/>
</template>

<style scoped>
header {
  line-height: 1.5;
  max-height: 100vh;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>

?本文页面效果

?相关文章

119.

118.

117.

116.

115.

114.

113.

112.

111.

110.

109.

108.

107.

106.

105.

104.

103.

102.

101.

100.

99.

98.

97.

96.

95.

94.

93.

92.

91.

90.

89.

88.

87.

86.

85.

84.

83.

82.

81.

80.

79.

78.

77.

76.

75.

74.

73.

72.

71.

70.

69.

68.

67.

66.

65.

64.

63.

62.

61.

60.

59.

58.

57.

56.

55.

54.

53.

52.

51.

50.

49.

48.

47.

46.

45.

44.

43.

42.

41.

40.

39.

38.

37.

36.

35.

34.

33.

32.

31.

30.

29.

28.

27.

26.

25.

24.

23.

22.

21.

20.

19.

18.

17.

16.

15.

14.

13.

12.

11.

10.

9.

8.

7.

6.

5.

4.

3.

2.

1.

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家多多支持宝码香车~?，若转载本文，一定注明本文链接。

更多专栏订阅推荐：
?
?
✈️
⭐️
?
✍️