aspcms网站图片不显示,重庆百度推广优化排名,百度账号登录官网,用别的域名给网站做竞价前言#xff1a;哈喽#xff0c;大家好#xff0c;今天给大家分享一篇文章#xff01;并提供具体代码帮助大家深入理解#xff0c;彻底掌握#xff01;创作不易#xff0c;如果能帮助到大家或者给大家一些灵感和启发#xff0c;欢迎收藏关注哦 #x1f495; 目录 Deep… 前言哈喽大家好今天给大家分享一篇文章并提供具体代码帮助大家深入理解彻底掌握创作不易如果能帮助到大家或者给大家一些灵感和启发欢迎收藏关注哦 目录 DeepSeek 助力 Vue 开发打造丝滑的日期选择器Date Picker未使用第三方插件前言进入安装好的DeepSeek页面效果指令输入**属性Props****事件Events** 组件代码src\components\DatePicker\DatePicker.vue调用 src\views\DatePickerView.vue 代码测试测试代码正常跑通附其他基本代码编写路由 src\router\index.js编写展示入口 src\App.vue 页面效果自己部署 DeepSeek 安装地址相关文章 ️✍️️️️⚠️⬇️·正文开始⬇️·✅❓ 0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣*️⃣#️⃣
DeepSeek 助力 Vue 开发打造丝滑的日期选择器Date Picker未使用第三方插件
前言
苏商银行同样在积极应用 DeepSeek。应用 DeepSeek VL2 多模态模型处理非标材料如表格、影像资料、文档图片等识别提升信贷材料综合识别准确率至 97%并将 DeepSeek R1 推理模型集成到自主研发的 “开发助手”使核心系统迭代周期缩短 30%。此外苏商银行将 DeepSeek 的蒸馏技术应用于信贷风控、反欺诈等 20 多个场景使尽调报告生成效率提升 40%欺诈风险标签准确率提升 35% 。
这些应用案例表明DeepSeek 在金融领域的智能合同质检、信贷风控、自动化估值对账等场景中能够通过对海量金融数据的挖掘与分析实现金融语义理解准确率与业务效率的双突破重塑金融服务模式。
进入安装好的DeepSeek
0基础3步部署自己的DeepSeek安装步骤 打开搭建好的DeepSeek应用。 进入应用。 页面效果 指令输入 已经创建好了一个基于Vue3的组合式API的项目(Composition API)并能正常运行起来请帮我用 Vue3的组合式API(Composition API) 生成一个 日期选择器Date Picker 的功能组件所有代码都保存在components/DatePicker 下的文件夹中。功能组件的script标签中只有setup属性使用普通 JavaScript 实现,不使用TypeScript。 功能要有如下属性 属性Props modelValue 类型Date | Date[] | null默认值null说明绑定的日期值支持 v-model范围选择时为数组。 minDate 类型Date | null默认值null说明最小可选日期早于此日期的选项被禁用。 maxDate 类型Date | null默认值null说明最大可选日期晚于此日期的选项被禁用。 format 类型string默认值YYYY-MM-DD说明日期显示格式如 YYYY-MM-DD、MM/DD/YYYY。 disabled 类型boolean默认值false说明是否禁用组件。 placeholder 类型string默认值请选择日期说明输入框占位符文本。 firstDayOfWeek 类型number0-60周日默认值1周一说明周起始日。 showWeekNumbers 类型boolean默认值false说明是否显示周数。 isRange 类型boolean默认值false说明是否为范围选择模式modelValue 为 Date[]。 locale 类型string | object默认值en说明本地化配置语言、月份名等。 isInline 类型boolean默认值false说明是否内联显示日历面板无需点击输入框。 className 类型string默认值说明自定义容器类名。 showConfirmButton 类型boolean默认值true说明是否显示确认按钮。 confirmText 类型string默认值确认说明确认按钮文本。 disableDate 类型(date: Date) boolean默认值() false说明动态禁用日期返回 true 表示禁用。 事件Events update:modelValue 参数Date | Date[] | null说明选中日期变化时触发用于 v-model 同步。 change 参数{ value: Date | Date[] | null, isValid: boolean }说明日期变化时触发附带有效性校验。 confirm 参数Date | Date[] | null说明点击确认按钮时触发。 open 参数无说明日历面板打开时触发。 close 参数无说明日历面板关闭时触发。 invalid 参数{ reason: string }说明用户输入或选择无效日期时触发。 你有更好的建议也可以添加要注明。组件定义好后给出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/ │ │ ├── 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 │ │ ├── DatePickerView.vue │ │ └── AboutView.vue │ ├── App.vue # 根组件 │ └── main.js # 应用入口 ├── public/ # 公共资源目录 ├── index.html # HTML 模板 ├── package.json # 项目配置 ├── vite.config.js # Vite 配置 └── node_modules/ # 依赖包目录
组件代码src\components\DatePicker\DatePicker.vue
script setup
import { ref, computed, watch } from vue// Props 定义
const props defineProps({modelValue: {type: [Date, Array, null],default: null},minDate: {type: Date,default: null},maxDate: {type: Date,default: null},format: {type: String,default: YYYY-MM-DD},disabled: {type: Boolean,default: false},placeholder: {type: String,default: 请选择日期},firstDayOfWeek: {type: Number,default: 1},showWeekNumbers: {type: Boolean,default: false},isRange: {type: Boolean,default: false},locale: {type: [String, Object],default: zh-CN},isInline: {type: Boolean,default: false},className: {type: String,default: },showConfirmButton: {type: Boolean,default: true},confirmText: {type: String,default: 确认},disableDate: {type: Function,default: () false}
})const emit defineEmits([update:modelValue, change, confirm, open, close, invalid])// 初始化状态
const currentDate ref(new Date())
const selectedDate ref(props.isRange ? [] : null)
const isOpen ref(props.isInline)// 格式化单个日期
const formatSingleDate (date) {if (!(date instanceof Date) || isNaN(date.getTime())) return const year date.getFullYear()const month String(date.getMonth() 1).padStart(2, 0)const day String(date.getDate()).padStart(2, 0)return props.format.replace(YYYY, year).replace(MM, month).replace(DD, day)
}// 格式化显示日期
const formattedDate computed(() {if (!selectedDate.value) return if (Array.isArray(selectedDate.value)) {return selectedDate.value.map(date date instanceof Date ? formatSingleDate(date) : ).filter(Boolean).join( - )}return formatSingleDate(selectedDate.value)
})// 日历数据
const calendarDays computed(() {const year currentDate.value.getFullYear()const month currentDate.value.getMonth()const firstDay new Date(year, month, 1)const lastDay new Date(year, month 1, 0)const days []const firstDayOfWeek firstDay.getDay()const prevMonthDays (firstDayOfWeek - props.firstDayOfWeek 7) % 7// 上月日期for (let i prevMonthDays; i 0; i--) {const date new Date(year, month, 1 - i)days.push({date,isCurrentMonth: false,isDisabled: isDateDisabled(date)})}// 当月日期for (let i 1; i lastDay.getDate(); i) {const date new Date(year, month, i)days.push({date,isCurrentMonth: true,isDisabled: isDateDisabled(date)})}// 下月日期const remainingDays 42 - days.lengthfor (let i 1; i remainingDays; i) {const date new Date(year, month 1, i)days.push({date,isCurrentMonth: false,isDisabled: isDateDisabled(date)})}return days
})// 星期标题
const weekDays computed(() {const days [日, 一, 二, 三, 四, 五, 六]return [...days.slice(props.firstDayOfWeek), ...days.slice(0, props.firstDayOfWeek)]
})// 判断日期是否禁用
const isDateDisabled (date) {if (!(date instanceof Date)) return trueif (props.minDate date props.minDate) return trueif (props.maxDate date props.maxDate) return truereturn props.disableDate(date)
}// 选择日期
const selectDate (day) {if (!day.date || day.isDisabled) {emit(invalid, { reason: date disabled })return}const newDate new Date(day.date)if (props.isRange) {if (!Array.isArray(selectedDate.value)) {selectedDate.value []}if (selectedDate.value.length 0 || selectedDate.value.length 2) {selectedDate.value [newDate]} else {selectedDate.value [selectedDate.value[0], newDate].sort((a, b) a - b)}} else {selectedDate.value newDate}emit(update:modelValue, selectedDate.value)emit(change, { value: selectedDate.value, isValid: true })
}// 切换月份
const changeMonth (delta) {currentDate.value new Date(currentDate.value.getFullYear(),currentDate.value.getMonth() delta,1)
}// 确认选择
const confirm () {emit(confirm, selectedDate.value)isOpen.value falseemit(close)
}// 切换日历显示
const toggleCalendar () {if (props.disabled) returnisOpen.value !isOpen.valueemit(isOpen.value ? open : close)
}// 监听数据变化
watch(() props.modelValue, (newVal) {if (props.isRange) {selectedDate.value Array.isArray(newVal) ? newVal.map(d d instanceof Date ? new Date(d) : null): []} else {selectedDate.value newVal instanceof Date ? new Date(newVal) : null}
}, { immediate: true })
/scripttemplatediv :class[date-picker, className]inputtypetext:placeholderplaceholder:valueformattedDateclicktoggleCalendarreadonly:disableddisabled/div v-ifisOpen || isInline classcalendardiv classcalendar-headerbutton clickchangeMonth(-1)lt;/buttonspan{{ currentDate.getFullYear() }}年 {{ currentDate.getMonth() 1 }}月/spanbutton clickchangeMonth(1)gt;/button/divdiv classcalendar-weeksdiv v-forday in weekDays :keyday classweek-day{{ day }}/div/divdiv classcalendar-daysdivv-forday in calendarDays:keyday.date.getTime():class[calendar-day,{is-current-month: day.isCurrentMonth,is-disabled: day.isDisabled,is-selected: selectedDate (Array.isArray(selectedDate) ? selectedDate.some(d d d.getTime() day.date.getTime()): selectedDate.getTime() day.date.getTime())}]clickselectDate(day){{ day.date.getDate() }}/div/divdiv v-ifshowConfirmButton classcalendar-footerbutton clickconfirm{{ confirmText }}/button/div/div/div
/templatestyle scoped
.date-picker {display: inline-block;position: relative;
}input {padding: 8px;border: 1px solid #dcdfe6;border-radius: 4px;width: 200px;cursor: pointer;
}.calendar {position: absolute;top: 100%;left: 0;margin-top: 5px;background: white;border: 1px solid #dcdfe6;border-radius: 4px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);z-index: 1000;
}.calendar-header {display: flex;justify-content: space-between;align-items: center;padding: 8px;border-bottom: 1px solid #ebeef5;
}.calendar-weeks {display: grid;grid-template-columns: repeat(7, 1fr);text-align: center;border-bottom: 1px solid #ebeef5;
}.week-day {padding: 8px;color: #606266;
}.calendar-days {display: grid;grid-template-columns: repeat(7, 1fr);gap: 2px;padding: 8px;
}.calendar-day {padding: 8px;text-align: center;cursor: pointer;color: #606266;
}.calendar-day:hover:not(.is-disabled) {background-color: #f5f7fa;
}.is-current-month {color: #303133;
}.is-selected {background-color: #409eff;color: white;
}.is-disabled {color: #c0c4cc;cursor: not-allowed;background-color: #f5f7fa;
}.calendar-footer {padding: 8px;text-align: right;border-top: 1px solid #ebeef5;
}button {padding: 6px 12px;background: #409eff;border: none;border-radius: 4px;color: white;cursor: pointer;
}button:hover {background: #66b1ff;
}.is-inline {position: static;margin-top: 0;
}
/style调用 src\views\DatePickerView.vue
script setup
import { ref } from vue
import DatePicker from ../components/DatePicker/DatePicker.vue// 初始化状态
const basicDate ref(null)
const rangeDate ref(null)
const disabledDate ref(null)
const customDate ref(null)
const inlineDate ref(null)
const limitedDate ref(null)// 日期范围
const minDate new Date(2024-01-01)
const maxDate new Date(2024-12-31)// 格式化函数
const formatDate (date) {if (!date) return 未选择if (Array.isArray(date)) {if (!date.length) return 未选择return date.map(d {if (!d) return return d instanceof Date ? d.toLocaleDateString(zh-CN, {year: numeric,month: 2-digit,day: 2-digit}) : }).filter(Boolean).join( - )}return date instanceof Date ? date.toLocaleDateString(zh-CN, {year: numeric,month: 2-digit,day: 2-digit}) : 未选择
}// 禁用周末
const isWeekend (date) {if (!(date instanceof Date)) return falseconst day date.getDay()return day 0 || day 6
}// 事件处理
const handleChange ({ value, isValid }) {console.log(日期变化:, formatDate(value), 是否有效:, isValid)
}const handleConfirm (date) {alert(确认选择:${formatDate(date)})
}
/scripttemplatediv classdatepicker-demo!-- 基础示例 --section classdemo-blockh3基础用法/h3DatePickerv-modelbasicDateplaceholder请选择日期changehandleChange/div classdemo-value选中值: {{ formatDate(basicDate) }}/div/section!-- 日期范围选择 --section classdemo-blockh3日期范围/h3DatePickerv-modelrangeDate:is-rangetrueplaceholder请选择日期范围changehandleChange/div classdemo-value选中值: {{ formatDate(rangeDate) }}/div/section!-- 禁用周末 --section classdemo-blockh3禁用周末/h3DatePickerv-modeldisabledDate:disable-dateisWeekendplaceholder请选择工作日changehandleChange/div classdemo-value选中值: {{ formatDate(disabledDate) }}/div/section!-- 自定义格式 --section classdemo-blockh3自定义格式/h3DatePickerv-modelcustomDateformatMM/DD/YYYYplaceholder月/日/年changehandleChange/div classdemo-value选中值: {{ formatDate(customDate) }}/div/section!-- 设置日期范围 --section classdemo-block styleh3限制可选日期范围/h3DatePickerv-modellimitedDate:min-dateminDate:max-datemaxDateplaceholder选择2024年日期changehandleChangeconfirmhandleConfirm/div classdemo-value选中值: {{ formatDate(limitedDate) }}/div/section!-- 内联显示 --section classdemo-block1h3内联显示/h3DatePickerv-modelinlineDate:is-inlinetruechangehandleChange/div classdemo-value选中值: {{ formatDate(inlineDate) }}/div/section/div
/templatestyle scoped
.datepicker-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);
}.demo-block1{margin-top: 300px;
}
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-routerconst 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.// 标签页Tabscomponent: () import(../views/TabsView.vue),},{path: /accordion,name: accordion,// 折叠面板Accordioncomponent: () import(../views/AccordionView.vue),},{path: /timeline,name: timeline,// 时间线Timelinecomponent: () 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)}],
})export default router
编写展示入口 src\App.vue script setup
import { RouterLink, RouterView } from vue-router
import HelloWorld from ./components/HelloWorld.vue
/scripttemplateheaderimg altVue logo classlogo src/assets/logo.svg width125 height125 /div classwrapperHelloWorld msgYou did it! /navRouterLink to/Progress/RouterLinkRouterLink to/tabsTabs/RouterLinkRouterLink to/accordionAccordion/RouterLinkRouterLink to/timelineTimeline/RouterLinkRouterLink to/backToTopBackToTop/RouterLinkRouterLink to/notificationNotification/RouterLinkRouterLink to/cardCard/RouterLinkRouterLink to/infiniteScrollInfiniteScroll/RouterLinkRouterLink to/switchSwitch/RouterLinkRouterLink to/sidebarSidebar/RouterLinkRouterLink to/breadcrumbsBreadcrumbs/RouterLinkRouterLink to/masonryLayoutMasonryLayout/RouterLinkRouterLink to/ratingRating/RouterLinkRouterLink to/datePickerDatePicker/RouterLink/nav/div/headerRouterView /
/templatestyle 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 安装地址
蓝耘元生代智算云平台地址:https://cloud.lanyun.net/#/registerPage?promoterCode07100c37a0
相关文章 ———— 相 关 文 章 ———— 0基础3步部署自己的DeepSeek安装步骤 DeepSeek 助力 Vue 开发打造丝滑的步骤条Step bar DeepSeek 助力 Vue 开发打造丝滑的进度条Progress Bar 自己部署 DeepSeek 助力 Vue 开发打造丝滑的标签页Tabs 自己部署 DeepSeek 助力 Vue 开发打造丝滑的折叠面板Accordion 自己部署 DeepSeek 助力 Vue 开发打造丝滑的时间线Timeline DeepSeek 助力 Vue 开发打造丝滑的返回顶部按钮Back to Top DeepSeek 助力 Vue 开发打造丝滑的通知栏Notification Bar DeepSeek 助力 Vue 开发打造丝滑的卡片Card DeepSeek 助力 Vue 开发打造丝滑的无限滚动Infinite Scroll DeepSeek 助力 Vue 开发打造丝滑的开关切换Switch DeepSeek 助力 Vue 开发打造丝滑的侧边栏Sidebar DeepSeek 助力 Vue 开发打造丝滑的面包屑导航Breadcrumbs DeepSeek 助力 Vue 开发打造丝滑的瀑布流布局Masonry Layout DeepSeek 助力 Vue 开发打造丝滑的评分组件Rating 到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章创作不易如果能帮助到大家,希望大家多多支持宝码香车~若转载本文一定注明本文链接。 更多专栏订阅推荐 htmlcssjs 绚丽效果 vue ✈️ Electron ⭐️ js 字符串 ✍️ 时间对象Date()操作
