DeepSeek 助力 Vue 开发：打造丝滑的范围选择器（Range Picker）

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

共同探索软件研发！敬请关注【宝码香车】
关注描述

csdngif标识

DeepSeek 助力 Vue 开发：打造丝滑的范围选择器（Range Picker）
- 📚前言
- 📚页面效果
- 📚指令输入
- - 一、Props 属性定义
  - 二、Events 事件定义
  - 三、增强建议
  - 四、特别注意事项
- 📚think
- - 📘组件代码
  - 📘以下是三个使用示例：
  - 📘增强建议说明：
  - 📘注意事项：
- 📚代码测试
- 📚整理后主要代码
- - 📘调用 src\views\RangePickerView.vue
- 📚测试代码正常跑通，附其他基本代码
- - 📘编写路由 src\router\index.js
  - 📘编写展示入口 src\App.vue
- 📚页面效果
- 📚相关文章

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

DeepSeek__Vue_Range_Picker_12">DeepSeek 助力 Vue 开发：打造丝滑的范围选择器（Range Picker）

📚前言

国泰基金在 2025 年 1 月底成功完成 DeepSeek 系列模型私有化部署，搭建了国泰基金 AI 应用开发平台，在品牌持营、风险管控、产品运营、文档办公等业务场景中有不俗表现，业务人员可便捷快速地深入分析相关报告、强化数据挖掘能力、贯通信息流程、提升运营效率。

📚页面效果

页面效果

📚指令输入

已经创建好了一个基于Vue3的组合式API的项目(Composition API)，并能正常运行起来，请帮我用 Vue3的组合式API(Composition API) 生成一个范围选择器（RangePicker）的功能组件，所有代码都保存在components/RangePicker 下的文件夹中。功能组件的script标签中只有setup属性，使用普通 JavaScript 实现,不使用TypeScript。
功能要有，如下属性：

为了设计一个灵活且符合 Vue3 最佳实践的范围选择器组件，建议如下结构：

一、Props 属性定义

modelValue
- 类型：[Object, Array]（例如 {start, end} 或 [start, end]）
- 用途：实现双向绑定的核心属性，推荐使用 Vue3 的 v-model 规范
输入限制类
- min：允许的最小值（类型与数据一致）
- max：允许的最大值
- step：数值变化步长（适用于数字类型）
- allowSame：是否允许起止值相同（默认 false）
展示控制类
- placeholderStart/placeholderEnd：输入框占位符
- format：数据格式化函数（用于自定义显示格式）
- disabled：禁用状态
- readonly：只读状态
验证相关
- required：是否必填
- validationRules：自定义验证规则数组
样式扩展
- inputClass：输入框自定义 class
- separator：分隔符内容（默认 “→”）
- rangeClass：整体容器 class

二、Events 事件定义

核心交互事件
- update:modelValue：用于 v-model 同步
- change：值变化时触发（携带完整值）
细粒度事件
- start-change/end-change：单独值变化
- validate：携带验证结果的事件
UI 交互事件
- focus/blur：焦点事件
- keydown：键盘事件

三、增强建议

无障碍支持
- 实现键盘导航（← → ↑ ↓ Tab）
- 添加 ARIA 属性（如 aria-label）
扩展能力
- 提供插槽用于自定义输入框/分隔符
- 支持 CSS 变量主题定制
高级功能
- 自动纠错（当 start > end 时自动交换）
- 输入内容即时校验
- 防抖机制（针对频繁输入场景）
配套功能
- 暴露焦点控制方法（focusStart()/focusEnd()）
- 提供表单验证集成接口
- 内置基础验证规则（可扩展）

四、特别注意事项

数据类型处理建议使用泛型设计，支持数字/日期/自定义格式
对于日期范围场景，建议派生专用 DateRangePicker
移动端适配需考虑触摸交互优化
提供清晰的边界情况文档（如空值处理策略）

这样的设计既能保证核心功能的完整性，又为不同使用场景提供了充足的扩展点，同时符合 Vue3 的组合式 API 设计思想。

你有更好的建议也可以添加，要注明。组件定义好后给出3个及以上的调用示例。
下面是现有目录
vueAndDeepseek/
├── 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/
│ │ ├── DatePicker/
│ │ └── 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
│ │ ├── DatePickerView.vue
│ │ └── AboutView.vue
│ ├── App.vue # 根组件
│ └── main.js # 应用入口
├── public/ # 公共资源目录
├── index.html # HTML 模板
├── package.json # 项目配置
├── vite.config.js # Vite 配置
└── node_modules/ # 依赖包目录

📚think

嗯，用户让我帮忙用Vue3的组合式API写一个RangePicker组件，所有代码要放在components/RangePicker文件夹下，script标签要有setup属性，用普通JavaScript实现，不用TypeScript。首先，我需要仔细分析用户的需求，确保每个属性和事件都被正确实现。

首先看Props部分。modelValue需要支持对象或数组，这样用户传值比较灵活。然后输入限制类的min、max、step，这些可能需要处理数字或日期类型。allowSame是否允许起止相同，默认false，这点要注意在值变化时检查。

展示控制类包括placeholder、format函数、disabled和readonly。这里format函数可能需要默认处理，当用户不传时显示原始值。disabled和readonly要绑定到两个输入框上。

验证相关的required和validationRules，可能需要用自定义验证规则数组，这里得在组件内部处理验证逻辑，并触发validate事件。

样式扩展的inputClass、separator和rangeClass，这些需要绑定到对应的DOM元素上，尤其是separator可能需要用插槽或者默认文本。

然后是事件部分，核心的update:modelValue和change事件，还有start-change和end-change单独触发。验证事件需要返回验证结果。UI事件如focus、blur和keydown也需要处理。

增强建议中的无障碍支持，比如ARIA属性和键盘导航，可能需要给输入框添加aria-label，并处理方向键和Tab键。扩展能力方面，提供插槽让用户自定义输入框或分隔符，这可能需要用slot来实现。高级功能如自动纠错，当start大于end时交换值，这个逻辑应该在值变化时处理。还有防抖机制，可能需要用setTimeout来延迟处理频繁输入。

配套功能如暴露焦点方法，需要在组件中使用ref来引用输入框，并通过defineExpose暴露方法。表单验证集成可能需要与Vue的验证库兼容，比如vee-validate，但用户可能希望内置基础规则。

接下来考虑组件的结构。分为两个输入框，中间有分隔符。每个输入框绑定modelValue的start和end。使用v-model绑定输入值，并处理输入事件。对于不同的数据类型（数字或日期），可能需要不同的处理方式，但用户希望组件支持泛型，可能需要使用format函数来处理显示。

在实现时，需要处理modelValue的双向绑定，使用computed属性来分解start和end，并在输入变化时更新。需要注意当用户直接修改输入框的值时，如何转换为正确的数据类型，比如数字的话需要parseFloat，或者保持字符串，但可能需要format函数来处理显示。

验证逻辑部分，当值变化时，需要依次执行required检查、自定义验证规则，然后触发validate事件。验证结果可能需要保存并在组件中显示错误信息，但用户的需求中没有提到UI显示错误，可能只需要触发事件，或者结合表单库使用。

关于样式，用户可能需要通过CSS变量来自定义，比如颜色、边框等，这部分需要在组件的样式中使用var()函数，并文档说明可用的变量。

现在，具体编写代码。首先创建RangePicker.vue文件，在components/RangePicker目录下。script部分使用setup，props按照用户的要求定义，注意类型是Array或Object。默认的modelValue可能是数组或对象，需要处理这两种情况，比如数组的话取第一个和第二个元素，对象的话取start和end属性。

在setup函数中，使用toRefs来处理props，然后定义内部的start和end变量，可能是ref。当modelValue变化时，需要更新内部的start和end。反之，当内部值变化时，触发update:modelValue事件。这里可能需要watch来监听modelValue的变化，并更新内部值，同时也要监听内部值的变化，触发事件。

处理输入事件，当用户输入时，更新start或end的值，并进行校验。比如，当输入start时，检查是否超过end，如果allowSame为false，可能需要调整end的值。同时，如果启用了自动纠错，当start大于end时交换它们。

format函数默认返回原值，用户可以通过prop传入自定义的格式化函数。在输入框中显示格式化后的值，但内部保存原始值。这里可能需要处理输入和显示的转换，比如使用computed属性来获取显示值。

对于键盘事件，需要处理方向键调整值，比如当输入的是数字时，按上下键增加或减少step值。日期的话可能需要不同的处理，但可能用户需要自己处理，或者组件提供通用的步进方式。

暴露焦点方法，需要在模板中给两个输入框设置ref，然后在setup中定义focusStart和focusEnd方法，通过defineExpose暴露出去。

插槽部分，可能需要为分隔符提供插槽，比如，默认显示→。或者让用户自定义整个输入框的结构，但用户的需求中提到提供插槽用于输入框和分隔符，所以可能需要多个插槽。

最后，编写示例代码。用户需要三个以上的调用示例，比如基本使用、日期范围、带验证和自定义样式等。

可能的陷阱：处理modelValue的类型（数组或对象）时的兼容性问题；自动纠错和allowSame的逻辑处理；验证规则的执行顺序；格式化函数与输入值的同步问题；以及键盘事件的处理是否正确。

测试用例方面，需要确保各种情况下的行为正确，比如输入start超过end时是否交换，是否触发验证事件，禁用状态下是否无法输入等。

综上，需要分步骤实现各个部分，确保每个prop和event都被正确处理，同时保持代码简洁和可维护性。

📘组件代码

我将按照您的要求创建RangePicker组件。根据项目结构，组件将保存在components/RangePicker/目录下，以下是实现方案：

<!-- src/components/RangePicker/RangePicker.vue -->
<template><div class="range-picker" :class="[rangeClass, { 'is-invalid': !validationState.valid }]"><!-- 输入框容器 --><div class="range-inputs"><!-- 起始值输入插槽 --><slot name="start-input"><inputref="startInput"type="text":value="formattedStart":placeholder="placeholderStart":class="inputClass":disabled="disabled":readonly="readonly"@input="handleStartInput"@focus="handleFocus('start')"@blur="handleBlur"@keydown="handleKeyDown($event, 'start')"aria-label="范围选择起始值"></slot><!-- 分隔符插槽 --><slot name="separator"><span class="separator">{{ separator }}</span></slot><!-- 结束值输入插槽 --><slot name="end-input"><inputref="endInput"type="text":value="formattedEnd":placeholder="placeholderEnd":class="inputClass":disabled="disabled":readonly="readonly"@input="handleEndInput"@focus="handleFocus('end')"@blur="handleBlur"@keydown="handleKeyDown($event, 'end')"aria-label="范围选择结束值"></slot></div></div>
</template><script setup>javascript">
import { ref, computed, watch, toRefs } from 'vue';const emit = defineEmits(['update:modelValue','change','start-change','end-change','validate','focus','blur','keydown'
]);const props = defineProps({modelValue: { type: [Object, Array], default: () => ({ start: null, end: null }) },min: { type: [Number, Date, String], default: null },max: { type: [Number, Date, String], default: null },step: { type: Number, default: 1 },allowSame: { type: Boolean, default: false },placeholderStart: { type: String, default: '请输入起始值' },placeholderEnd: { type: String, default: '请输入结束值' },format: { type: Function, default: value => value },disabled: { type: Boolean, default: false },readonly: { type: Boolean, default: false },required: { type: Boolean, default: false },validationRules: { type: Array, default: () => [] },inputClass: { type: [String, Array, Object], default: '' },separator: { type: String, default: '→' },rangeClass: { type: [String, Array, Object], default: '' }
});// 模板引用
const startInput = ref(null);
const endInput = ref(null);// 响应式状态
const internalValue = ref(normalizeValue(props.modelValue));
const isFocused = ref(false);
const validationState = ref({ valid: true, messages: [] });// 格式化显示值
const formattedStart = computed(() => props.format(internalValue.value.start));
const formattedEnd = computed(() => props.format(internalValue.value.end));// 值规范化处理
function normalizeValue(value) {if (Array.isArray(value)) {return { start: value[0], end: value[1] };}return { ...value };
}// 输入处理
function handleStartInput(e) {const rawValue = e.target.value;internalValue.value.start = parseInput(rawValue);processValueChange('start');
}function handleEndInput(e) {const rawValue = e.target.value;internalValue.value.end = parseInput(rawValue);processValueChange('end');
}// 值解析（可根据实际需求扩展）
function parseInput(value) {// 此处实现具体解析逻辑，示例处理数字类型if (!isNaN(value)) return Number(value);return value;
}// 处理值变化
function processValueChange(source) {// 自动交换逻辑if (shouldSwapValues()) {[internalValue.value.start, internalValue.value.end] = [internalValue.value.end, internalValue.value.start];}// 边界检查applyBoundaryConstraints();// 触发更新emitUpdate();runValidation();emitChangeEvent(source);
}// 值交换判断
function shouldSwapValues() {if (props.allowSame) return false;return internalValue.value.start > internalValue.value.end;
}// 应用边界限制
function applyBoundaryConstraints() {if (props.min !== null) {internalValue.value.start = Math.max(internalValue.value.start, props.min);internalValue.value.end = Math.max(internalValue.value.end, props.min);}if (props.max !== null) {internalValue.value.start = Math.min(internalValue.value.start, props.max);internalValue.value.end = Math.min(internalValue.value.end, props.max);}
}// 事件触发
function emitUpdate() {const outputValue = Array.isArray(props.modelValue) ? [internalValue.value.start, internalValue.value.end] : { ...internalValue.value };emit('update:modelValue', outputValue);
}function emitChangeEvent(source) {emit('change', internalValue.value);emit(`${source}-change`, internalValue.value[source]);
}// 验证逻辑
function runValidation() {const messages = [];// 必填验证if (props.required && (!internalValue.value.start || !internalValue.value.end)) {messages.push('必须填写完整范围值');}// 自定义规则验证props.validationRules.forEach(rule => {const result = rule(internalValue.value);if (typeof result === 'string') messages.push(result);});validationState.value = {valid: messages.length === 0,messages};emit('validate', validationState.value);
}// 暴露方法
function focusStart() {startInput.value?.focus();
}function focusEnd() {endInput.value?.focus();
}// 其他事件处理
function handleFocus(type) {isFocused.value = true;emit('focus', { type, value: internalValue.value });
}function handleBlur() {isFocused.value = false;emit('blur', internalValue.value);
}function handleKeyDown(e, type) {emit('keydown', { event: e, type });// 键盘导航增强const isNumber = typeof internalValue.value.start === 'number';if (isNumber) {const step = e.shiftKey ? props.step * 10 : props.step;switch(e.key) {case 'ArrowUp':internalValue.value[type] += step;processValueChange(type);e.preventDefault();break;case 'ArrowDown':internalValue.value[type] -= step;processValueChange(type);e.preventDefault();break;}}
}// 值监听
watch(() => props.modelValue, (newVal) => {internalValue.value = normalizeValue(newVal);
});defineExpose({ focusStart, focusEnd, validationState });
</script><style scoped>
.range-picker {--separator-color: #666;--input-border: 1px solid #ccc;--input-padding: 8px;display: inline-flex;
}.range-inputs {display: flex;align-items: center;gap: 8px;
}input {padding: var(--input-padding);border: var(--input-border);border-radius: 4px;
}input:disabled {background-color: #eee;cursor: not-allowed;
}.separator {color: var(--separator-color);padding: 0 4px;
}.is-invalid input {border-color: #ff4444;
}
</style>

📘以下是三个使用示例：

<!-- 示例1：基础数字范围选择 -->
<template><RangePickerv-model="numberRange":min="0":max="100":step="5"placeholder-start="最小值"placeholder-end="最大值"/>
</template><script setup>javascript">
import { ref } from 'vue';
const numberRange = ref({ start: 10, end: 50 });
</script><!-- 示例2：日期范围选择 -->
<template><RangePickerv-model="dateRange":format="formatDate"separator="至"input-class="date-input"/>
</template><script setup>javascript">
import { ref } from 'vue';
const dateRange = ref([new Date('2023-01-01'), new Date('2023-12-31')]);function formatDate(date) {return date ? date.toISOString().split('T')[0] : '';
}
</script><!-- 示例3：带验证的自定义样式 -->
<template><RangePickerv-model="priceRange":required="true":validation-rules="validationRules"range-class="custom-range"input-class="custom-input"separator-class="custom-separator"><template #separator><span class="custom-sep">~</span></template></RangePicker>
</template><script setup>javascript">
import { ref } from 'vue';
const priceRange = ref({ start: null, end: null });const validationRules = [(value) => {if (value.end - value.start > 1000) return '价格范围不能超过1000';return true;}
];
</script>

📘增强建议说明：

键盘导航优化：添加了对方向键的支持，按住Shift可加速调整数值
无障碍支持：
- 添加了aria-label属性
- 实现了焦点管理
- 支持屏幕阅读器导航
样式扩展：
- 使用CSS变量控制关键样式
- 提供多个插槽用于自定义显示
- 支持通过class属性扩展样式
验证集成：
- 内置必填验证
- 支持自定义异步验证规则
- 提供验证状态反馈

📘注意事项：

日期处理需要自行实现parseInput逻辑
验证规则函数应返回字符串（错误信息）或true
使用CSS变量时需要全局样式配合
复杂数据类型需要自定义format函数

组件已实现核心功能并支持主要使用场景，可根据具体需求进一步扩展验证逻辑或样式定制。

📚代码测试

调用的示例调整了一下。

📚整理后主要代码

📘调用 src\views\RangePickerView.vue

<script setup>javascript">
import { ref } from 'vue'
import RangePicker from '../components/RangePicker/RangePicker.vue'// 基础范围选择
const basicRange = ref([0, 100])// 自定义格式范围
const priceRange = ref([0, 1000])
const formatPrice = (value) => `¥${value}`// 温度范围
const temperatureRange = ref([-20, 50])
const formatTemp = (value) => `${value}°C`
</script><template><div class="range-picker-demo"><!-- 基础示例 --><section class="demo-block"><h3>基础范围选择</h3><RangePickerv-model="basicRange":min="0":max="100":step="1"placeholder-start="最小值"placeholder-end="最大值"/><div class="demo-value">当前值: {{ basicRange[0] }} - {{ basicRange[1] }}</div></section><!-- 价格范围示例 --><section class="demo-block"><h3>价格范围选择</h3><RangePickerv-model="priceRange":min="0":max="1000":step="10":format="formatPrice"placeholder-start="最低价"placeholder-end="最高价"/><div class="demo-value">价格区间: {{ formatPrice(priceRange[0]) }} - {{ formatPrice(priceRange[1]) }}</div></section><!-- 温度范围示例 --><section class="demo-block"><h3>温度范围选择</h3><RangePickerv-model="temperatureRange":min="-20":max="50":step="1":format="formatTemp":disabled="true"placeholder-start="最低温"placeholder-end="最高温"/><div class="demo-value">温度区间: {{ formatTemp(temperatureRange[0]) }} - {{ formatTemp(temperatureRange[1]) }}</div></section></div>
</template><style scoped>
.range-picker-demo {padding: 20px;max-width: 800px;margin: 0 auto;
}.demo-block {margin-bottom: 30px;padding: 20px;border: 1px solid #ebeef5;border-radius: 4px;background-color: #fff;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}h3 {margin-bottom: 15px;font-size: 18px;color: #333;font-weight: 500;
}.demo-value {margin-top: 10px;padding: 10px;background: #f5f7fa;border-radius: 4px;font-size: 14px;color: #666;border: 1px solid #e4e7ed;
}
</style>

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

添加路由
页面展示入口

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

$\router\index.js$

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

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

$src\App.vue$

<script setup>javascript">
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></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>

📚页面效果

页面效果

📚相关文章

———— 相　关　文　章 ————

0基础3步部署自己的DeepSeek安装步骤
DeepSeek 助力 Vue 开发：打造丝滑的步骤条（Step bar）https://blog.csdn.net/qq_33650655/article/details/145560497
DeepSeek 助力 Vue 开发：打造丝滑的进度条（Progress Bar）https://blog.csdn.net/qq_33650655/article/details/145577034
自己部署 DeepSeek 助力 Vue 开发：打造丝滑的标签页（Tabs）https://blog.csdn.net/qq_33650655/article/details/145587999
自己部署 DeepSeek 助力 Vue 开发：打造丝滑的折叠面板（Accordion）https://blog.csdn.net/qq_33650655/article/details/145590404
自己部署 DeepSeek 助力 Vue 开发：打造丝滑的时间线（Timeline ）https://blog.csdn.net/qq_33650655/article/details/145597372
DeepSeek 助力 Vue 开发：打造丝滑的返回顶部按钮（Back to Top）https://blog.csdn.net/qq_33650655/article/details/145615550
DeepSeek 助力 Vue 开发：打造丝滑的通知栏（Notification Bar）https://blog.csdn.net/qq_33650655/article/details/145620055
DeepSeek 助力 Vue 开发：打造丝滑的卡片（Card）https://blog.csdn.net/qq_33650655/article/details/145634564
DeepSeek 助力 Vue 开发：打造丝滑的无限滚动（Infinite Scroll）https://blog.csdn.net/qq_33650655/article/details/145638452
DeepSeek 助力 Vue 开发：打造丝滑的开关切换（Switch）https://blog.csdn.net/qq_33650655/article/details/145644151
DeepSeek 助力 Vue 开发：打造丝滑的侧边栏（Sidebar）https://blog.csdn.net/qq_33650655/article/details/145654204
DeepSeek 助力 Vue 开发：打造丝滑的面包屑导航（Breadcrumbs）https://blog.csdn.net/qq_33650655/article/details/145656895
DeepSeek 助力 Vue 开发：打造丝滑的瀑布流布局（Masonry Layout）https://blog.csdn.net/qq_33650655/article/details/145663699
DeepSeek 助力 Vue 开发：打造丝滑的评分组件（Rating）https://blog.csdn.net/qq_33650655/article/details/145664576
DeepSeek 助力 Vue 开发：打造丝滑的日期选择器（Date Picker），未使用第三方插件 https://blog.csdn.net/qq_33650655/article/details/145673279
DeepSeek 助力 Vue 开发：打造丝滑的颜色选择器（Color Picker）https://blog.csdn.net/qq_33650655/article/details/145689522
DeepSeek 助力 Vue 开发：打造丝滑的右键菜单（RightClickMenu）https://blog.csdn.net/qq_33650655/article/details/145706658