DeepSeek 助力 Vue 开发：打造丝滑的日期选择器（Date Picker），未使用第三方插件
前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦
目录
- 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
- 类型：
number（0-6，0=周日） - 默认值：
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.length
for (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 true
if (props.minDate && date < props.minDate) return true
if (props.maxDate && date > props.maxDate) return true
return 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 = false
emit('close')
}
// 切换日历显示
const toggleCalendar = () => {
if (props.disabled) return
isOpen.value = !isOpen.value
emit(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 })
script>
<template>
<div :class="['date-picker', className]">
<input
type="text"
:placeholder="placeholder"
:value="formattedDate"
@click="toggleCalendar"
readonly
:disabled="disabled"
/>
<div v-if="isOpen || isInline" class="calendar">
<div class="calendar-header">
<button @click="changeMonth(-1)"><button>
<span>{{ currentDate.getFullYear() }}年 {{ currentDate.getMonth() + 1 }}月span>
<button @click="changeMonth(1)">>button>
div>
<div class="calendar-weeks">
<div v-for="day in weekDays" :key="day" class="week-day">{{ day }}div>
div>
<div class="calendar-days">
<div
v-for="day in calendarDays"
:key="day.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()
)
}
]"
@click="selectDate(day)"
>
{{ day.date.getDate() }}
div>
div>
<div v-if="showConfirmButton" class="calendar-footer">
<button @click="confirm">{{ confirmText }}button>
div>
div>
div>
template>
<style 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 false
const day = date.getDay()
return day === 0 || day === 6
}
// 事件处理
const handleChange = ({ value, isValid }) => {
console.log('日期变化:', formatDate(value), '是否有效:', isValid)
}
const handleConfirm = (date) => {
alert(`确认选择:${formatDate(date)}`)
}
script>
<template>
<div class="datepicker-demo">
<section class="demo-block">
<h3>基础用法h3>
<DatePicker
v-model="basicDate"
placeholder="请选择日期"
@change="handleChange"
/>
<div class="demo-value">选中值: {{ formatDate(basicDate) }}div>
section>
<section class="demo-block">
<h3>日期范围h3>
<DatePicker
v-model="rangeDate"
:is-range="true"
placeholder="请选择日期范围"
@change="handleChange"
/>
<div class="demo-value">选中值: {{ formatDate(rangeDate) }}div>
section>
<section class="demo-block">
<h3>禁用周末h3>
<DatePicker
v-model="disabledDate"
:disable-date="isWeekend"
placeholder="请选择工作日"
@change="handleChange"
/>
<div class="demo-value">选中值: {{ formatDate(disabledDate) }}div>
section>
<section class="demo-block">
<h3>自定义格式h3>
<DatePicker
v-model="customDate"
format="MM/DD/YYYY"
placeholder="月/日/年"
@change="handleChange"
/>
<div class="demo-value">选中值: {{ formatDate(customDate) }}div>
section>
<section class="demo-block" style="">
<h3>限制可选日期范围h3>
<DatePicker
v-model="limitedDate"
:min-date="minDate"
:max-date="maxDate"
placeholder="选择2024年日期"
@change="handleChange"
@confirm="handleConfirm"
/>
<div class="demo-value">选中值: {{ formatDate(limitedDate) }}div>
section>
<section class="demo-block1">
<h3>内联显示h3>
<DatePicker
v-model="inlineDate"
:is-inline="true"
@change="handleChange"
/>
<div class="demo-value">选中值: {{ formatDate(inlineDate) }}div>
section>
div>
template>
<style 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-router'
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')
}
],
})
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="/">ProgressRouterLink>
<RouterLink to="/tabs">TabsRouterLink>
<RouterLink to="/accordion">AccordionRouterLink>
<RouterLink to="/timeline">TimelineRouterLink>
<RouterLink to="/backToTop">BackToTopRouterLink>
<RouterLink to="/notification">NotificationRouterLink>
<RouterLink to="/card">CardRouterLink>
<RouterLink to="/infiniteScroll">InfiniteScrollRouterLink>
<RouterLink to="/switch">SwitchRouterLink>
<RouterLink to="/sidebar">SidebarRouterLink>
<RouterLink to="/breadcrumbs">BreadcrumbsRouterLink>
<RouterLink to="/masonryLayout">MasonryLayoutRouterLink>
<RouterLink to="/rating">RatingRouterLink>
<RouterLink to="/datePicker">DatePickerRouterLink>
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>
页面效果
自己部署 DeepSeek 安装地址
蓝耘元生代智算云平台地址:https://cloud.lanyun.net/#/registerPage?promoterCode=07100c37a0
相关文章
-
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）
到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家多多支持宝码香车~，若转载本文，一定注明本文链接。
更多专栏订阅推荐：
html+css+js 绚丽效果
vue
✈️ Electron
⭐️ js
字符串
✍️ 时间对象（Date()）操作