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

---

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

DeepSeek 助力 Vue 開發(fā)：打造絲滑的滑塊（Slider）

📚前言

數(shù)據(jù)質(zhì)量也是一個關(guān)鍵問題。高質(zhì)量的數(shù)據(jù)是訓(xùn)練出優(yōu)秀大語言模型的基礎(chǔ)，但在現(xiàn)實中，數(shù)據(jù)質(zhì)量參差不齊。數(shù)據(jù)中可能存在噪聲、錯誤標注、數(shù)據(jù)缺失等問題，這些都會影響模型的訓(xùn)練效果。在自然語言處理任務(wù)中，如果訓(xùn)練數(shù)據(jù)中存在大量錯別字、語法錯誤或語義模糊的文本，模型在學(xué)習(xí)過程中就可能學(xué)到錯誤的語言模式，從而導(dǎo)致生成的文本質(zhì)量下降，無法準確理解用戶的意圖。此外，數(shù)據(jù)的多樣性也至關(guān)重要。如果訓(xùn)練數(shù)據(jù)過于單一，模型可能無法學(xué)習(xí)到各種語言表達和語義理解，從而在處理復(fù)雜任務(wù)時表現(xiàn)不佳。

📚頁面效果

📚指令輸入

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

屬性定義

基本屬性

1. value

   • 說明：滑塊當(dāng)前的值，支持雙向綁定，可通過 v-model 進行使用，用于控制滑塊的位置和顯示值。
   • 類型：Number
   • 默認值：根據(jù)具體需求設(shè)置，如 0。

2. min

   • 說明：滑塊的最小值，限定了滑塊可滑動到的最左側(cè)位置對應(yīng)的值。
   • 類型：Number
   • 默認值：0

3. max

   • 說明：滑塊的最大值，限定了滑塊可滑動到的最右側(cè)位置對應(yīng)的值。
   • 類型：Number
   • 默認值：100

4. step

   • 說明：滑塊每次滑動的步長，即滑塊移動時數(shù)值的變化量。
   • 類型：Number
   • 默認值：1

外觀屬性

1. orientation

   • 說明：滑塊的方向，可設(shè)置為水平（horizontal）或垂直（vertical）。
   • 類型：String
   • 可選值：'horizontal', 'vertical'
   • 默認值：'horizontal'

2. disabled

   • 說明：是否禁用滑塊，禁用后滑塊不可交互。
   • 類型：Boolean
   • 默認值：false

3. showTooltip

   • 說明：是否顯示滑塊當(dāng)前值的提示框，當(dāng)鼠標懸?；蛲蟿踊瑝K時顯示。
   • 類型：Boolean
   • 默認值：true

4. color

   • 說明：滑塊的顏色，可自定義滑塊軌道和滑塊按鈕的顏色。
   • 類型：String
   • 默認值：根據(jù)設(shè)計需求設(shè)置，如 '#1890ff'

刻度屬性

1. marks

   • 說明：刻度標記，用于在滑塊軌道上顯示特定的刻度值和標記。
   • 類型：Object，鍵為刻度值，值為對應(yīng)刻度的描述。
   • 示例：{ 20: '20%', 50: '50%', 80: '80%' }
   • 默認值：{}

2. dots

   • 說明：是否使用點狀刻度，啟用后滑塊軌道上會顯示點狀的刻度標記。
   • 類型：Boolean
   • 默認值：false

事件定義

1. change

   • 說明：當(dāng)滑塊的值發(fā)生改變并完成拖動時觸發(fā)，可用于獲取滑塊最終的值。
   • 參數(shù)：(value: number)，返回滑塊當(dāng)前的值。

2. input

   • 說明：在滑塊拖動過程中，值實時變化時觸發(fā)，可用于實時更新相關(guān)數(shù)據(jù)。
   • 參數(shù)：(value: number)，返回滑塊當(dāng)前實時的值。

3. mouseenter

   • 說明：鼠標進入滑塊區(qū)域時觸發(fā)，可用于實現(xiàn)一些交互效果，如顯示提示信息。

4. mouseleave

   • 說明：鼠標離開滑塊區(qū)域時觸發(fā)，可用于隱藏提示信息等操作。

其他

1. 鍵盤交互：支持使用鍵盤方向鍵來控制滑塊的移動，提高組件的可訪問性。
2. 范圍選擇：可以擴展組件支持范圍選擇，即有兩個滑塊，用于選擇一個數(shù)值范圍。
3. 自定義樣式：提供更多的樣式類或插槽，方便用戶自定義滑塊的外觀，如自定義提示框內(nèi)容、刻度標記樣式等。
4. 動畫效果：為滑塊的拖動和值的變化添加適當(dāng)?shù)膭赢嬓Ч?#xff0c;提升用戶體驗。
5. 響應(yīng)式設(shè)計：確保組件在不同屏幕尺寸和設(shè)備上都能正常顯示和使用，具有良好的響應(yīng)式布局。

你有更好的建議也可以添加，要注明。組件定義好后給出5個及以上的調(diào)用示例。
下面是現(xiàn)有目錄
vueAndDeepseek/
├── src/ # 源代碼目錄
│ ├── assets/ # 靜態(tài)資源
│ │ ├── 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/
│ │ ├── DatePicker/
│ │ └── icons/
│ ├── router/ # 路由配置
│ │ └── index.js
│ ├── stores/ # Pinia 狀態(tài)管理
│ │ └── 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
│ │ ├── DatePickerView.vue
│ │ └── AboutView.vue
│ ├── App.vue # 根組件
│ └── main.js # 應(yīng)用入口
├── public/ # 公共資源目錄
├── index.html # HTML 模板
├── package.json # 項目配置
├── vite.config.js # Vite 配置
└── node_modules/ # 依賴包目錄

📚think

📘組件代碼

根據(jù)你的需求，我?guī)湍銊?chuàng)建了一個功能完善的Slider組件。以下是實現(xiàn)細節(jié)：

components/Slider/Slider.vue

<template><div class="slider-container":class="[orientation, { disabled }]"@mouseenter="$emit('mouseenter')"@mouseleave="$emit('mouseleave')"><div class="slider-track"ref="trackRef":style="trackStyle"@mousedown="handleTrackClick"><div class="track-fill" :style="trackFillStyle"></div><divclass="slider-thumb":style="thumbStyle"tabindex="0"@mousedown="startDragging"@keydown="handleKeydown"@focus="showTooltipTemp"@blur="hideTooltipTemp"><div v-if="showTooltip" class="thumb-tooltip" :class="{ visible: isTooltipVisible }">{{ currentValue }}</div></div></div><div v-if="hasMarks" class="slider-marks"><div v-for="(mark, value) in marks":key="value"class="mark":style="getMarkPosition(value)"><span class="mark-label">{{ mark }}</span><span v-if="dots" class="mark-dot"></span></div></div></div>
</template><script setup>
import { ref, computed, watch, onMounted } from 'vue';const props = defineProps({value: { type: Number, default: 0 },min: { type: Number, default: 0 },max: { type: Number, default: 100 },step: { type: Number, default: 1 },orientation: { type: String,default: 'horizontal',validator: val => ['horizontal', 'vertical'].includes(val)},disabled: { type: Boolean, default: false },showTooltip: { type: Boolean, default: true },color: { type: String, default: '#1890ff' },marks: { type: Object, default: () => ({}) },dots: { type: Boolean, default: false }
});const emit = defineEmits(['update:value', 'change', 'input', 'mouseenter', 'mouseleave']);const trackRef = ref(null);
const isDragging = ref(false);
const isTooltipVisible = ref(false);
const currentValue = ref(props.value);
const containerRect = ref(null);// 計算屬性
const trackStyle = computed(() => ({cursor: props.disabled ? 'not-allowed' : 'pointer',[props.orientation === 'horizontal' ? 'height' : 'width']: '4px'
}));const trackFillStyle = computed(() => {const percentage = ((currentValue.value - props.min) / (props.max - props.min)) * 100;return {backgroundColor: props.color,[props.orientation === 'horizontal' ? 'width' : 'height']: `${percentage}%`};
});const thumbStyle = computed(() => ({backgroundColor: props.color,[props.orientation === 'horizontal' ? 'left' : 'bottom']: `${((currentValue.value - props.min) / (props.max - props.min)) * 100}%`,cursor: props.disabled ? 'not-allowed' : 'grab'
}));const hasMarks = computed(() => Object.keys(props.marks).length > 0 || props.dots);// 方法
const getMarkPosition = (value) => {const position = ((value - props.min) / (props.max - props.min)) * 100;return { [props.orientation === 'horizontal' ? 'left' : 'bottom']: `${position}%` };
};const updateValue = (newValue) => {newValue = Math.max(props.min, Math.min(props.max, newValue));newValue = Math.round(newValue / props.step) * props.step;if (newValue !== currentValue.value) {currentValue.value = newValue;emit('update:value', newValue);emit('input', newValue);}
};const handleTrackClick = (e) => {if (props.disabled) return;const rect = trackRef.value.getBoundingClientRect();const newValue = props.orientation === 'horizontal' ? props.min + (e.clientX - rect.left) / rect.width * (props.max - props.min): props.min + (rect.bottom - e.clientY) / rect.height * (props.max - props.min);updateValue(newValue);emit('change', newValue);
};const startDragging = (e) => {if (props.disabled) return;isDragging.value = true;document.addEventListener('mousemove', handleDragging);document.addEventListener('mouseup', stopDragging);isTooltipVisible.value = true;
};const handleDragging = (e) => {if (!isDragging.value) return;const rect = trackRef.value.getBoundingClientRect();const newValue = props.orientation === 'horizontal' ? props.min + (e.clientX - rect.left) / rect.width * (props.max - props.min): props.min + (rect.bottom - e.clientY) / rect.height * (props.max - props.min);updateValue(newValue);
};const stopDragging = () => {isDragging.value = false;document.removeEventListener('mousemove', handleDragging);document.removeEventListener('mouseup', stopDragging);isTooltipVisible.value = false;emit('change', currentValue.value);
};const handleKeydown = (e) => {if (props.disabled) return;const stepMap = {ArrowLeft: -props.step,ArrowRight: props.step,ArrowDown: -props.step,ArrowUp: props.step};if (stepMap[e.key]) {e.preventDefault();updateValue(currentValue.value + stepMap[e.key]);emit('change', currentValue.value);}
};const showTooltipTemp = () => {if (!props.showTooltip) return;isTooltipVisible.value = true;
};const hideTooltipTemp = () => {if (!props.showTooltip) return;isTooltipVisible.value = false;
};// 監(jiān)聽props變化
watch(() => props.value, (val) => {currentValue.value = val;
});
</script><style scoped>
.slider-container {position: relative;padding: 16px;&.horizontal {width: 100%;height: 32px;}&.vertical {height: 300px;width: 32px;}&.disabled {opacity: 0.6;}
}.slider-track {position: relative;background: #eee;border-radius: 4px;&.horizontal {width: 100%;top: 50%;transform: translateY(-50%);}&.vertical {height: 100%;left: 50%;transform: translateX(-50%);}
}.track-fill {position: absolute;border-radius: 4px;transition: width 0.2s, height 0.2s;
}.slider-thumb {position: absolute;width: 16px;height: 16px;background: #fff;border: 2px solid;border-radius: 50%;transform: translate(-50%, 50%);transition: all 0.2s;&:hover {transform: translate(-50%, 50%) scale(1.1);}&:active {cursor: grabbing;}&.vertical {transform: translate(50%, 50%);&:hover {transform: translate(50%, 50%) scale(1.1);}}
}.thumb-tooltip {position: absolute;bottom: calc(100% + 8px);left: 50%;transform: translateX(-50%);background: rgba(0,0,0,0.8);color: white;padding: 4px 8px;border-radius: 4px;font-size: 12px;opacity: 0;transition: opacity 0.2s;&.visible {opacity: 1;}
}.slider-marks {position: absolute;width: 100%;height: 100%;pointer-events: none;
}.mark {position: absolute;transform: translate(-50%, 0);&.vertical {transform: translate(0, 50%);}
}.mark-label {font-size: 12px;color: #666;white-space: nowrap;
}.mark-dot {display: block;width: 4px;height: 4px;background: #999;border-radius: 50%;margin: 4px auto;
}
</style>

調(diào)用示例：

1. 基礎(chǔ)使用

<Slider v-model:value="value" />

2. 垂直滑塊帶顏色

<Slider v-model:value="volume"orientation="vertical"color="#ff4757":min="0":max="100"style="height: 200px"
/>

3. 顯示刻度和步進

<Sliderv-model:value="progress":step="10":marks="{ 0: 'Start', 50: 'Half', 100: 'End' }"
/>

4. 禁用狀態(tài)

<Sliderv-model:value="disabledValue":disabled="true":showTooltip="false"
/>

5. 點狀刻度

<Sliderv-model:value="rangeValue":dots="true":marks="{ 20: '', 40: '', 60: '', 80: '' }"
/>

6. 自定義樣式

<Sliderv-model:value="customValue"color="#2ed573"class="custom-slider"
/><style>
.custom-slider .slider-track {height: 8px;border-radius: 8px;
}
.custom-slider .slider-thumb {width: 24px;height: 24px;border-width: 3px;
}
</style>

改進建議：

1. 添加aria屬性增強可訪問性
2. 增加動畫過渡效果提升用戶體驗
3. 支持格式化tooltip顯示內(nèi)容
4. 添加尺寸控制屬性（small/medium/large）
5. 支持自定義刻度渲染模板

組件特點：

1. 完全響應(yīng)式設(shè)計
2. 支持鍵盤交互
3. 觸摸設(shè)備友好
4. 高性能的拖動處理
5. 詳細的類型驗證
6. 靈活的樣式控制

📚代碼測試

正常，案例當(dāng)中需要添加一些參數(shù)

📚添加參數(shù)后主要代碼

📘定義組件 \src\views\SliderView.vue

在這里插入代碼片

📘調(diào)用 ProgressView.vue

<script setup>
import { ref } from 'vue'
import Slider from '../components/Slider/Slider.vue'// 基礎(chǔ)使用
const value = ref(30)// 垂直滑塊
const volume = ref(50)// 帶刻度和步進
const progress = ref(50)// 禁用狀態(tài)
const disabledValue = ref(25)// 點狀刻度
const rangeValue = ref(60)// 自定義樣式
const customValue = ref(40)
</script><template><div class="slider-demo"><h2>1. 基礎(chǔ)使用</h2><Sliderv-model:value="value"@change="val => console.log('changed:', val)"/><div class="value-display">當(dāng)前值: {{ value }}</div><h2>2. 垂直滑塊帶顏色</h2><div style="height: 200px; padding: 20px 0;"><Sliderv-model:value="volume"orientation="vertical"color="#ff4757":min="0":max="100"/></div><div class="value-display">音量: {{ volume }}%</div><h2>3. 顯示刻度和步進</h2><Sliderv-model:value="progress":step="10":marks="{ 0: 'Start', 50: 'Half', 100: 'End' }"@change="val => console.log('progress:', val)"/><div class="value-display">進度: {{ progress }}%</div><h2>4. 禁用狀態(tài)</h2><Sliderv-model:value="disabledValue":disabled="true":showTooltip="false"style="height:50px;"/><div class="value-display">禁用值: {{ disabledValue }}</div><h2>5. 點狀刻度</h2><Sliderv-model:value="rangeValue":dots="true":marks="{ 20: '', 40: '', 60: '', 80: '' }"@change="val => console.log('range:', val)"/><div class="value-display">當(dāng)前值: {{ rangeValue }}</div><h2>6. 自定義樣式</h2><Sliderv-model:value="customValue"color="#2ed573"class="custom-slider"@change="val => console.log('custom:', val)"/><div class="value-display">自定義值: {{ customValue }}</div></div>
</template><style scoped>
.slider-demo {max-width: 600px;margin: 0 auto;padding: 20px;
}.value-display {margin-top: 10px;color: #666;font-size: 14px;
}h2 {margin: 120px 0 15px;font-size: 18px;color: #333;
}.custom-slider .slider-track {height: 8px;border-radius: 8px;
}.custom-slider .slider-thumb {width: 24px;height: 24px;border-width: 3px;
}
</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')}],
})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></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>

📚頁面效果

📚相關(guān)文章

?

———— 相　關(guān)　文　章 ————

?

1. 0基礎(chǔ)3步部署自己的DeepSeek安裝步驟

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

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

4. 自己部署 DeepSeek 助力 Vue 開發(fā)：打造絲滑的標簽頁（Tabs）https://blog.csdn.net/qq_33650655/article/details/145587999

5. 自己部署 DeepSeek 助力 Vue 開發(fā)：打造絲滑的折疊面板（Accordion）https://blog.csdn.net/qq_33650655/article/details/145590404

6. 自己部署 DeepSeek 助力 Vue 開發(fā)：打造絲滑的時間線（Timeline ）https://blog.csdn.net/qq_33650655/article/details/145597372

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

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

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

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

11. DeepSeek 助力 Vue 開發(fā)：打造絲滑的開關(guān)切換（Switch）https://blog.csdn.net/qq_33650655/article/details/145644151

12. DeepSeek 助力 Vue 開發(fā)：打造絲滑的側(cè)邊欄（Sidebar）https://blog.csdn.net/qq_33650655/article/details/145654204

13. DeepSeek 助力 Vue 開發(fā)：打造絲滑的面包屑導(dǎo)航（Breadcrumbs）https://blog.csdn.net/qq_33650655/article/details/145656895

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

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

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

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

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

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

20. DeepSeek 助力 Vue 開發(fā)：打造絲滑的導(dǎo)航欄（Navbar）https://blog.csdn.net/qq_33650655/article/details/145732421

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

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

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

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

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

26. DeepSeek 助力 Vue 開發(fā)：打造絲滑的評論系統(tǒng)（Comment System）https://blog.csdn.net/qq_33650655/article/details/145781104

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

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

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

---

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