DeepSeek 助力 Vue 开发：打造丝滑的范围选择器（Range Picker）
前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕
目录
- 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）
📚前言
国泰基金在 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：输入框自定义 classseparator：分隔符内容（默认 “→”）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">
<input
ref="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">
<input
ref="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>
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>
<RangePicker
v-model="numberRange"
:min="0"
:max="100"
:step="5"
placeholder-start="最小值"
placeholder-end="最大值"
/>
</template>
<script setup>
import { ref } from 'vue';
const numberRange = ref({ start: 10, end: 50 });
</script>
<!-- 示例2：日期范围选择 -->
<template>
<RangePicker
v-model="dateRange"
:format="formatDate"
separator="至"
input-class="date-input"
/>
</template>
<script setup>
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>
<RangePicker
v-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>
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>
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>
<RangePicker
v-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>
<RangePicker
v-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>
<RangePicker
v-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
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
<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>
</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
到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家多多支持宝码香车~💕，若转载本文，一定注明本文链接。
更多专栏订阅推荐：
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象（Date()）操作