厦门网站制作套餐,企业网站的开发与应用,做网站的企划书,企业公司网站模版前言#xff1a;哈喽#xff0c;大家好#xff0c;今天给大家分享一篇文章#xff01;并提供具体代码帮助大家深入理解#xff0c;彻底掌握#xff01;创作不易#xff0c;如果能帮助到大家或者给大家一些灵感和启发#xff0c;欢迎收藏关注哦 #x1f495; 目录 Deep… 前言哈喽大家好今天给大家分享一篇文章并提供具体代码帮助大家深入理解彻底掌握创作不易如果能帮助到大家或者给大家一些灵感和启发欢迎收藏关注哦 目录 DeepSeek 助力 Vue3 开发打造丝滑的悬浮按钮Floating Action Button前言页面效果指令输入属性定义1. 外观相关2. 位置相关3. 交互相关4. 动画相关 事件定义其他 think组件代码 代码测试测试代码正常跑通附其他基本代码编写路由 src\router\index.js编写展示入口 src\App.vue 页面效果相关文章 ️✍️️️️⚠️⬇️·正文开始⬇️·✅❓ 0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣*️⃣#️⃣
DeepSeek 助力 Vue3 开发打造丝滑的悬浮按钮Floating Action Button
前言
DeepSeek 作为大语言模型领域的杰出代表凭借其独特的技术优势、广泛的应用场景和卓越的市场表现在人工智能发展历程中留下了浓墨重彩的一笔。
从技术特点来看DeepSeek 融合了自然语言处理、机器学习与深度学习等前沿技术采用了创新的架构和训练方法如混合专家MoE架构和 FP8 混合精度训练技术在性能、成本等方面展现出了显著的优势。与其他大模型相比DeepSeek 在多项评测中表现出色性能可与顶级闭源模型媲美同时训练成本和推理成本大幅降低为大语言模型的发展提供了新的思路和方向。
页面效果 指令输入 已经创建好了一个基于Vue3的组合式API的项目(Composition API)并能正常运行起来请帮我用 Vue3的组合式API(Composition API) 生成一个 悬浮按钮Floating Action Button 的功能组件所有代码都保存在components/FloatingActionButton 下的文件夹中。功能组件的script标签中只有setup属性使用普通 JavaScript 实现,不使用TypeScript。 功能要有如下属性 属性定义
1. 外观相关
icon 说明设置悬浮按钮上显示的图标可以是图标库的类名或者 SVG 图标代码。类型字符串默认值空字符串 color 说明设置按钮的背景颜色。类型字符串CSS 颜色值默认值常见的主题色如 #007bff textColor 说明设置按钮内文字或图标的颜色。类型字符串CSS 颜色值默认值#fff size 说明设置按钮的大小如小、中、大。类型字符串可选值为 small、medium、large 等默认值medium shape 说明设置按钮的形状如圆形、方形等。类型字符串可选值为 circle、square 等默认值circle
2. 位置相关
position 说明设置按钮的悬浮位置如右下角、左下角等。类型字符串可选值为 bottom-right、bottom-left、top-right、top-left 等默认值bottom-right offsetX 说明按钮相对于默认位置在 X 轴上的偏移量。类型数字默认值0 offsetY 说明按钮相对于默认位置在 Y 轴上的偏移量。类型数字默认值0
3. 交互相关
disabled 说明设置按钮是否禁用。类型布尔值默认值false tooltip 说明设置鼠标悬停在按钮上时显示的提示信息。类型字符串默认值空字符串
4. 动画相关
animate 说明设置按钮是否开启动画效果如淡入淡出、缩放等。类型布尔值默认值true animationType 说明设置动画的类型。类型字符串可选值为 fade、scale 等默认值fade
事件定义
click 说明当按钮被点击时触发该事件可用于执行特定的操作如打开模态框、提交表单等。参数无 mouseenter 说明当鼠标进入按钮区域时触发该事件可用于显示提示信息或执行一些动画效果。参数无 mouseleave 说明当鼠标离开按钮区域时触发该事件可用于隐藏提示信息或恢复动画效果。参数无
其他
可访问性为按钮添加 aria-label 属性确保屏幕阅读器能够正确识别按钮的功能同时为按钮添加适当的焦点样式方便键盘操作。响应式设计考虑按钮在不同屏幕尺寸下的显示效果例如在小屏幕上调整按钮的大小和位置。动画优化合理设置动画的时长和缓动函数避免动画过于生硬或影响性能。嵌套使用支持在按钮内部嵌套其他组件如 Badge 组件以显示额外的信息。事件代理如果有多个悬浮按钮可以考虑使用事件代理来处理点击事件提高性能。
你有更好的建议也可以添加要注明。组件定义好后给出5个及以上的调用示例。 下面是现有目录 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/ │ │ ├── CopyToClipboard/ │ │ ├── ClickAnimations/ │ │ ├── ThumbnailList/ │ │ ├── KeyboardShortcuts/ │ │ ├── CommentSystem/ │ │ ├── QRCode/ │ │ ├── RadioButton/ │ │ ├── Slider/ │ │ ├── ScrollAnimations/ │ │ ├── TextInput/ │ │ ├── Divider/ │ │ ├── Checkbox/ │ │ ├── TagInput/ │ │ ├── DropdownSelect/ │ │ ├── List/ │ │ ├── Header/ │ │ ├── Footer/ │ │ ├── Pagination/ │ │ ├── FloatingActionButton/ │ │ ├── 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 │ │ ├── CopyToClipboardView.vue │ │ ├── ClickAnimationsView.vue │ │ ├── ThumbnailListView.vue │ │ ├── KeyboardShortcutsView.vue │ │ ├── CommentSystemView.vue │ │ ├── QRCodeView.vue │ │ ├── RadioButtonView.vue │ │ ├── SliderView.vue │ │ ├── ScrollAnimationsView.vue │ │ ├── TextInputView.vue │ │ ├── DividerView.vue │ │ ├── CheckboxView.vue │ │ ├── TagInputView.vue │ │ ├── DropdownSelectView.vue │ │ ├── ListView.vue │ │ ├── HeaderView.vue │ │ ├── FooterView.vue │ │ ├── PaginationView.vue │ │ ├── FloatingActionButtonView.vue │ │ ├── DatePickerView.vue │ │ └── AboutView.vue │ ├── App.vue # 根组件 │ └── main.js # 应用入口 ├── public/ # 公共资源目录 ├── index.html # HTML 模板 ├── package.json # 项目配置 ├── vite.config.js # Vite 配置 └── node_modules/ # 依赖包目录
think
组件代码
以下是按照您的要求创建的悬浮按钮组件
!-- src/components/FloatingActionButton/FloatingActionButton.vue --
templatebuttonclassfab:class[sizeClass,shapeClass,positionClass,animationClass,{ fab--disabled: disabled }]:style{backgroundColor: color,color: textColor,...positionStyles}:disableddisabled:aria-labelariaLabelclickhandleClickmouseenterhandleMouseEntermouseleavehandleMouseLeave!-- 图标显示 --div v-ifisSvg classfab-icon v-htmlicon/divi v-else-ificon classfab-icon :classicon/i!-- 默认插槽 --slot/slot!-- 工具提示 --span v-iftooltip classfab-tooltip{{ tooltip }}/span/button
/templatescript setup
import { computed } from vue;const props defineProps({// 外观相关icon: { type: String, default: },color: { type: String, default: #007bff },textColor: { type: String, default: #fff },size: { type: String, default: medium,validator: v [small, medium, large].includes(v)},shape: {type: String,default: circle,validator: v [circle, square].includes(v)},// 位置相关position: {type: String,default: bottom-right,validator: v [bottom-right, bottom-left, top-right, top-left].includes(v)},offsetX: { type: Number, default: 0 },offsetY: { type: Number, default: 0 },// 交互相关disabled: { type: Boolean, default: false },tooltip: { type: String, default: },// 动画相关animate: { type: Boolean, default: true },animationType: {type: String,default: fade,validator: v [fade, scale].includes(v)}
});const emit defineEmits([click, mouseenter, mouseleave]);// 计算属性
const isSvg computed(() props.icon.startsWith(svg));
const ariaLabel computed(() props.tooltip || Floating Action Button);// 样式类计算
const sizeClass computed(() fab--${props.size});
const shapeClass computed(() fab--${props.shape});
const positionClass computed(() fab--${props.position.replace(-, _)});
const animationClass computed(() props.animate ? fab--animate-${props.animationType} :
);// 位置样式计算
const positionStyles computed(() {const [vertical, horizontal] props.position.split(-);return {[vertical]: ${props.offsetY}px,[horizontal]: ${props.offsetX}px};
});// 事件处理
const handleClick (e) {if (!props.disabled) emit(click, e);
};
const handleMouseEnter (e) emit(mouseenter, e);
const handleMouseLeave (e) emit(mouseleave, e);
/scriptstyle scoped
.fab {position: fixed;display: flex;align-items: center;justify-content: center;border: none;cursor: pointer;transition: all 0.3s ease;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);z-index: 999;
}/* 尺寸 */
.fab--small {width: 40px;height: 40px;font-size: 16px;
}
.fab--medium {width: 56px;height: 56px;font-size: 24px;
}
.fab--large {width: 64px;height: 64px;font-size: 32px;
}/* 形状 */
.fab--circle { border-radius: 50%; }
.fab--square { border-radius: 8px; }/* 位置 */
.fab--bottom_right { bottom: 0; right: 0; }
.fab--bottom_left { bottom: 0; left: 0; }
.fab--top_right { top: 0; right: 0; }
.fab--top_left { top: 0; left: 0; }/* 动画 */
.fab--animate-fade { opacity: 0.9; }
.fab--animate-fade:hover { opacity: 1; }
.fab--animate-scale { transform: scale(1); }
.fab--animate-scale:hover { transform: scale(1.1); }/* 禁用状态 */
.fab--disabled {opacity: 0.6;cursor: not-allowed;filter: grayscale(0.5);
}/* 工具提示 */
.fab-tooltip {position: absolute;background: rgba(0, 0, 0, 0.8);color: white;padding: 6px 12px;border-radius: 4px;font-size: 12px;white-space: nowrap;pointer-events: none;opacity: 0;transition: opacity 0.2s;
}
.fab:hover .fab-tooltip {opacity: 1;
}
.fab--bottom_right .fab-tooltip { right: 100%; top: 50%; transform: translateY(-50%); margin-right: 8px; }
.fab--bottom_left .fab-tooltip { left: 100%; top: 50%; transform: translateY(-50%); margin-left: 8px; }
.fab--top_right .fab-tooltip { right: 100%; bottom: 50%; transform: translateY(50%); margin-right: 8px; }
.fab--top_left .fab-tooltip { left: 100%; bottom: 50%; transform: translateY(50%); margin-left: 8px; }/* 响应式 */
media (max-width: 768px) {.fab--medium {width: 48px;height: 48px;font-size: 20px;}
}
/style以下是5个调用示例
!-- 基本用法 --
FloatingActionButtoniconfas fa-plusclickhandleAdd
/!-- 自定义颜色和位置 --
FloatingActionButtoniconfas fa-sharecolor#4CAF50textColor#ffffffpositiontop-right:offsetX20:offsetY20
/!-- 方形大号按钮 --
FloatingActionButtoniconfas fa-downloadsizelargeshapesquaretooltip下载文件
/!-- 禁用状态 --
FloatingActionButtoniconfas fa-gear:disabledtrueanimation-typescale
/!-- SVG 图标 --
FloatingActionButton:iconsvg xmlns\http://www.w3.org/2000/svg\ viewBox\0 0 24 24\ width\24\ height\24\path fill\currentColor\ d\M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\//svgcolor#FF4081positionbottom-left
/改进建议
添加键盘导航支持通过添加tabindex和keydown事件处理增加涟漪点击动画效果支持自定义阴影样式添加点击波紋效果支持更多动画类型如rotate添加拖拽位置调整功能通过draggable prop控制支持响应式位置在不同屏幕尺寸下使用不同的位置
您可以根据实际需求选择是否添加这些改进功能。
代码测试 运行正常需要自己添加一个svg。 测试代码正常跑通附其他基本代码
添加路由页面展示入口
编写路由 src\router\index.js import { createRouter, createWebHistory } from vue-router
import RightClickMenuView from ../views/RightClickMenuView.vue
import RangePickerView from ../views/RangePickerView.vueconst 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)},{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)},{path: /copyToClipboard,name: copyToClipboard,component: () import(../views/CopyToClipboardView.vue)},{path: /clickAnimations,name: clickAnimations,component: () import(../views/ClickAnimationsView.vue)},{path: /thumbnailList,name: thumbnailList,component: () import(../views/ThumbnailListView.vue)},{path: /keyboardShortcuts,name: keyboardShortcuts,component: () import(../views/KeyboardShortcutsView.vue)},{path: /commentSystem,name: commentSystem,component: () import(../views/CommentSystemView.vue)},{path: /qRCode,name: qRCode,component: () import(../views/QRCodeView.vue)},{path: /radioButton,name: radioButton,component: () import(../views/RadioButtonView.vue)},{path: /slider,name: slider,component: () import(../views/SliderView.vue)},{path: /scrollAnimations,name: scrollAnimations,component: () import(../views/ScrollAnimationsView.vue)},{path: /textInputView,name: textInputView,component: () import(../views/TextInputView.vue)},{path: /divider,name: divider,component: () import(../views/DividerView.vue)},{path: /checkbox,name: checkbox,component: () import(../views/CheckboxView.vue)},{path: /tagInput,name: tagInput,component: () import(../views/TagInputView.vue)},{path: /dropdownSelect,name: dropdownSelect,component: () import(../views/DropdownSelectView.vue)},{path: /list,name: list,component: () import(../views/ListView.vue)},{path: /header,name: header,component: () import(../views/HeaderView.vue)},{path: /footer,name: footer,component: () import(../views/FooterView.vue)},{path: /pagination,name: pagination,component: () import(../views/PaginationView.vue)},{path: /floatingActionButton,name: floatingActionButton,component: () import(../views/FloatingActionButtonView.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/RouterLinkRouterLink to/colorPickerColorPicker/RouterLinkRouterLink to/rightClickMenuRightClickMenu/RouterLinkRouterLink to/rangePickerRangePicker/RouterLinkRouterLink to/navbarNavbar/RouterLinkRouterLink to/formValidationFormValidation/RouterLinkRouterLink to/copyToClipboardCopyToClipboard/RouterLinkRouterLink to/clickAnimationsClickAnimations/RouterLinkRouterLink to/thumbnailListThumbnailList/RouterLinkRouterLink to/keyboardShortcutsKeyboardShortcuts/RouterLinkRouterLink to/commentSystemCommentSystem/RouterLinkRouterLink to/qRCodeQRCode/RouterLinkRouterLink to/radioButtonRadioButton/RouterLinkRouterLink to/sliderSlider/RouterLinkRouterLink to/scrollAnimationsScrollAnimations/RouterLinkRouterLink to/textInputViewTextInput/RouterLinkRouterLink to/dividerDivider/RouterLinkRouterLink to/checkboxCheckbox/RouterLinkRouterLink to/tagInputTagInput/RouterLinkRouterLink to/dropdownSelectDropdownSelect/RouterLinkRouterLink to/listList/RouterLinkRouterLink to/headerHeader/RouterLinkRouterLink to/footerFooter/RouterLinkRouterLink to/paginationPagination/RouterLinkRouterLink to/floatingActionButtonFloatingActionButton/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 助力 Vue 开发打造丝滑的右键菜单RightClickMenuhttps://blog.csdn.net/qq_33650655/article/details/145706658 DeepSeek 助力 Vue 开发打造丝滑的范围选择器Range Pickerhttps://blog.csdn.net/qq_33650655/article/details/145713572 DeepSeek 助力 Vue 开发打造丝滑的导航栏Navbarhttps://blog.csdn.net/qq_33650655/article/details/145732421 DeepSeek 助力 Vue 开发打造丝滑的表单验证Form Validationhttps://blog.csdn.net/qq_33650655/article/details/145735582 DeepSeek 助力 Vue 开发打造丝滑的复制到剪贴板Copy to Clipboardhttps://blog.csdn.net/qq_33650655/article/details/145739569 DeepSeek 助力 Vue 开发打造丝滑的点击动画Click Animationshttps://blog.csdn.net/qq_33650655/article/details/145766184 DeepSeek 助力 Vue 开发打造丝滑的缩略图列表Thumbnail Listhttps://blog.csdn.net/qq_33650655/article/details/145776679 DeepSeek 助力 Vue 开发打造丝滑的 键盘快捷键Keyboard Shortcuts https://blog.csdn.net/qq_33650655/article/details/145780227 DeepSeek 助力 Vue 开发打造丝滑的评论系统Comment Systemhttps://blog.csdn.net/qq_33650655/article/details/145781104 DeepSeek 助力 Vue 开发打造丝滑的二维码生成QR Codehttps://blog.csdn.net/qq_33650655/article/details/145797928 DeepSeek 助力 Vue 开发打造丝滑的单选按钮Radio Buttonhttps://blog.csdn.net/qq_33650655/article/details/145810620 DeepSeek 助力 Vue 开发打造丝滑的滑块Sliderhttps://blog.csdn.net/qq_33650655/article/details/145817161 DeepSeek 助力 Vue 开发打造丝滑的滚动动画Scroll Animationshttps://blog.csdn.net/qq_33650655/article/details/145818571 DeepSeek 助力 Vue 开发打造丝滑的文本输入框Text Inputhttps://blog.csdn.net/qq_33650655/article/details/145837003 DeepSeek 助力 Vue 开发打造丝滑的分割线Dividerhttps://blog.csdn.net/qq_33650655/article/details/145849100 DeepSeek 助力 Vue 开发打造丝滑的 复选框Checkboxhttps://blog.csdn.net/qq_33650655/article/details/145855695 DeepSeek 助力 Vue3 开发打造丝滑的标签输入Tag Inputhttps://blog.csdn.net/qq_33650655/article/details/145858574 DeepSeek 助力 Vue3 开发打造丝滑的下拉选择框Dropdown Selecthttps://blog.csdn.net/qq_33650655/article/details/145861882 DeepSeek 助力 Vue3 开发打造丝滑的列表Listhttps://blog.csdn.net/qq_33650655/article/details/145866384 DeepSeek 助力 Vue3 开发打造丝滑的页眉Headerhttps://blog.csdn.net/qq_33650655/article/details/145885122 DeepSeek 助力 Vue3 开发打造丝滑的页脚Footerhttps://blog.csdn.net/qq_33650655/article/details/145886306 DeepSeek 助力 Vue3 开发打造丝滑的分页Paginationhttps://blog.csdn.net/qq_33650655/article/details/145886824 到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章创作不易如果能帮助到大家,希望大家多多支持宝码香车~若转载本文一定注明本文链接。 更多专栏订阅推荐 htmlcssjs 绚丽效果 vue ✈️ Electron ⭐️ js 字符串 ✍️ 时间对象Date()操作
