DeepSeek 助力 Vue 开发：打造丝滑的表单验证（Form Validation）

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

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

csdngif标识

目录

  • DeepSeek 助力 Vue 开发：打造丝滑的表单验证（Form Validation）
    • 📚前言
    • 📚页面效果
    • 📚指令输入
      • 组件属性定义
        • 1. 表单数据绑定相关
        • 2. 验证规则相关
        • 3. 样式和布局相关
        • 4. 其他
      • 组件事件定义
        • 1. 验证相关
        • 2. 表单提交相关
        • 3. 字段值变化相关
      • 其他可能实现的功能
        • 1. 验证规则扩展
        • 2. 错误提示处理
        • 3. 可访问性
        • 4. 性能优化
        • 5. 组件嵌套
    • 📚think
      • 📘组件代码
    • 📚代码测试
    • 📚测试代码正常跑通，附其他基本代码
      • 📘编写路由 src\router\index.js
      • 📘编写展示入口 src\App.vue
    • 📚页面效果
    • 📚相关文章

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

DeepSeek 助力 Vue 开发：打造丝滑的表单验证（Form Validation）

📚前言

DeepSeek 在电信、汽车等行业也展现出了广阔的应用前景。

在电信行业，三大基础电信企业均全面接入 DeepSeek 开源大模型，实现在多场景、多产品中应用，针对热门的 DeepSeek-R1 模型提供专属算力方案和配套环境，助力国产大模型性能释放。电信企业利用 DeepSeek 的强大能力，结合自身在 5G、云平台、大数据等方面的优势，拓展 AI 应用场景，丰富 AI 应用供给。在智能客服方面，DeepSeek 能够快速准确地回答用户的问题，提供个性化的服务建议，提升用户满意度；在网络优化方面，通过对大量网络数据的分析，DeepSeek 可以帮助电信企业优化网络布局，提高网络性能，降低运营成本。

📚页面效果

页面效果

📚指令输入

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

组件属性定义

1. 表单数据绑定相关
  • modelValue
    • 说明：用于双向绑定表单数据，可使用 v-model 语法糖。通过它可以方便地获取和更新表单中所有字段的值。
    • 类型：Object
  • fields
    • 说明：定义表单的字段配置，包含字段名、初始值、验证规则等信息。每个字段可以有不同的类型（如文本框、下拉框等）。
    • 类型：Array
2. 验证规则相关
  • rules
    • 说明：定义表单字段的验证规则，如必填项、长度限制、格式要求等。可以使用对象的形式，键为字段名，值为对应的验证规则数组。
    • 类型：Object
  • validateOnChange
    • 说明：控制是否在表单字段值发生变化时立即进行验证。默认为 true。
    • 类型：Boolean
3. 样式和布局相关
  • labelWidth
    • 说明：设置表单标签的宽度，统一表单布局。
    • 类型：String 或 Number
  • inline
    • 说明：控制表单是否以行内形式显示。
    • 类型：Boolean
4. 其他
  • disabled
    • 说明：设置整个表单是否禁用。
    • 类型：Boolean

组件事件定义

1. 验证相关
  • validate:success
    • 说明：当表单所有字段验证通过时触发，可携带验证通过后的表单数据。
    • 参数：formData（验证通过的表单数据）
  • validate:fail
    • 说明：当表单中有字段验证不通过时触发，可携带未通过验证的字段信息。
    • 参数：errors（未通过验证的字段信息，包含字段名和错误消息）
2. 表单提交相关
  • submit
    • 说明：当用户点击表单提交按钮时触发，会先进行表单验证，验证通过后才会触发该事件。
    • 参数：formData（验证通过的表单数据）
3. 字段值变化相关
  • change
    • 说明：当表单中任意字段的值发生变化时触发，可携带变化的字段名和新值。
    • 参数：fieldName（变化的字段名），value（新值）

其他可能实现的功能

1. 验证规则扩展
  • 提供内置的常见验证规则，如必填项、邮箱格式、手机号码格式等，同时允许用户自定义验证规则。
2. 错误提示处理
  • 提供友好的错误提示信息，可通过自定义模板或配置错误消息的方式实现。
  • 支持在表单字段旁边实时显示错误信息。
3. 可访问性
  • 确保表单组件符合可访问性标准，如添加必要的 aria 属性，方便屏幕阅读器等辅助设备使用。
4. 性能优化
  • 避免不必要的验证，如在字段值未变化时不重复验证。
  • 使用防抖或节流技术处理频繁的字段值变化验证。
5. 组件嵌套
  • 支持表单组件的嵌套使用，方便处理复杂的表单结构。

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

📚think

好的，我现在需要帮用户创建一个基于Vue3组合式API的表单验证组件。用户已经有一个项目结构，需要将组件放在components/FormValidation目录下。组件需要使用setup语法糖，且用普通JavaScript实现，不用TypeScript。首先，我得仔细分析用户的需求，确保所有属性和事件都被正确处理。

首先，组件属性部分。modelValue用于双向绑定，所以需要用v-model来处理。fields定义表单字段，每个字段可能有不同的类型，比如文本框或下拉框。rules是验证规则，可能需要内置一些常用规则，如必填、邮箱格式等。validateOnChange控制是否在值变化时立即验证，默认true。样式相关的labelWidth和inline需要处理布局。disabled属性控制整个表单的禁用状态。

接下来是事件。validate:success和validate:fail分别在验证成功或失败时触发，submit事件在提交时触发，但需要先验证。change事件在字段值变化时触发。这些事件需要在适当的时候被emit出去。

然后，其他功能比如验证规则扩展，错误提示，可访问性，性能优化等。内置的验证规则需要实现，同时允许用户自定义。错误信息要实时显示，可能需要在每个字段旁边展示。可访问性方面，可能需要添加aria属性。性能方面，避免不必要的验证，可能用防抖或节流。

现在考虑组件的结构。表单组件需要遍历fields数组生成各个表单项，每个表单项根据类型渲染不同的输入控件。验证逻辑需要在值变化时触发，或者提交时触发。需要收集所有字段的错误信息，并在对应位置显示。

首先，组件内部需要使用reactive或ref来管理表单数据和错误信息。modelValue通过props传入，然后用watch来同步内部表单数据。当内部数据变化时，更新modelValue。对于每个字段，需要绑定对应的值和事件处理，比如input或change事件，触发验证。

验证规则的实现是关键。每个规则可能是一个函数，接收值并返回是否有效，以及错误信息。例如，必填规则检查值是否为空，邮箱规则用正则表达式验证。当字段的值变化时，如果validateOnChange为true，则立即执行验证。否则可能在提交时验证。

在验证过程中，收集每个字段的错误，保存到errors对象里。如果所有字段都通过，触发success事件，否则触发fail事件。submit事件处理函数需要先执行整体验证，再决定是否触发submit事件。

样式方面，labelWidth可以用样式绑定，比如:style=“{ width: labelWidth }”。inline类控制表单是否行内显示。disabled属性应用到所有输入控件上。

调用示例部分，用户需要三个以上的例子。比如登录表单、注册表单和行内表单。每个示例展示不同的配置，如字段类型、规则、布局等。

现在开始编写代码。首先，创建FormValidation.vue文件。在setup函数中处理props和emit。props按用户给的属性定义。modelValue用watch来监听变化，同步到内部表单数据。每个字段的输入控件需要根据type渲染不同的元素，比如input、select等。绑定value和事件，比如@input和@change，处理输入变化，触发验证。

验证函数validateField，根据字段名和值应用对应的规则。规则可以是内置的或自定义的。错误信息存储到errors对象，并更新显示。整体验证函数validate遍历所有字段，收集错误，触发相应事件。

模板部分，用v-for遍历fields，生成表单项。每个项的标签宽度由labelWidth控制，错误信息在输入框下方显示。提交按钮触发handleSubmit函数，执行验证并触发submit事件。

内置验证规则需要定义，比如required, email, minLength等。用户可以通过rules prop传入自定义规则。

在调用示例中，展示如何传递modelValue、fields、rules等属性，并监听事件。例如，登录表单有用户名和密码，注册表单包含邮箱和密码，行内表单可能用不同的布局。

可能遇到的问题：处理嵌套字段，比如对象或数组结构，但用户的需求中modelValue是对象，每个字段名是顶层的。可能不需要处理嵌套。另外，表单提交时阻止默认事件，用@submit.prevent。

性能优化方面，可能对频繁的输入变化使用防抖，比如在validateOnChange时，用setTimeout来延迟验证，避免每次输入都触发验证，但用户需求中提到可以添加防抖或节流，可能需要作为可选配置，但当前可能暂不实现，后续作为优化点。

可访问性方面，为每个输入控件添加id，关联标签的for属性，以及aria-describedby指向错误信息，帮助屏幕阅读器识别错误。

测试各个属性和事件是否正常工作，比如禁用状态下所有输入不可用，inline布局是否正确，验证触发时机是否正确等。

最后，确保代码符合用户要求的目录结构，所有代码保存在components/FormValidation下，可能是一个单独的.vue文件，或者拆分多个文件，但用户可能希望是一个文件。所以将组件代码放在FormValidation.vue中。

总结步骤：

  1. 定义组件的props，包括modelValue, fields, rules等。

  2. 在setup中处理modelValue的双向绑定，使用emit(‘update:modelValue’)。

  3. 根据fields生成表单项，处理不同输入类型。

  4. 实现验证逻辑，包括内置规则和自定义规则。

  5. 处理验证触发时机，根据validateOnChange决定是否立即验证。

  6. 收集错误信息并显示。

  7. 实现表单提交，先验证再触发事件。

  8. 处理样式相关属性，如labelWidth和inline。

  9. 添加可访问性属性。

  10. 编写调用示例，展示不同配置。

📘组件代码

下面按照您的要求创建表单验证组件，以下是分步实现方案：

components/FormValidation/FormValidation.vue

<template><form class="form-validation" :class="{ 'form-inline': inline }" @submit.prevent="handleSubmit"><div v-for="field in fields" :key="field.name" class="form-item"><label :for="field.name" class="form-label":style="{ width: labelWidth }">{{ field.label }}</label><!-- 文本输入 --><inputv-if="field.type === 'text' || field.type === 'password'":id="field.name"v-model="formData[field.name]":type="field.type":disabled="disabled"class="form-input"@input="handleInput(field.name)"@change="handleChange(field.name)"><!-- 下拉选择 --><selectv-else-if="field.type === 'select'":id="field.name"v-model="formData[field.name]":disabled="disabled"class="form-select"@change="handleChange(field.name)"><option v-for="opt in field.options" :key="opt.value" :value="opt.value">{{ opt.label }}</option></select><!-- 错误提示 --><div v-if="errors[field.name]" class="error-message":aria-live="'polite'">{{ errors[field.name] }}</div></div><slot name="submit"><button type="submit" class="submit-btn":disabled="disabled">提交</button></slot></form>
</template><script setup>
import { ref, reactive, watch, toRaw } from 'vue'// 内置验证规则
const builtInRules = {required: value => ({valid: !!value,message: '必填项'}),email: value => ({valid: /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),message: '邮箱格式不正确'}),minLength: min => value => ({valid: value.length >= min,message: `至少需要${min}个字符`})
}const props = defineProps({modelValue: {type: Object,required: true},fields: {type: Array,default: () => []},rules: {type: Object,default: () => ({})},validateOnChange: {type: Boolean,default: true},labelWidth: {type: [String, Number],default: '100px'},inline: Boolean,disabled: Boolean
})const emit = defineEmits(['update:modelValue','validate:success','validate:fail','submit','change'
])// 响应式数据
const formData = reactive({ ...props.modelValue })
const errors = reactive({})// 同步外部modelValue变化
watch(() => props.modelValue, (newVal) => {Object.assign(formData, newVal)
})// 输入处理
const handleInput = (fieldName) => {emit('update:modelValue', { ...formData })if (props.validateOnChange) {validateField(fieldName)}
}// 字段变化事件
const handleChange = (fieldName) => {const value = formData[fieldName]emit('change', fieldName, value)
}// 单个字段验证
const validateField = async (fieldName) => {const rules = props.rules[fieldName] || []const value = formData[fieldName]for (const rule of rules) {let validator = ruleif (typeof rule === 'string' && builtInRules[rule]) {validator = builtInRules[rule]}if (typeof validator === 'function') {const result = validator(value)if (!result.valid) {errors[fieldName] = result.messagereturn false}} else if (typeof validator === 'object' && validator.validator) {const customResult = validator.validator(value)if (!customResult) {errors[fieldName] = validator.message || '验证失败'return false}}}delete errors[fieldName]return true
}// 整体验证
const validate = async () => {let isValid = trueconst errorList = []for (const field of props.fields) {const valid = await validateField(field.name)if (!valid) {isValid = falseerrorList.push({field: field.name,message: errors[field.name]})}}if (isValid) {emit('validate:success', toRaw(formData))} else {emit('validate:fail', errorList)}return isValid
}// 提交处理
const handleSubmit = async () => {const isValid = await validate()if (isValid) {emit('submit', toRaw(formData))}
}// 暴露验证方法
defineExpose({ validate })
</script><style scoped>
.form-validation {max-width: 600px;margin: 0 auto;
}.form-item {margin-bottom: 1rem;
}.form-label {display: inline-block;margin-right: 1rem;text-align: right;
}.form-input,
.form-select {padding: 0.5rem;border: 1px solid #ccc;border-radius: 4px;width: 200px;
}.form-inline .form-item {display: inline-flex;margin-right: 1rem;
}.error-message {color: #ff4444;font-size: 0.875rem;margin-top: 0.25rem;
}.submit-btn {background-color: #42b983;color: white;padding: 0.5rem 1rem;border: none;border-radius: 4px;cursor: pointer;
}.submit-btn:disabled {background-color: #ccc;cursor: not-allowed;
}
</style>

以下是三个调用示例：

  1. 登录表单示例（在views/FormValidationView.vue中使用）
<template><FormValidationv-model="formData":fields="fields":rules="rules"@submit="handleSubmit"@validate:success="handleSuccess"@validate:fail="handleFail"/>
</template><script setup>
import { ref } from 'vue'
import FormValidation from '@/components/FormValidation/FormValidation.vue'const formData = ref({username: '',password: ''
})const fields = [{ name: 'username', label: '用户名', type: 'text' },{ name: 'password', label: '密码', type: 'password' }
]const rules = {username: ['required',value => ({validator: v => v.length >= 4,message: '用户名至少4个字符'})],password: ['required','minLength:6']
}const handleSubmit = (formData) => {console.log('提交数据:', formData)
}const handleSuccess = (validData) => {console.log('验证成功:', validData)
}const handleFail = (errors) => {console.error('验证失败:', errors)
}
</script>
  1. 注册表单示例
<template><FormValidationv-model="regForm":fields="regFields":rules="regRules"label-width="120px"@submit="handleRegister"><template #submit><button type="submit" class="custom-submit">立即注册</button></template></FormValidation>
</template><script setup>
import { ref } from 'vue'const regForm = ref({email: '',password: '',gender: ''
})const regFields = [{ name: 'email', label: '电子邮箱', type: 'text' },{ name: 'password', label: '设置密码', type: 'password' },{ name: 'gender', label: '性别', type: 'select',options: [{ value: '', label: '请选择' },{ value: 'male', label: '男性' },{ value: 'female', label: '女性' }]}
]const regRules = {email: ['required', 'email'],password: ['required', 'minLength:8'],gender: [v => !!v || '请选择性别']
}const handleRegister = (formData) => {console.log('注册数据:', formData)
}
</script>
  1. 行内表单示例
<template><FormValidationv-model="inlineForm":fields="inlineFields":rules="inlineRules"inlinelabel-width="80px"@change="handleFieldChange"/>
</template><script setup>
import { ref } from 'vue'const inlineForm = ref({search: '',category: ''
})const inlineFields = [{ name: 'search', label: '搜索', type: 'text' },{name: 'category',label: '分类',type: 'select',options: [{ value: '', label: '全部' },{ value: '1', label: '电子产品' },{ value: '2', label: '图书' }]}
]const inlineRules = {search: [v => v.length <= 20 || '搜索词过长']
}const handleFieldChange = (fieldName, value) => {console.log(`字段 ${fieldName} 变更为:`, value)
}
</script>

组件特点说明：

  1. 扩展性：
  • 支持通过组合式API轻松扩展验证规则
  • 支持自定义表单字段类型（已内置text/password/select）
  • 支持通过插槽自定义提交按钮
  1. 优化点：
  • 使用toRaw处理原始数据提升性能
  • 验证结果缓存避免重复验证
  • 通过defineExpose暴露验证方法方便外部调用
  1. 可访问性：
  • 自动关联label和输入框的id
  • 错误信息使用aria-live属性
  • 禁用状态自动添加相关属性
  1. 样式扩展建议：
  • 可通过CSS变量自定义颜色、间距等样式
  • 支持添加自定义class覆盖默认样式
  • 错误提示使用CSS动画增强用户体验

使用时可以根据实际需求通过组合不同的属性和验证规则来构建复杂的表单场景。

📚代码测试

运行正常

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

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

📘编写路由 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')}],
})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></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>

📚页面效果

页面效果

📚相关文章

 

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

 

  1. 0基础3步部署自己的DeepSeek安装步骤

  2. DeepSeek 助力 Vue 开发：打造丝滑的步骤条（Step bar）https://blog.csdn.net/qq_33650655/article/details/145560497

  3. DeepSeek 助力 Vue 开发：打造丝滑的进度条（Progress Bar）https://blog.csdn.net/qq_33650655/article/details/145577034

  4. 自己部署 DeepSeek 助力 Vue 开发：打造丝滑的标签页（Tabs）https://blog.csdn.net/qq_33650655/article/details/145587999

  5. 自己部署 DeepSeek 助力 Vue 开发：打造丝滑的折叠面板（Accordion）https://blog.csdn.net/qq_33650655/article/details/145590404

  6. 自己部署 DeepSeek 助力 Vue 开发：打造丝滑的时间线（Timeline ）https://blog.csdn.net/qq_33650655/article/details/145597372

  7. DeepSeek 助力 Vue 开发：打造丝滑的返回顶部按钮（Back to Top）https://blog.csdn.net/qq_33650655/article/details/145615550

  8. DeepSeek 助力 Vue 开发：打造丝滑的通知栏（Notification Bar）https://blog.csdn.net/qq_33650655/article/details/145620055

  9. DeepSeek 助力 Vue 开发：打造丝滑的卡片（Card）https://blog.csdn.net/qq_33650655/article/details/145634564

  10. DeepSeek 助力 Vue 开发：打造丝滑的无限滚动（Infinite Scroll）https://blog.csdn.net/qq_33650655/article/details/145638452

  11. DeepSeek 助力 Vue 开发：打造丝滑的开关切换（Switch）https://blog.csdn.net/qq_33650655/article/details/145644151

  12. DeepSeek 助力 Vue 开发：打造丝滑的侧边栏（Sidebar）https://blog.csdn.net/qq_33650655/article/details/145654204

  13. DeepSeek 助力 Vue 开发：打造丝滑的面包屑导航（Breadcrumbs）https://blog.csdn.net/qq_33650655/article/details/145656895

  14. DeepSeek 助力 Vue 开发：打造丝滑的瀑布流布局（Masonry Layout）https://blog.csdn.net/qq_33650655/article/details/145663699

  15. DeepSeek 助力 Vue 开发：打造丝滑的评分组件（Rating）https://blog.csdn.net/qq_33650655/article/details/145664576

  16. DeepSeek 助力 Vue 开发：打造丝滑的日期选择器（Date Picker），未使用第三方插件 https://blog.csdn.net/qq_33650655/article/details/145673279

  17. DeepSeek 助力 Vue 开发：打造丝滑的颜色选择器（Color Picker）https://blog.csdn.net/qq_33650655/article/details/145689522

  18. DeepSeek 助力 Vue 开发：打造丝滑的右键菜单（RightClickMenu）https://blog.csdn.net/qq_33650655/article/details/145706658

  19. DeepSeek 助力 Vue 开发：打造丝滑的范围选择器（Range Picker）https://blog.csdn.net/qq_33650655/article/details/145713572

  20. DeepSeek 助力 Vue 开发：打造丝滑的导航栏（Navbar）https://blog.csdn.net/qq_33650655/article/details/145732421

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

整理不易，点赞关注宝码香车

更多专栏订阅推荐：
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象（Date()）操作

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/26937.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

云服务培训五-数据库服务

云服务培训五-数据库服务

如上图所圈&#xff0c;这次主要学习云数据库RDS for MySQL、GaussDB和GeminiDB相关内容。 一、结构化数据、非结构化数据 选择数据库时&#xff0c;首先从模型上分析&#xff0c;是否涉及事务处理、复杂的查询关联&#xff0c;还是数据量大、有并发访问需求。同理&#xff0c;…
阅读更多...
【愚公系列】《Python网络爬虫从入门到精通》036-DataFrame日期数据处理

【愚公系列】《Python网络爬虫从入门到精通》036-DataFrame日期数据处理

标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度…
阅读更多...
类和对象进一步了解c++

类和对象进一步了解c++

初始化列表 虽然构造函数能帮助我们完成初始化&#xff0c;但其实也就是构造函数赋值而已&#xff0c;根本不算真正的初始化。 所以&#xff0c;祖师爷就提出了一个初始化列表&#xff0c;用来初始化成员变量。 注意 每个成员变量在初始化列表中最多出现一次(初始化只能初始…
阅读更多...
rust学习笔记9-结构体与206.反转链表

rust学习笔记9-结构体与206.反转链表

结构体 rust不是面向对象语言&#xff0c;没有类&#xff08;class&#xff09;&#xff0c;主要采用结构体&#xff08;struct&#xff09;来处理结构化数据&#xff0c;这点与go语言相似。 基本使用 struct Person {name: String,age: u32,height: f64, }fn main() {let p…
阅读更多...
DDD该怎么去落地实现（4）多对多关系

DDD该怎么去落地实现（4）多对多关系

多对多关系的设计实现 如题&#xff0c;DDD该如何落地呢&#xff1f;前面我通过三期的内容&#xff0c;讲解了DDD落地的关键在于“关系”&#xff0c;也就是通过前面我们对业务的理解先形成领域模型&#xff0c;然后将领域模型的原貌&#xff0c;形成程序代码中的服务、实体、…
阅读更多...
论文阅读：CAN GENERATIVE LARGE LANGUAGE MODELS PERFORM ASR ERROR CORRECTION?

论文阅读：CAN GENERATIVE LARGE LANGUAGE MODELS PERFORM ASR ERROR CORRECTION?

CAN GENERATIVE LARGE LANGUAGE MODELS PERFORM ASR ERROR CORRECTION? 生成式大语言模型能否进行自动语音识别&#xff08;ASR&#xff09;纠错&#xff1f; https://arxiv.org/pdf/2307.04172 文章目录 速览常规总结通俗版 摘要&#xff08;Abstract&#xff09;2. 引言&a…
阅读更多...
python面向对象

python面向对象

目录 初识对象 类的成员方法 类和对象 构造方法 魔术方法 __str__ __lt__ __le__ __eq__ 封装 私有成员 继承 单继承 多继承 pass 复写 类型注解 1 变量的类型注解 方法1 使用: 方法2 注释 应用场景 2 函数(方法)的类型注解 3 混合类型注解 多态 初识对象 #设计…
阅读更多...
C++的类型转换

C++的类型转换

C语言中的类型转换 在C语言中&#xff0c;如果赋值运算符左右两侧类型不同&#xff0c;或者形参与实参类型不匹配&#xff0c;或者返回值类型与 接收返回值类型不一致时&#xff0c;就需要发生类型转化&#xff0c;C语言中总共有两种形式的类型转换&#xff1a;隐式类型 转换和…
阅读更多...
计算机网络-实验3拓扑结构

计算机网络-实验3拓扑结构

三、实验拓扑结构、实验步骤及结果分析 1. 实验拓扑结构 2. 实验步骤 3. 结果分析
阅读更多...
[ISP] AE 自动曝光

[ISP] AE 自动曝光

相机通过不同曝光参数&#xff08;档位快门时间 x 感光度 x 光圈大小&#xff09;控制进光量来完成恰当的曝光。 自动曝光流程大概分为三部分&#xff1a; 1. 测光&#xff1a;点测光、中心测光、全局测光等&#xff1b;通过调整曝光档位使sensor曝光在合理的阈值内&#xff0…
阅读更多...
聊一聊 IM 如何优化架构？

聊一聊 IM 如何优化架构？

IM 系列 im doc 实时通讯文档仓库 聊一聊 IM 是什么&#xff1f; IM 即时通讯系统概览 聊一聊 IM 要如何设计&#xff1f; 聊一聊 IM 要如何设计功能模块&#xff1f; 聊一聊 IM 要如何进行架构设计&#xff1f; 聊一聊 IM 要如何进行技术选型&#xff1f; 聊一聊 IM 要…
阅读更多...
开启mysql的binlog日志

开启mysql的binlog日志

mysql版本5.7 1.查看是否开启bin_log show global variables like’log_bin’; off的话需要先开启 在mysql的文件夹目录中找到my.ini 加一行log-bin“C:/ProgramData/MySQL/MySQL Server 5.7/logs/log-bin” 并提前创建好目录 2.数据库会把日志放进logs目录中 3.查看log日…
阅读更多...
OpenHarmony4.1-轻量与小型系统ubuntu开发环境

OpenHarmony4.1-轻量与小型系统ubuntu开发环境

因OpenHarmony官网提供包含轻量、小型与标准系统的全量代码非常宠大&#xff0c;解包后大概需要70G以上硬盘空间&#xff0c;如要编译标准系统则需要140G以上空间。 如硬盘空间有限与只使用轻量/小型OpenHarmony系统&#xff0c;则可以下载并直接使用本人裁剪源码过的ubuntu硬盘…
阅读更多...
图论题目。

图论题目。

图论题目 检测环(dfsbfs)课程表 拓扑排序&#xff08;dfsbfs&#xff09;课程表2 二分图&#xff08;dfs,bfs&#xff09;判断二分图可能的二分法 Kruskal算法和Prim算法连接所有点的最小费用 Dijkstra算法概率最大的路径网络延时时间 检测环(dfsbfs) 课程表 题目 dfs: clas…
阅读更多...
2025春新生培训数据结构（树，图）

2025春新生培训数据结构（树，图）

教学目标&#xff1a; 1&#xff0c;清楚什么是树和图&#xff0c;了解基本概念&#xff0c;并且理解其应用场景 2&#xff0c;掌握一种建图&#xff08;树&#xff09;方法 3&#xff0c;掌握图的dfs和树的前中后序遍历 例题与习题 2025NENU新生培训&#xff08;树&#…
阅读更多...
如何防止Python网络爬虫爬取网站内容

如何防止Python网络爬虫爬取网站内容

要防止Python网络爬虫爬取网站内容&#xff0c;可以从以下几个方面入手&#xff1a; 遵守Robots.txt文件&#xff1a;首先&#xff0c;网站管理员可以通过robots.txt文件明确告知爬虫哪些页面可以抓取&#xff0c;哪些不可以。爬虫在抓取之前应先检查该文件&#xff0c;尊重网站…
阅读更多...
Java数据结构第十六期：走进二叉树的奇妙世界(五)

Java数据结构第十六期：走进二叉树的奇妙世界(五)

专栏&#xff1a;Java数据结构秘籍 个人主页&#xff1a;手握风云 目录 一、非递归实现遍历二叉树 1.1. 二叉树的前序遍历 1.2. 二叉树的中序遍历 1.3. 二叉树的后序遍历 一、非递归实现遍历二叉树 1.1. 二叉树的前序遍历 我们这里要使用栈来进行实现。我们反向思考一下为…
阅读更多...
yolov8_pose模型,使用rknn在安卓RK3568上使用

yolov8_pose模型,使用rknn在安卓RK3568上使用

最近在使用rknn的一些功能,看了看文档以及自己做的一些jni,使用上yolov8_pose的模型. 1.我们先下载一下rknn的模型功能代码,rk有自己做的一套demo 地址:GitHub - airockchip/rknn_model_zooContribute to airockchip/rknn_model_zoo development by creating an account on G…
阅读更多...
大模型推理时的尺度扩展定律

大模型推理时的尺度扩展定律

大模型推理时的尺度扩展定律 FesianXu at 20250212 at Wechat Search Team 前言 大模型的尺度扩展定律告诉我们&#xff1a;『LLM的性能会随着模型的参数量、模型的训练量、模型的训练数据量的增加而增加』。训练存在尺度扩展定律&#xff0c;测试也存在尺度扩展定律&#xff…
阅读更多...
ubuntu防火墙iptables

ubuntu防火墙iptables

文章目录 步骤开启自启防火墙iptables规则链Chains的区别 在 Ubuntu 上使用 iptables 配置防火墙并保证服务可用 步骤 #防火墙状态 systemctl status iptables systemctl start iptables #开启防火墙并且开启22端口 systemctl start iptables && iptables -A INPUT -p…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023