DeepSeek 助力 Vue3 開發：打造絲滑的日歷（Calendar）

前言：哈嘍，大家好，今天給大家分享一篇文章！并提供具體代碼幫助大家深入理解，徹底掌握！創作不易，如果能幫助到大家或者給大家一些靈感和啟發，歡迎收藏+關注哦 💕

共同探索軟件研發！敬請關注【寶碼香車】
關注描述

csdngif標識

目錄

  • DeepSeek 助力 Vue3 開發：打造絲滑的日歷（Calendar）
    • 📚前言
    • 📚頁面效果
    • 📚指令輸入
      • 屬性
      • 事件
      • 其他建議
      • 📘組件代碼
    • 📚代碼測試
    • 📚上下月按鈕不太好用，整理后主要代碼
      • 📘定義組件 \src\components\Calendar\Calendar.vue
    • 📚測試代碼正常跑通，附其他基本代碼
      • 📘編寫路由 src\router\index.js
      • 📘編寫展示入口 src\App.vue
    • 📚頁面效果
    • 📚相關文章

📚📗📕📘📖🕮💡📝🗂???🛠?💻🚀🎉🏗?🌐🖼?🔗📊👉🔖??🌟🔐??·正文開始??·🎥😊🎓📩😺🌈🤝🤖📜📋🔍?🧰?📄📢📈 🙋0??1??2??3??4??5??6??7??8??9??🔟🆗*??#??

DeepSeek 助力 Vue3 開發：打造絲滑的日歷（Calendar）

📚前言

DeepSeek-V3-0324是DeepSeek團隊于2025年3月24日發布的V3模型升級版本。雖然官方將其定位為小版本迭代，但在多個方面都有顯著提升。以下是具體介紹：

  • 性能提升
    • 推理能力顯著增強：借鑒DeepSeek - R1的強化學習技術，在數學與代碼類評測集上取得突破性進展，MATH - 500、AIME 2024等數學競賽題得分超越GPT - 4.5，在經典“4升水壺問題”等邏輯推理任務中，表現接近專業推理模型。
    • 代碼能力大幅提高：在開源評測平臺kcores - llm - arena的代碼能力測試中得分328.3分，超越Claude 3.7 Sonnet普通版（322.3分），接近其思維鏈版本（334.8分）。能一次性生成800行無錯誤網頁代碼，實現動態響應式布局，生成的代碼在美觀度和功能完備性上媲美Claude 3.7 Sonnet。
    • 中文創作能力升級：針對中長篇文本進行專項優化后，可生成更具文學深度的內容，多輪對話中機械式應答減少，語言表達更趨近人類自然交流。
    • 智能搜索與報告生成優化：聯網搜索場景下，輸出的報告數據詳實度提升32%，排版美觀度優化明顯。
  • 架構與參數：采用專家混合（MoE）架構，參數總量從6710億增至6850億，激活參數為370億。通過動態路由機制僅激活部分專家，顯著提升計算效率。引入偏差項機制解決傳統MoE的負載不均衡問題，同時采用節點受限路由減少跨節點通信開銷，訓練效率提升一倍。使用FP8混合精度訓練，降低資源消耗并加快推理速度，響應速度提升4倍。
  • 開源協議：開源協議更新為MIT協議，允許自由商用、修改及模型蒸餾，開發者可無縫集成至商業系統，更加開放和友好。
  • 部署與應用：蘋果M3 Ultra芯片（200W功耗）即可流暢運行，部署成本降低90%。開源版本支持行業領先的128K超長上下文，適用于長文本處理任務。

總體而言，DeepSeek - V3 - 0324是一款性能全面、特色鮮明的國產開源大模型，在邏輯推理、代碼生成和中文創意內容方面表現出色，為各類用戶提供了實用的AI助手。

📚頁面效果

DeepSeek 助力 Vue3 開發：打造絲滑的日歷（Calendar）

📚指令輸入

進入deepseek頁面 https://chat.deepseek.com/
輸入指令

已經創建好了一個基于Vue3的組合式API的項目(Composition API)，并能正常運行起來，請幫我用 Vue3的組合式API(Composition API) 生成一個 日歷（Calendar） 的功能組件，所有代碼都保存在components/Calendar 下的文件夾中。功能組件的script標簽中只有setup屬性，使用普通 JavaScript 實現,不使用TypeScript。
功能要有，如下屬性：

屬性

  1. 日期相關
    • currentDate：當前顯示的日期，可用于初始化日歷顯示的月份和年份。
    • minDate：可選擇的最小日期，限制用戶選擇范圍。
    • maxDate：可選擇的最大日期，限制用戶選擇范圍。
    • selectedDates：已選中的日期，支持多選時可傳入數組。
  2. 顯示相關
    • showWeekNumbers：是否顯示周數。
    • weekStartDay：一周的起始日，如 0 表示周日，1 表示周一。
    • showHeader：是否顯示日歷頭部，包含年月切換等操作。
    • showTodayButton：是否顯示返回今日的按鈕。
  3. 國際化相關
    • locale：指定日歷的語言環境，用于顯示不同語言的月份和星期名稱。
  4. 樣式相關
    • theme：指定日歷的主題，如亮色、暗色。
    • cellSize：日歷單元格的大小。

事件

  1. 日期選擇
    • date-select：當用戶選擇日期時觸發，返回選中的日期。
    • date-range-select：當用戶選擇日期范圍時觸發，返回日期范圍。
  2. 日歷切換
    • month-change：當用戶切換月份時觸發，返回當前顯示的月份和年份。
    • year-change：當用戶切換年份時觸發，返回當前顯示的年份。
  3. 其他
    • today-click：當用戶點擊返回今日按鈕時觸發。

其他建議

  1. 性能優化：在渲染日歷數據時，可采用虛擬列表技術，減少不必要的 DOM 渲染。
  2. 無障礙支持：確保日歷組件支持鍵盤導航和屏幕閱讀器，提高可用性。
  3. 自定義插槽：提供一些自定義插槽，讓用戶可以自定義日歷的頭部、日期單元格等部分。
  4. 動畫效果：為日歷的切換和選擇操作添加一些動畫效果，提升用戶體驗。
  5. 響應式設計：確保日歷在不同屏幕尺寸下都能正常顯示和使用。

你有更好的建議也可以添加，要注明。組件定義好后給出5個及以上的調用示例，示例中添加完整的數據和事件，確保每個示例是獨立的。
下面是現有目錄
DeepSeekAndVue/
├── src/ # 源代碼目錄
│ ├── assets/ # 靜態資源
│ │ ├── base.css
│ │ ├── main.css
│ │ └── logo.svg
│ ├── components/ # 組件目錄
│ │ ├── HelloWorld.vue
│ │ ├── TheWelcome.vue
│ │ ├── WelcomeItem.vue
│ │ ├── Progress/
│ │ │ └── Progress.vue
│ │ ├── Accordion/
│ │ ├── BackToTop/
│ │ ├── Card/
│ │ ├── InfiniteScroll/
│ │ ├── Notification/
│ │ ├── Timeline/
│ │ ├── Switch/
│ │ ├── Tabs/
│ │ ├── Sidebar/
│ │ ├── Breadcrumbs/
│ │ ├── MasonryLayout/
│ │ ├── Rating/
│ │ ├── ColorPicker/
│ │ ├── RightClickMenu/
│ │ ├── RangePicker/
│ │ ├── Navbar/
│ │ ├── FormValidation/
│ │ ├── CopyToClipboard/
│ │ ├── ClickAnimations/
│ │ ├── ThumbnailList/
│ │ ├── KeyboardShortcuts/
│ │ ├── CommentSystem/
│ │ ├── QRCode/
│ │ ├── RadioButton/
│ │ ├── Slider/
│ │ ├── ScrollAnimations/
│ │ ├── TextInput/
│ │ ├── Divider/
│ │ ├── Checkbox/
│ │ ├── TagInput/
│ │ ├── DropdownSelect/
│ │ ├── List/
│ │ ├── Header/
│ │ ├── Footer/
│ │ ├── Pagination/
│ │ ├── FloatingActionButton/
│ │ ├── PasswordInput/
│ │ ├── GridLayout/
│ │ ├── Flexbox/
│ │ ├── Modal/
│ │ ├── RichTextEditor/
│ │ ├── TimePicker/
│ │ ├── FileUpload/
│ │ ├── Autocomplete/
│ │ ├── MultistepForm/
│ │ ├── SearchBar/
│ │ ├── DynamicFormFields/
│ │ ├── Table/
│ │ ├── DatePicker/
│ │ ├── Calendar/
│ │ └── icons/
│ ├── router/ # 路由配置
│ │ └── index.js
│ ├── stores/ # Pinia 狀態管理
│ │ └── counter.js
│ ├── views/ # 頁面組件
│ │ ├── ProgressView.vue
│ │ ├── TabsView.vue
│ │ ├── SwitchView.vue
│ │ ├── TimelineView.vue
│ │ ├── NotificationView.vue
│ │ ├── CardView.vue
│ │ ├── InfiniteScrollView.vue
│ │ ├── BackToTopView.vue
│ │ ├── AccordionView.vue
│ │ ├── SidebarView.vue
│ │ ├── BreadcrumbsView.vue
│ │ ├── MasonryLayoutView.vue
│ │ ├── RatingView.vue
│ │ ├── ColorPickerView.vue
│ │ ├── RightClickMenuView.vue
│ │ ├── RangePickerView.vue
│ │ ├── NavbarView.vue
│ │ ├── FormValidationView.vue
│ │ ├── CopyToClipboardView.vue
│ │ ├── ClickAnimationsView.vue
│ │ ├── ThumbnailListView.vue
│ │ ├── KeyboardShortcutsView.vue
│ │ ├── CommentSystemView.vue
│ │ ├── QRCodeView.vue
│ │ ├── RadioButtonView.vue
│ │ ├── SliderView.vue
│ │ ├── ScrollAnimationsView.vue
│ │ ├── TextInputView.vue
│ │ ├── DividerView.vue
│ │ ├── CheckboxView.vue
│ │ ├── TagInputView.vue
│ │ ├── DropdownSelectView.vue
│ │ ├── ListView.vue
│ │ ├── HeaderView.vue
│ │ ├── FooterView.vue
│ │ ├── PaginationView.vue
│ │ ├── FloatingActionButtonView.vue
│ │ ├── GridLayoutView.vue
│ │ ├── PasswordInputView.vue
│ │ ├── FlexboxView.vue
│ │ ├── ModalView.vue
│ │ ├── RichTextEditorView.vue
│ │ ├── TimePickerView.vue
│ │ ├── FileUploadView.vue
│ │ ├── AutocompleteView.vue
│ │ ├── MultistepFormView.vue
│ │ ├── SearchBarView.vue
│ │ ├── DynamicFormFieldsView.vue
│ │ ├── TableView.vue
│ │ ├── DatePickerView.vue
│ │ ├── CalendarView.vue
│ │ └── AboutView.vue
│ ├── App.vue # 根組件
│ └── main.js # 應用入口
├── public/ # 公共資源目錄
├── index.html # HTML 模板
├── package.json # 項目配置
├── vite.config.js # Vite 配置
└── node_modules/ # 依賴包目錄

📘組件代碼

我將按照您的要求創建Calendar組件。以下是分步實現的代碼：

components/Calendar/Calendar.vue

<template><div class="calendar" :class="[themeClass, { 'calendar-week-numbers': showWeekNumbers }]"><!-- Header --><header v-if="showHeader" class="calendar-header"><slot name="header" :year="currentYear" :month="currentMonth" :prev="prevMonth" :next="nextMonth"><button @click="prevMonth">&lt;</button><h2>{{ monthYearLabel }}</h2><button @click="nextMonth">&gt;</button></slot></header><!-- Week Numbers --><div v-if="showWeekNumbers" class="week-numbers"><div v-for="week in weeks" :key="week.number" class="week-number">{{ week.number }}</div></div><!-- Calendar Body --><div class="calendar-body"><!-- Week Days Header --><div class="week-days"><div v-for="day in weekDays" :key="day" class="week-day">{{ day }}</div></div><!-- Dates Grid --><div class="dates-grid"><buttonv-for="date in visibleDates":key="date.timestamp"class="date-cell":class="{'current-month': date.isCurrentMonth,'selected': isDateSelected(date.date),'disabled': !isDateSelectable(date.date)}":style="{ width: cellSize + 'px', height: cellSize + 'px' }"@click="handleDateClick(date.date)"><slot name="date-cell" :date="date.date" :isSelected="isDateSelected(date.date)" :isCurrentMonth="date.isCurrentMonth">{{ date.date.getDate() }}</slot></button></div></div><!-- Today Button --><footer v-if="showTodayButton" class="calendar-footer"><button @click="handleTodayClick">Today</button></footer></div>
</template><script setup>
import { ref, computed, watch } from 'vue'const props = defineProps({currentDate: {type: Date,default: () => new Date()},minDate: Date,maxDate: Date,selectedDates: {type: Array,default: () => []},showWeekNumbers: Boolean,weekStartDay: {type: Number,default: 1,validator: value => value >= 0 && value <= 6},showHeader: {type: Boolean,default: true},showTodayButton: Boolean,locale: {type: String,default: 'en-US'},theme: {type: String,default: 'light',validator: value => ['light', 'dark'].includes(value)},cellSize: {type: Number,default: 40}
})const emit = defineEmits(['date-select','date-range-select','month-change','year-change','today-click'
])// Reactive state
const currentViewDate = ref(new Date(props.currentDate))
const selectedDates = ref([...props.selectedDates])
let rangeStart = ref(null)// Computed properties
const currentYear = computed(() => currentViewDate.value.getFullYear())
const currentMonth = computed(() => currentViewDate.value.getMonth())const monthYearLabel = computed(() => {return currentViewDate.value.toLocaleDateString(props.locale, {year: 'numeric',month: 'long'})
})const weekDays = computed(() => {const days = []const date = new Date()date.setDate(date.getDate() - date.getDay() + props.weekStartDay)for (let i = 0; i < 7; i++) {days.push(date.toLocaleDateString(props.locale, { weekday: 'short' }))date.setDate(date.getDate() + 1)}return days
})const visibleDates = computed(() => {const dates = []const start = getCalendarStartDate()const end = getCalendarEndDate()const current = new Date(start)while (current <= end) {dates.push({date: new Date(current),isCurrentMonth: current.getMonth() === currentMonth.value,timestamp: current.getTime()})current.setDate(current.getDate() + 1)}return dates
})const weeks = computed(() => {const weeks = []let weekNumber = 1const startDate = getCalendarStartDate()const current = new Date(startDate)while (current <= getCalendarEndDate()) {if (current.getDay() === props.weekStartDay || weekNumber === 1) {const weekStart = new Date(current)weeks.push({number: getWeekNumber(weekStart),start: weekStart})weekNumber++}current.setDate(current.getDate() + 1)}return weeks
})const themeClass = computed(() => `theme-${props.theme}`)// Methods
function getCalendarStartDate() {const date = new Date(currentYear.value, currentMonth.value, 1)const day = date.getDay()const diff = (day - props.weekStartDay + 7) % 7date.setDate(date.getDate() - diff)return date
}function getCalendarEndDate() {const date = new Date(currentYear.value, currentMonth.value + 1, 0)const day = date.getDay()const diff = (props.weekStartDay - 1 - day + 7) % 7date.setDate(date.getDate() + diff)return date
}function getWeekNumber(date) {const d = new Date(date)d.setHours(0, 0, 0, 0)d.setDate(d.getDate() + 4 - (d.getDay() || 7))const yearStart = new Date(d.getFullYear(), 0, 1)return Math.ceil(((d - yearStart) / 86400000 + 1) / 7)
}function isDateSelected(date) {return selectedDates.value.some(d => d.toDateString() === date.toDateString())
}function isDateSelectable(date) {return (!props.minDate || date >= props.minDate) &&(!props.maxDate || date <= props.maxDate)
}function handleDateClick(date) {if (!isDateSelectable(date)) return// Handle range selectionif (rangeStart.value) {const start = new Date(rangeStart.value)const end = new Date(date)if (start > end) [start, end] = [end, start]emit('date-range-select', { start, end })rangeStart.value = null} else {selectedDates.value.push(date)emit('date-select', date)rangeStart.value = date}
}function handleTodayClick() {currentViewDate.value = new Date()emit('today-click', new Date())
}function prevMonth() {currentViewDate.value.setMonth(currentViewDate.value.getMonth() - 1)updateMonthYear()
}function nextMonth() {currentViewDate.value.setMonth(currentViewDate.value.getMonth() + 1)updateMonthYear()
}function updateMonthYear() {emit('month-change', {year: currentYear.value,month: currentMonth.value + 1})emit('year-change', currentYear.value)
}// Watchers
watch(() => props.selectedDates, (newVal) => {selectedDates.value = [...newVal]
})watch(currentViewDate, (newVal) => {currentViewDate.value = new Date(newVal)
})
</script><style scoped>
.calendar {font-family: Arial, sans-serif;max-width: 400px;margin: 0 auto;border: 1px solid #ccc;border-radius: 4px;padding: 1rem;
}.theme-dark {background-color: #333;color: white;
}.calendar-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 1rem;
}.week-days, .dates-grid {display: grid;grid-template-columns: repeat(7, 1fr);gap: 2px;
}.week-day {text-align: center;padding: 0.5rem;font-weight: bold;
}.date-cell {border: none;cursor: pointer;display: flex;align-items: center;justify-content: center;background: none;
}.date-cell.current-month {background-color: #f0f0f0;
}.date-cell.selected {background-color: #2196F3;color: white;
}.date-cell.disabled {opacity: 0.5;cursor: not-allowed;
}.week-numbers {display: flex;flex-direction: column;gap: 2px;margin-right: 0.5rem;
}.week-number {height: v-bind('cellSize + "px"');display: flex;align-items: center;justify-content: center;
}.calendar-week-numbers {display: flex;
}.calendar-body {flex: 1;
}.calendar-footer {margin-top: 1rem;text-align: center;
}
</style>

以下是5個調用示例：

  1. 基本使用
<template><Calendar@date-select="handleDateSelect"/>
</template><script setup>
import Calendar from '@/components/Calendar/Calendar.vue'const handleDateSelect = (date) => {console.log('Selected date:', date)
}
</script>
  1. 多選日期
<template><Calendarv-model:selected-dates="selectedDates"@date-select="handleSelect"/>
</template><script setup>
import { ref } from 'vue'
import Calendar from '@/components/Calendar/Calendar.vue'const selectedDates = ref([])
const handleSelect = (date) => {console.log('Selected dates:', selectedDates.value)
}
</script>
  1. 日期范圍選擇
<template><Calendar@date-range-select="handleRangeSelect"/>
</template><script setup>
import Calendar from '@/components/Calendar/Calendar.vue'const handleRangeSelect = ({ start, end }) => {console.log('Date range:', start, 'to', end)
}
</script>
  1. 自定義顯示設置
<template><Calendar:show-week-numbers="true":week-start-day="1":show-header="false":show-today-button="true"theme="dark":cell-size="50"locale="zh-CN"/>
</template>
  1. 帶日期限制
<template><Calendar:min-date="new Date(2024, 0, 1)":max-date="new Date(2024, 11, 31)"@date-select="handleSelect"/>
</template><script setup>
import Calendar from '@/components/Calendar/Calendar.vue'const handleSelect = (date) => {console.log('Valid date selected:', date)
}
</script>

組件特點說明：

  1. 使用組合式API實現，所有邏輯都在setup中組織
  2. 支持多種日期選擇模式（單選、多選、范圍選擇）
  3. 完整的國際化支持
  4. 響應式布局，自動適應容器寬度
  5. 支持鍵盤導航（可通過添加鍵盤事件處理器擴展）
  6. 提供多個插槽（header、date-cell）用于自定義內容
  7. 內置主題系統，支持輕松擴展新主題
  8. 完善的日期驗證邏輯
  9. 性能優化：使用計算屬性緩存數據，減少重復計算

可以根據實際需求添加更多功能，如：

  • 日期標記功能（節假日、特殊日期）
  • 更強大的鍵盤導航支持
  • 拖拽選擇日期范圍
  • 周/月視圖切換
  • 自定義日期格式化函數等

📚代碼測試

運行正常

📚上下月按鈕不太好用，整理后主要代碼

📘定義組件 \src\components\Calendar\Calendar.vue

<template><div class="calendar" :class="[themeClass, { 'calendar-week-numbers': showWeekNumbers }]"><!-- Header --><header v-if="showHeader" class="calendar-header"><slot name="header" :year="currentYear" :month="currentMonth" :prev="prevMonth" :next="nextMonth"><button @click="prevMonth">&lt;</button><h2>{{ monthYearLabel }}</h2><button @click="nextMonth">&gt;</button></slot></header><!-- Week Numbers --><div v-if="showWeekNumbers" class="week-numbers"><div v-for="week in weeks" :key="week.number" class="week-number">{{ week.number }}</div></div><!-- Calendar Body --><div class="calendar-body"><!-- Week Days Header --><div class="week-days"><div v-for="day in weekDays" :key="day" class="week-day">{{ day }}</div></div><!-- Dates Grid --><div class="dates-grid"><buttonv-for="date in visibleDates":key="date.timestamp"class="date-cell":class="{'current-month': date.isCurrentMonth,'selected': isDateSelected(date.date),'in-range': isDateInRange(date.date),'disabled': !isDateSelectable(date.date)}":style="{ width: cellSize + 'px', height: cellSize + 'px' }"@click="handleDateClick(date.date)"><slot name="date-cell" :date="date.date" :isSelected="isDateSelected(date.date)" :isCurrentMonth="date.isCurrentMonth">{{ date.date.getDate() }}</slot></button></div></div><!-- Today Button --><footer v-if="showTodayButton" class="calendar-footer"><button @click="handleTodayClick">Today</button></footer></div>
</template><script setup>
import { ref, computed, watch } from 'vue'const props = defineProps({currentDate: {type: Date,default: () => new Date()},minDate: Date,maxDate: Date,selectedDates: {type: Array,default: () => []},showWeekNumbers: Boolean,weekStartDay: {type: Number,default: 1,validator: value => value >= 0 && value <= 6},showHeader: {type: Boolean,default: true},showTodayButton: Boolean,locale: {type: String,default: 'en-US'},theme: {type: String,default: 'light',validator: value => ['light', 'dark'].includes(value)},cellSize: {type: Number,default: 40},selectionMode: {type: String,default: 'single',validator: value => ['single', 'range'].includes(value)}
})const emit = defineEmits(['date-select','date-range-select','month-change','year-change','today-click'
])// Reactive state
const currentViewDate = ref(new Date(props.currentDate))
const selectedDates = ref([...props.selectedDates])
let rangeStart = ref(null)// Computed properties
const currentYear = computed(() => currentViewDate.value.getFullYear())
const currentMonth = computed(() => currentViewDate.value.getMonth())const monthYearLabel = computed(() => {return currentViewDate.value.toLocaleDateString(props.locale, {year: 'numeric',month: 'long'})
})const weekDays = computed(() => {const days = []const date = new Date()date.setDate(date.getDate() - date.getDay() + props.weekStartDay)for (let i = 0; i < 7; i++) {days.push(date.toLocaleDateString(props.locale, { weekday: 'short' }))date.setDate(date.getDate() + 1)}return days
})const visibleDates = computed(() => {const dates = []const start = getCalendarStartDate()const end = getCalendarEndDate()const current = new Date(start)while (current <= end) {dates.push({date: new Date(current),isCurrentMonth: current.getMonth() === currentMonth.value,timestamp: current.getTime()})current.setDate(current.getDate() + 1)}return dates
})const weeks = computed(() => {const weeks = []let weekNumber = 1const startDate = getCalendarStartDate()const current = new Date(startDate)while (current <= getCalendarEndDate()) {if (current.getDay() === props.weekStartDay || weekNumber === 1) {const weekStart = new Date(current)weeks.push({number: getWeekNumber(weekStart),start: weekStart})weekNumber++}current.setDate(current.getDate() + 1)}return weeks
})const themeClass = computed(() => `theme-${props.theme}`)const isDateInRange = computed(() => (date) => {if (!rangeStart.value || !selectedDates.value.length) return falseconst start = new Date(Math.min(rangeStart.value.getTime(), selectedDates.value[0].getTime()))const end = new Date(Math.max(rangeStart.value.getTime(), selectedDates.value[0].getTime()))return date >= start && date <= end
})// Methods
function getCalendarStartDate() {const date = new Date(currentYear.value, currentMonth.value, 1)const day = date.getDay()const diff = (day - props.weekStartDay + 7) % 7date.setDate(date.getDate() - diff)return date
}function getCalendarEndDate() {const date = new Date(currentYear.value, currentMonth.value + 1, 0)const day = date.getDay()const diff = (props.weekStartDay - 1 - day + 7) % 7date.setDate(date.getDate() + diff)return date
}function getWeekNumber(date) {const d = new Date(date)d.setHours(0, 0, 0, 0)d.setDate(d.getDate() + 4 - (d.getDay() || 7))const yearStart = new Date(d.getFullYear(), 0, 1)return Math.ceil(((d - yearStart) / 86400000 + 1) / 7)
}function isDateSelected(date) {return selectedDates.value.some(d => d.toDateString() === date.toDateString())
}function isDateSelectable(date) {return (!props.minDate || date >= props.minDate) &&(!props.maxDate || date <= props.maxDate)
}function handleDateClick(date) {if (!isDateSelectable(date)) returnif (props.selectionMode === 'range') {if (!rangeStart.value) {rangeStart.value = dateselectedDates.value = [date]} else {const start = new Date(rangeStart.value)const end = new Date(date)if (start > end) [start, end] = [end, start]emit('date-range-select', { start, end })selectedDates.value = [start, end]rangeStart.value = null}} else {selectedDates.value = [date]emit('date-select', date)}
}function handleTodayClick() {currentViewDate.value = new Date()emit('today-click', new Date())
}function prevMonth() {const newDate = new Date(currentViewDate.value)newDate.setMonth(newDate.getMonth() - 1)currentViewDate.value = newDateupdateMonthYear()
}function nextMonth() {const newDate = new Date(currentViewDate.value)newDate.setMonth(newDate.getMonth() + 1)currentViewDate.value = newDateupdateMonthYear()
}function updateMonthYear() {emit('month-change', {year: currentYear.value,month: currentMonth.value + 1})emit('year-change', currentYear.value)
}// Watchers
watch(() => props.selectedDates, (newVal) => {selectedDates.value = [...newVal]
})
</script><style scoped>
.calendar {font-family: Arial, sans-serif;max-width: 400px;margin: 0 auto;border: 1px solid #ccc;border-radius: 4px;padding: 1rem;
}.theme-dark {background-color: #333;color: white;
}.calendar-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 1rem;
}.week-days, .dates-grid {display: grid;grid-template-columns: repeat(7, 1fr);gap: 2px;
}.week-day {text-align: center;padding: 0.5rem;font-weight: bold;
}.date-cell {border: none;cursor: pointer;display: flex;align-items: center;justify-content: center;background: none;
}.date-cell.current-month {background-color: #f0f0f0;
}.date-cell.selected {background-color: #2196F3;color: white;
}.date-cell.disabled {opacity: 0.5;cursor: not-allowed;
}.date-cell.in-range {background-color: rgba(33, 150, 243, 0.2);
}.week-numbers {display: flex;flex-direction: column;gap: 2px;margin-right: 0.5rem;
}.week-number {height: v-bind('cellSize + "px"');display: flex;align-items: center;justify-content: center;
}.calendar-week-numbers {display: flex;
}.calendar-body {flex: 1;
}.calendar-footer {margin-top: 1rem;text-align: center;
}.calendar-header button {padding: 8px 12px;border: 1px solid #ddd;background-color: #fff;border-radius: 4px;cursor: pointer;font-size: 14px;
}.calendar-header button:hover {background-color: #f0f0f0;
}.theme-dark .calendar-header button {background-color: #444;border-color: #666;color: white;
}.theme-dark .calendar-header button:hover {background-color: #555;
}
</style>

📚測試代碼正常跑通，附其他基本代碼

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

📘編寫路由 src\router\index.js

\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')}],
})export default router

📘編寫展示入口 src\App.vue

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></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>

📚頁面效果

DeepSeek 助力 Vue3 開發：打造絲滑的日歷（Calendar）

📚相關文章

? ?

———— 相　關　文　章 ————

? ?

  1. DeepSeek 助力 Vue 開發：打造絲滑的步驟條（Step bar）https://blog.csdn.net/qq_33650655/article/details/145560497

  2. DeepSeek 助力 Vue 開發：打造絲滑的進度條（Progress Bar）https://blog.csdn.net/qq_33650655/article/details/145577034

  3. DeepSeek 助力 Vue 開發：打造絲滑的標簽頁（Tabs）https://blog.csdn.net/qq_33650655/article/details/145587999

  4. DeepSeek 助力 Vue 開發：打造絲滑的折疊面板（Accordion）https://blog.csdn.net/qq_33650655/article/details/145590404

  5. DeepSeek 助力 Vue 開發：打造絲滑的時間線（Timeline ）https://blog.csdn.net/qq_33650655/article/details/145597372

  6. DeepSeek 助力 Vue 開發：打造絲滑的返回頂部按鈕（Back to Top）https://blog.csdn.net/qq_33650655/article/details/145615550

  7. DeepSeek 助力 Vue 開發：打造絲滑的通知欄（Notification Bar）https://blog.csdn.net/qq_33650655/article/details/145620055

  8. DeepSeek 助力 Vue 開發：打造絲滑的卡片（Card）https://blog.csdn.net/qq_33650655/article/details/145634564

  9. DeepSeek 助力 Vue 開發：打造絲滑的無限滾動（Infinite Scroll）https://blog.csdn.net/qq_33650655/article/details/145638452

  10. DeepSeek 助力 Vue 開發：打造絲滑的開關切換（Switch）https://blog.csdn.net/qq_33650655/article/details/145644151

  11. DeepSeek 助力 Vue 開發：打造絲滑的側邊欄（Sidebar）https://blog.csdn.net/qq_33650655/article/details/145654204

  12. DeepSeek 助力 Vue 開發：打造絲滑的面包屑導航（Breadcrumbs）https://blog.csdn.net/qq_33650655/article/details/145656895

  13. DeepSeek 助力 Vue 開發：打造絲滑的瀑布流布局（Masonry Layout）https://blog.csdn.net/qq_33650655/article/details/145663699

  14. DeepSeek 助力 Vue 開發：打造絲滑的評分組件（Rating）https://blog.csdn.net/qq_33650655/article/details/145664576

  15. DeepSeek 助力 Vue 開發：打造絲滑的日期選擇器（Date Picker），未使用第三方插件 https://blog.csdn.net/qq_33650655/article/details/145673279

  16. DeepSeek 助力 Vue 開發：打造絲滑的顏色選擇器（Color Picker）https://blog.csdn.net/qq_33650655/article/details/145689522

  17. DeepSeek 助力 Vue 開發：打造絲滑的右鍵菜單（RightClickMenu）https://blog.csdn.net/qq_33650655/article/details/145706658

  18. DeepSeek 助力 Vue 開發：打造絲滑的范圍選擇器（Range Picker）https://blog.csdn.net/qq_33650655/article/details/145713572

  19. DeepSeek 助力 Vue 開發：打造絲滑的導航欄（Navbar）https://blog.csdn.net/qq_33650655/article/details/145732421

  20. DeepSeek 助力 Vue 開發：打造絲滑的表單驗證（Form Validation）https://blog.csdn.net/qq_33650655/article/details/145735582

  21. DeepSeek 助力 Vue 開發：打造絲滑的復制到剪貼板（Copy to Clipboard）https://blog.csdn.net/qq_33650655/article/details/145739569

  22. DeepSeek 助力 Vue 開發：打造絲滑的點擊動畫（Click Animations）https://blog.csdn.net/qq_33650655/article/details/145766184

  23. DeepSeek 助力 Vue 開發：打造絲滑的縮略圖列表（Thumbnail List）https://blog.csdn.net/qq_33650655/article/details/145776679

  24. DeepSeek 助力 Vue 開發：打造絲滑的 鍵盤快捷鍵（Keyboard Shortcuts） https://blog.csdn.net/qq_33650655/article/details/145780227

  25. DeepSeek 助力 Vue 開發：打造絲滑的評論系統（Comment System）https://blog.csdn.net/qq_33650655/article/details/145781104

  26. DeepSeek 助力 Vue 開發：打造絲滑的二維碼生成（QR Code）https://blog.csdn.net/qq_33650655/article/details/145797928

  27. DeepSeek 助力 Vue 開發：打造絲滑的單選按鈕（Radio Button）https://blog.csdn.net/qq_33650655/article/details/145810620

  28. DeepSeek 助力 Vue 開發：打造絲滑的滑塊（Slider）https://blog.csdn.net/qq_33650655/article/details/145817161

  29. DeepSeek 助力 Vue 開發：打造絲滑的滾動動畫（Scroll Animations）https://blog.csdn.net/qq_33650655/article/details/145818571

  30. DeepSeek 助力 Vue 開發：打造絲滑的文本輸入框（Text Input）https://blog.csdn.net/qq_33650655/article/details/145837003

  31. DeepSeek 助力 Vue 開發：打造絲滑的分割線（Divider）https://blog.csdn.net/qq_33650655/article/details/145849100

  32. DeepSeek 助力 Vue 開發：打造絲滑的 復選框（Checkbox）https://blog.csdn.net/qq_33650655/article/details/145855695

  33. DeepSeek 助力 Vue3 開發：打造絲滑的標簽輸入（Tag Input）https://blog.csdn.net/qq_33650655/article/details/145858574

  34. DeepSeek 助力 Vue3 開發：打造絲滑的下拉選擇框（Dropdown Select）https://blog.csdn.net/qq_33650655/article/details/145861882

  35. DeepSeek 助力 Vue3 開發：打造絲滑的列表（List）https://blog.csdn.net/qq_33650655/article/details/145866384

  36. DeepSeek 助力 Vue3 開發：打造絲滑的頁眉（Header）https://blog.csdn.net/qq_33650655/article/details/145885122

  37. DeepSeek 助力 Vue3 開發：打造絲滑的頁腳（Footer）https://blog.csdn.net/qq_33650655/article/details/145886306

  38. DeepSeek 助力 Vue3 開發：打造絲滑的分頁（Pagination）https://blog.csdn.net/qq_33650655/article/details/145886824

  39. DeepSeek 助力 Vue3 開發：打造絲滑的懸浮按鈕（Floating Action Button）
    https://blog.csdn.net/qq_33650655/article/details/145888339

  40. DeepSeek 助力 Vue3 開發：打造絲滑的網格布局（Grid Layout）https://blog.csdn.net/qq_33650655/article/details/145893422

  41. DeepSeek 助力 Vue3 開發：打造絲滑的密碼輸入框（Password Input））https://blog.csdn.net/qq_33650655/article/details/145903079

  42. DeepSeek 助力 Vue3 開發：打造絲滑的彈性布局（Flexbox）https://blog.csdn.net/qq_33650655/article/details/145938677

  43. DeepSeek 助力 Vue3 開發：打造絲滑的模態框（Modal）https://blog.csdn.net/qq_33650655/article/details/145938939

  44. DeepSeek 助力 Vue3 開發：打造絲滑的時間選擇器（Time Picker）https://blog.csdn.net/qq_33650655/article/details/145939053

  45. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）示例1：基礎表格 https://blog.csdn.net/qq_33650655/article/details/145939144

  46. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）示例2: 分頁和排序 https://blog.csdn.net/qq_33650655/article/details/146025347

  47. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）示例3: 行選擇 https://blog.csdn.net/qq_33650655/article/details/146025478

  48. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）示例4: 自定義插槽 https://blog.csdn.net/qq_33650655/article/details/146025513

  49. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）示例5: 搜索和過濾 https://blog.csdn.net/qq_33650655/article/details/146025532

  50. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之功能優化，添加表格空狀態提示 https://blog.csdn.net/qq_33650655/article/details/146042249

  51. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之功能優化，添加表格空狀態提示，帶插圖的空狀態，Table7空狀態2 https://blog.csdn.net/qq_33650655/article/details/146046044

  52. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之功能優化，基礎加載狀態,Table8基礎加載狀態 https://blog.csdn.net/qq_33650655/article/details/146049283

  53. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之功能優化，自定義加載文本,Table9自定義加載文本https://blog.csdn.net/qq_33650655/article/details/146049592

  54. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之功能優化，完全自定義加載內容,Table10完全自定義加載內容 https://blog.csdn.net/qq_33650655/article/details/146049663

  55. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之功能優化，加載結合分頁 ,Table11加載結合分頁 https://blog.csdn.net/qq_33650655/article/details/146049727

  56. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之功能優化，添加列寬調整功能Table12 https://blog.csdn.net/qq_33650655/article/details/146139452

  57. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加列寬調整功能,示例Table14基礎固定表頭示例https://blog.csdn.net/qq_33650655/article/details/146166033

  58. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加列寬調整功能,示例Table14_01基礎固定表頭示例 https://blog.csdn.net/qq_33650655/article/details/146162035

  59. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加列寬調整功能,示例Table14_02帶邊框和斑馬紋的固定表頭表格 https://blog.csdn.net/qq_33650655/article/details/146162045

  60. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加列寬調整功能,示例Table14_03可調整列寬的固定表頭表格 https://blog.csdn.net/qq_33650655/article/details/146162057

  61. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加列寬調整功能,示例Table14_04帶選擇框的固定表頭表格 https://blog.csdn.net/qq_33650655/article/details/146162076

  62. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加列寬調整功能,示例Table14_05可排序的固定表頭表格 https://blog.csdn.net/qq_33650655/article/details/146162098

  63. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加列寬調整功能,示例Table14_06帶搜索功能的固定表頭表格 https://blog.csdn.net/qq_33650655/article/details/146162127

  64. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加列寬調整功能,示例Table14_07帶分頁的固定表頭表格 https://blog.csdn.net/qq_33650655/article/details/146162135

  65. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加列寬調整功能,示例Table14_08帶加載狀態的固定表頭表格 https://blog.csdn.net/qq_33650655/article/details/146162142

  66. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加列寬調整功能,示例Table14_09自定義單元格的固定表頭表格 https://blog.csdn.net/qq_33650655/article/details/146162151

  67. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加列寬調整功能,示例Table14_10空狀態的固定表頭表格 https://blog.csdn.net/qq_33650655/article/details/146162165

  68. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加列寬調整功能,示例Table14_11多功能組合的固定表頭表格 https://blog.csdn.net/qq_33650655/article/details/146162175

  69. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加列寬調整功能,示例Table14_12自定義表頭的固定表頭表格 https://blog.csdn.net/qq_33650655/article/details/146162186

  70. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加列寬調整功能,示例Table14_13可展開行的固定表頭表格 https://blog.csdn.net/qq_33650655/article/details/146162201

  71. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加列寬調整功能,示例Table14_14樹形數據的固定表頭表格 https://blog.csdn.net/qq_33650655/article/details/146162213

  72. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加導出數據功能 https://blog.csdn.net/qq_33650655/article/details/146329292

  73. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加導出數據功能示例1，TableView15_01基礎導出功能示例 https://blog.csdn.net/qq_33650655/article/details/146349203

  74. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加導出數據功能示例2，TableView15_02導出為CSV格式示例 https://blog.csdn.net/qq_33650655/article/details/146350878

  75. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加導出數據功能示例3，TableView15_03導出全部數據示例 https://blog.csdn.net/qq_33650655/article/details/146351008

  76. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加導出數據功能示例4，TableView15_04導出當前頁數據示例 https://blog.csdn.net/qq_33650655/article/details/146382664

  77. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加導出數據功能示例5，TableView15_05自定義導出按鈕文本示例 https://blog.csdn.net/qq_33650655/article/details/146383279

  78. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加導出數據功能示例6，TableView15_06自定義導出文件名示例 https://blog.csdn.net/qq_33650655/article/details/146383261

  79. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加導出數據功能示例7，TableView15_07帶邊框和斑馬紋的導出表格示例 https://blog.csdn.net/qq_33650655/article/details/146351137

  80. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加導出數據功能示例8，TableView15_08帶選擇框的導出表格示例 https://blog.csdn.net/qq_33650655/article/details/146351159

  81. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加導出數據功能示例9，TableView15_09帶排序的導出表格示例 https://blog.csdn.net/qq_33650655/article/details/146351181

  82. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加導出數據功能示例10，TableView15_10帶搜索的導出表格示例 https://blog.csdn.net/qq_33650655/article/details/146351196

  83. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加導出數據功能示例11，TableView15_11帶分頁的導出表格示例 https://blog.csdn.net/qq_33650655/article/details/146351224

  84. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加導出數據功能示例12，TableView15_12固定表頭的導出表格示例 https://blog.csdn.net/qq_33650655/article/details/146351254

  85. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加導出數據功能示例13，TableView15_13可調整列寬的導出表格示例 https://blog.csdn.net/qq_33650655/article/details/146351271

  86. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加導出數據功能示例14，TableView15_14多功能組合的導出表格示例 https://blog.csdn.net/qq_33650655/article/details/146351297

  87. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加行拖拽排序功能 https://blog.csdn.net/qq_33650655/article/details/146351051

  88. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加行拖拽排序功能示例1，TableView16_01.vue 基礎行拖拽排序示例 https://blog.csdn.net/qq_33650655/article/details/146516134

  89. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加行拖拽排序功能示例2，TableView16_02.vue 拖拽視覺反饋示例 https://blog.csdn.net/qq_33650655/article/details/146351077

  90. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加行拖拽排序功能示例3，TableView16_03 拖拽視覺反饋示例 https://blog.csdn.net/qq_33650655/article/details/146517501

  91. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加行拖拽排序功能示例4，TableView16_04 跨表格拖拽示例 https://blog.csdn.net/qq_33650655/article/details/146517613

  92. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加行拖拽排序功能示例5，TableView16_05 樹形表格拖拽排序 https://blog.csdn.net/qq_33650655/article/details/146517619

  93. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加行拖拽排序功能示例6，TableView16_06 分頁表格拖拽排序 https://blog.csdn.net/qq_33650655/article/details/146517627

  94. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加行拖拽排序功能示例7，TableView16_07 列拖拽排序示例 https://blog.csdn.net/qq_33650655/article/details/146351099

  95. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加行拖拽排序功能示例8，TableView16_08 篩選狀態拖拽排序 https://blog.csdn.net/qq_33650655/article/details/146545632

  96. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加行拖拽排序功能示例9，TableView16_09 嵌套表格拖拽排序 https://blog.csdn.net/qq_33650655/article/details/146545641

  97. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加行拖拽排序功能示例10，TableView16_10 虛擬滾動拖拽示例 https://blog.csdn.net/qq_33650655/article/details/146545647

  98. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加行拖拽排序功能示例11，TableView16_11 拖拽與行編輯結合示例 https://blog.csdn.net/qq_33650655/article/details/146545654

  99. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加行拖拽排序功能示例12，TableView16_12 拖拽動畫示例 https://blog.csdn.net/qq_33650655/article/details/146545665

  100. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加行拖拽排序功能示例13，TableView16_13 鍵盤輔助拖拽示例 https://blog.csdn.net/qq_33650655/article/details/146794579

  101. DeepSeek 助力 Vue3 開發：打造絲滑的表格（Table）之添加行拖拽排序功能示例14，TableView16_14 拖拽自動保存示例 https://blog.csdn.net/qq_33650655/article/details/146795055

到此這篇文章就介紹到這了,更多精彩內容請關注本人以前的文章或繼續瀏覽下面的文章，創作不易，如果能幫助到大家,希望大家多多支持寶碼香車~💕，若轉載本文，一定注明本文鏈接。

整理不易，點贊關注寶碼香車

更多專欄訂閱推薦：
👍 html+css+js 絢麗效果
💕 vue
?? Electron
?? js
📝 字符串
?? 時間對象（Date()）操作

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/76707.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/76707.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/76707.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

NSGA-II 多目標優化 —— 理論、案例與交互式 GUI 實現

NSGA-II 多目標優化 —— 理論、案例與交互式 GUI 實現

目錄 NSGA-II 多目標優化 —— 理論、案例與交互式 GUI 實現一、引言二、NSGA-II 基本原理2.1 非支配排序2.2 擁擠距離2.3 算法流程三、數學模型與算法推導3.1 多目標優化問題描述3.2 非支配關系與排序3.3 擁擠距離計算四、NSGA-II 的優缺點4.1 優點4.2 缺點五、典型案例分析5.…
閱讀更多...
庫學習04——numpy

庫學習04——numpy

一、基本屬性 二、 創建數組 &#xff08;一&#xff09;arange a np.arange(10,20,2) # [10,12,14,16,18] 只有一個參數n的話&#xff0c;默認是從0到n-1的一維數組。 &#xff08;二&#xff09;自定義reshape a np.arange(12).reshape((3,4)) [[ 0 1 2 3][ 4 5 …
閱讀更多...
NVIDIA Jetson 快速切換CUDA版本| 多CUDA版本

NVIDIA Jetson 快速切換CUDA版本| 多CUDA版本

當NVIDIA Jetson中安裝了多個CUDA時&#xff0c;可以通過命令&#xff0c;快速切換不同版本的。 這樣在環境變量和代碼編譯時&#xff0c;能使用指定版本的CUDA了。 本文適用于Jetson Nano、TX1/TX2、Xavier 和 Orin系列的設備&#xff0c;供大家參考。 cuda參考地址&#xf…
閱讀更多...
當開源邂逅AI，公益長出翅膀 | 回顧3.30 上海「開源×AI 賦能公益」Meetup

當開源邂逅AI，公益長出翅膀 | 回顧3.30 上海「開源×AI 賦能公益」Meetup

在春和景明的三月&#xff0c;一場打破常規的公益聚會在上海剪愛公益發展中心肇清項目點溫暖上演。這&#xff0c;便是G-Star公益行帶來的「開源AI 賦能公益」Meetup&#xff0c;一場技術與善意交織、創新與溫暖共生的奇妙之旅。 活動現場&#xff0c;沒有高冷的技術壁壘&#…
閱讀更多...
高階函數/柯里化/純函數

高階函數/柯里化/純函數

本篇文章主要是介紹一下標題里面的概念&#xff0c;在面試的時候經常文檔&#xff0c;結合閱讀到的資料&#xff0c;結合本人的個人見解出品了該文章&#xff0c;如有寫的不好的地方或理解有誤的&#xff0c;還望閣下多多指教。 1、高階函數 什么是高階函數&#xff1f; 接受…
閱讀更多...
Docker+Jenkins+Gitee自動化項目部署

Docker+Jenkins+Gitee自動化項目部署

前置條件 docker安裝成功 按照下面配置加速 sudo mkdir -p /etc/docker sudo tee /etc/docker/daemon.json <<-EOF {"registry-mirrors": ["https://register.librax.org"] } EOF sudo systemctl daemon-reload sudo systemctl restart docker一、…
閱讀更多...
穿梭在數字王國：Python進制轉換奇遇記

穿梭在數字王國：Python進制轉換奇遇記

穿梭在數字王國：Python進制轉換奇遇記 想象一下，你是一位勇敢的探險家，正在穿越神秘的"數字王國"。在這個王國里，不同的地區使用著不同的語言（或者說，進制）。二進制村的居民只懂"0"和"1"；八進制鎮的人們使用0到7的數字；而十六進制城的…
閱讀更多...
FileInputStream 詳解與記憶方法

FileInputStream 詳解與記憶方法

FileInputStream 詳解與記憶方法 一、FileInputStream 核心概念 FileInputStream 是 Java 中用于從文件讀取原始字節的類&#xff0c;繼承自 InputStream 抽象類。 1. 核心特點 特性說明繼承關系InputStream → FileInputStream數據單位字節&#xff08;8bit&#xff09;用…
閱讀更多...
設計模式 四、行為設計模式（2)

設計模式 四、行為設計模式（2)

五、狀態模式 1、概述 狀態設計模式是一種行為型設計模式&#xff0c;它允許對象在其內部狀態發生時改變其行為&#xff0c;這種模式可以消除大量的條件語句&#xff0c;并將每個狀態的行為封裝到單獨的類中。 狀態模式的主要組成部分如下&#xff1a; 1&#xff09;上…
閱讀更多...
大模型學習八：?Sealos 私有化部署之VMware 安裝ubuntu22.04 虛擬機安裝(實操)

大模型學習八：?Sealos 私有化部署之VMware 安裝ubuntu22.04 虛擬機安裝(實操)

一、說明 windows 11 ubuntu22.04.5 安裝5個虛擬機&#xff0c;3個master 2個node 二、安裝 Vmware 17&#xff08;沒成功&#xff0c;但你可以成功&#xff09; 我的電腦配置比較舊&#xff0c;直接提示處理器不支持xsave 無法打開虛擬機的電源&#xff0c;網上方法試過了…
閱讀更多...
Win32++ 使用初探

Win32++ 使用初探

文章目錄 1. 環境要求2. Win32安裝3. 項目創建3.1 項目創建&#xff08;1&#xff09;直接使用Win32里的示例Sample&#xff08;2&#xff09;自行創建項目 最近想用 VC寫些 UI&#xff0c;但又不太想用 MFC&#xff0c;正好對界面要求不太高&#xff0c;就使用了一下 Win3…
閱讀更多...
R 語言科研繪圖第 38 期 --- 餅狀圖-玫瑰

R 語言科研繪圖第 38 期 --- 餅狀圖-玫瑰

在發表科研論文的過程中&#xff0c;科研繪圖是必不可少的&#xff0c;一張好看的圖形會是文章很大的加分項。 為了便于使用&#xff0c;本系列文章介紹的所有繪圖都已收錄到了 sciRplot 項目中&#xff0c;獲取方式&#xff1a; R 語言科研繪圖模板 --- sciRplothttps://mp.…
閱讀更多...
Linux驅動開發進階（六）- 多線程與并發

Linux驅動開發進階（六）- 多線程與并發

文章目錄 1、前言2、進程與線程3、內核線程4、底半步機制4.1、軟中斷4.2、tasklet4.3、工作隊列4.3.1、普通工作項4.3.2、延時工作項4.3.3、工作隊列 5、中斷線程化6、進程6.1、內核進程6.2、用戶空間進程 7、鎖機制7.1、原子操作7.2、自旋鎖7.3、信號量7.4、互斥鎖7.5、comple…
閱讀更多...
第四節：React Hooks進階篇-useEffect依賴項為空數組[]與不寫的區別

第四節：React Hooks進階篇-useEffect依賴項為空數組[]與不寫的區別

陷阱題&#xff1a;閉包問題、Stale Closure舉例 一、依賴項為空數組[]與不寫的核心區別 行為空數組[]不寫依賴項執行時機僅在組件掛載時執行一次&#xff08;類似componentDidMount&#xff09;組件每次渲染后都執行&#xff08;類似componentDidUpdate&#xff09;更新觸發…
閱讀更多...
【第39節】windows編程：打造MFC版本任務管理器

【第39節】windows編程：打造MFC版本任務管理器

目錄 一、項目概述 二、項目開發的各種功能關鍵 2.1 進程信息的獲取 2.2 線程信息的獲取 2.3 進程模塊信息的獲取 2.3.1 模塊快照 2.3.2 枚舉模塊 2.4 進程堆信息的獲取 2.5 窗口信息的獲取 2.6 文件信息的獲取 2.7 內存信息和CPU占用率的獲取 2.7.1 內存信息相關結…
閱讀更多...
計算軸承|滾動軸承故障頻率

計算軸承|滾動軸承故障頻率

一、軸承故障頻率概述 在旋轉機械故障診斷中&#xff0c;軸承故障頻率&#xff08;BPFO、BPFI、BSF、FTF&#xff09;是重要的分析依據。通過計算這些特征頻率&#xff0c;可以幫助工程師&#xff1a; 識別軸承故障類型&#xff08;內圈/外圈/滾動體故障&#xff09;制定振動…
閱讀更多...
【數據結構與算法】ArrayList 和 順序表

【數據結構與算法】ArrayList 和 順序表

文章目錄 &#x1f332;List&#x1f332;1. 線性表&#x1f332;2. 順序表&#x1f33f;2.1 MyArrayList2.1.1 類中重寫所有接口方法1.新增元素2.在pos位置新增元素(指定位置)3.判定是否包含了某個特定元素 4.查找特定元素對應的位置 5.獲取pos下標的元素 6.給pos位置的元素替…
閱讀更多...
OceanBase 推出單機版 ，為中小規模業務提供高性價比方案

OceanBase 推出單機版 ，為中小規模業務提供高性價比方案

近日&#xff0c;OceanBase正式推出了全新的單機版數據庫。這款產品基于OceanBase自主研發的單機分布式一體化架構&#xff0c;具有精簡的架構設計和出色的兼容性&#xff0c;能夠為中小規模業務場景提供高性價比的數據庫解決方案&#xff0c;充分滿足客戶在不同業務規模下的多…
閱讀更多...
如何在 Vue 3 中實現百度地圖位置選擇器組件

如何在 Vue 3 中實現百度地圖位置選擇器組件

如何在 Vue 3 中實現百度地圖位置選擇器組件 前言 在開發前端應用時&#xff0c;地圖選擇器是一個非常常見的需求。尤其是在一些需要用戶選擇地址的場景&#xff0c;如電商平臺、旅游網站、酒店預定等&#xff0c;百度地圖組件能提供準確的地理位置服務。在本文中&#xff0c…
閱讀更多...
Python中如何用正則表達式精準匹配IP地址？

Python中如何用正則表達式精準匹配IP地址？

在網絡編程和數據處理時&#xff0c;我們經常需要從文本中提取或驗證IP地址。Python的正則表達式(re模塊)是完成這個任務的利器。但你知道怎么寫才能準確匹配各種合法的IP地址嗎&#xff1f;今天我們就來詳細探討這個問題。 為什么需要IP正則表達式&#xff1f; 假設你正在分…
閱讀更多...
最新文章

Copyright @ 2022~2023