商务网站建设实训报告1600字,电商erp网站开发,建设门户网站的重要性,影视网站设计前言#xff1a;哈喽#xff0c;大家好#xff0c;今天给大家分享一篇文章#xff01;并提供具体代码帮助大家深入理解#xff0c;彻底掌握#xff01;创作不易#xff0c;如果能帮助到大家或者给大家一些灵感和启发#xff0c;欢迎收藏关注哦 #x1f495; 目录 Deep… 前言哈喽大家好今天给大家分享一篇文章并提供具体代码帮助大家深入理解彻底掌握创作不易如果能帮助到大家或者给大家一些灵感和启发欢迎收藏关注哦 目录 DeepSeek 助力 Vue3 开发打造丝滑的网格布局Grid Layout前言页面效果指令输入属性定义1. 布局相关属性2. 响应式属性3. 样式属性 事件定义1. 交互事件 其他1. 插槽使用2. 响应式设计3. 可访问性4. 文档和示例 think组件代码 代码测试整理后主要代码调用 \src\views\FloatingActionButtonView.vue 测试代码正常跑通附其他基本代码编写路由 src\router\index.js编写展示入口 src\App.vue 页面效果相关文章 ️✍️️️️⚠️⬇️·正文开始⬇️·✅❓ 0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣*️⃣#️⃣
DeepSeek 助力 Vue3 开发打造丝滑的网格布局Grid Layout
前言
在应用方面DeepSeek 已广泛渗透到金融、公募基金、电信、汽车等多个行业为各行业的数字化转型和智能化升级提供了强大的支持。在金融领域DeepSeek 帮助银行实现智能合同质检、信贷风控和自动化估值对账等功能有效提升了业务效率和风险防范能力在公募基金行业DeepSeek 助力基金公司提升投资研究、产品销售和风控合规等业务的效率和质量为投资者提供更优质的服务。
页面效果 指令输入 已经创建好了一个基于Vue3的组合式API的项目(Composition API)并能正常运行起来请帮我用 Vue3的组合式API(Composition API) 生成一个 网格布局Grid Layout 的功能组件所有代码都保存在components/GridLayout 下的文件夹中。功能组件的script标签中只有setup属性使用普通 JavaScript 实现,不使用TypeScript。 功能要有如下属性 属性定义
1. 布局相关属性
columns 类型Number | String描述定义网格的列数。可以是具体的数字也可以是如 1fr 2fr 这样的 CSS 网格列模板定义。 rows 类型Number | String描述定义网格的行数。同样可以是具体数字或 CSS 网格行模板定义。 column-gap 类型String描述列与列之间的间距值为 CSS 长度单位如 10px、1em 等。 row-gap 类型String描述行与行之间的间距值为 CSS 长度单位。 gap 类型String描述统一设置行和列的间距是 column-gap 和 row-gap 的简写。 justify-content 类型String描述定义网格项在水平方向的对齐方式可选值有 start、end、center、space-between 等。 align-content 类型String描述定义网格项在垂直方向的对齐方式可选值有 start、end、center、space-between 等。 justify-items 类型String描述定义网格内每个项目在水平方向的对齐方式可选值有 start、end、center 等。 align-items 类型String描述定义网格内每个项目在垂直方向的对齐方式可选值有 start、end、center 等。
2. 响应式属性
breakpoints 类型Object描述用于响应式布局根据不同的屏幕宽度调整网格的列数、间距等属性。例如{ sm: 2, md: 3, lg: 4 } 表示在小屏幕时显示 2 列中屏幕显示 3 列大屏幕显示 4 列。
3. 样式属性
class 类型String | Array | Object描述为网格容器添加额外的 CSS 类名方便自定义样式。 style 类型String | Object描述为网格容器添加内联样式。
事件定义
1. 交互事件
click 描述当网格容器被点击时触发。 mouseenter 描述鼠标进入网格容器时触发。 mouseleave 描述鼠标离开网格容器时触发。
其他
1. 插槽使用
提供默认插槽允许用户在网格内放置任意内容。可以考虑提供具名插槽用于特殊位置的内容放置如网格的头部、底部等。
2. 响应式设计
结合 Vue 3 的响应式原理根据 breakpoints 属性动态调整网格布局。可以使用 media 查询或第三方库如 vueuse 中的响应式工具来实现响应式效果。
3. 可访问性
确保网格布局在不同设备和浏览器上都有良好的可访问性遵循 WCAG 标准。为网格容器和网格项添加适当的 ARIA 属性提高屏幕阅读器的支持。
4. 文档和示例
提供详细的文档说明每个属性和事件的使用方法。提供多个示例展示不同场景下的网格布局效果方便用户快速上手。
你有更好的建议也可以添加要注明。组件定义好后给出5个及以上的调用示例示例中添加完整的数据和事件确保每个示例是独立的。 下面是现有目录 DeepSeekAndVue/ ├── 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/ │ │ ├── GridLayout/ │ │ ├── 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 │ │ ├── GridLayoutView.vue │ │ ├── DatePickerView.vue │ │ └── AboutView.vue │ ├── App.vue # 根组件 │ └── main.js # 应用入口 ├── public/ # 公共资源目录 ├── index.html # HTML 模板 ├── package.json # 项目配置 ├── vite.config.js # Vite 配置 └── node_modules/ # 依赖包目录
think
组件代码
代码测试 报错 ui报错 D:/phpstudy_pro/WWW/vues/DeepSeekAndVue/src/views/GridLayoutView.vue:63:22
61 |
62 | template v-for(card, index) in cards
63 | CardComponent :keyindex :datacard /| ^
64 | /template
65 | template #footer控制台报错 index.js:208 GET http://localhost:5173/src/views/GridLayoutView.vue net::ERR_ABORTED 500 (Internal Server Error)
component index.js:208
extractComponentsGuards vue-router.js?vc715b44f:1464
匿名 vue-router.js?vc715b44f:2483
Promise.then异步
navigate vue-router.js?vc715b44f:2481
pushWithRedirect vue-router.js?vc715b44f:2384
push vue-router.js?vc715b44f:2320
navigate vue-router.js?vc715b44f:1549
callWithErrorHandling chunk-U3LI7FBV.js?vc715b44f:2263
callWithAsyncErrorHandling chunk-U3LI7FBV.js?vc715b44f:2270
invoker chunk-U3LI7FBV.js?vc715b44f:11202
显示另外 9 个框架
收起
vue-router.js?vc715b44f:48 [Vue Router warn]: uncaught error during route navigation:
warn vue-router.js?vc715b44f:48
triggerError vue-router.js?vc715b44f:2610
匿名 vue-router.js?vc715b44f:2393
Promise.catch异步
pushWithRedirect vue-router.js?vc715b44f:2384
push vue-router.js?vc715b44f:2320
navigate vue-router.js?vc715b44f:1549
callWithErrorHandling chunk-U3LI7FBV.js?vc715b44f:2263
callWithAsyncErrorHandling chunk-U3LI7FBV.js?vc715b44f:2270
invoker chunk-U3LI7FBV.js?vc715b44f:11202
显示另外 9 个框架
收起
vue-router.js?vc715b44f:2612 TypeError: Failed to fetch dynamically imported module: http://localhost:5173/src/views/GridLayoutView.vue原因需要添数据。没有数据导致。在 上添加 key 属性确保在 v-for 循环中为每个元素提供唯一的 key以帮助 Vue 更好地跟踪元素。 整理后主要代码
调用 \src\views\FloatingActionButtonView.vue
script setup
import { ref } from vue
import FloatingActionButton from /components/FloatingActionButton/FloatingActionButton.vue// 示例 5: 使用自定义 SVG 图标
const icon5 ref(svg xmlnshttp://www.w3.org/2000/svg width20 height17 fillcurrentColorpathdM11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z//svg)/scripttemplatediv classbutton-containerh21. 基本用法/h2FloatingActionButtoniconfas fa-pluspositiontop-right:offsetX20:offsetY120click() console.log(Button 1 clicked!)/!-- 自定义颜色和位置 --h22. 自定义颜色和位置/h2FloatingActionButtoniconfas fa-sharecolor#4CAF50textColor#ffffffpositiontop-right:offsetX20:offsetY220/h23. 方形大号按钮/h2FloatingActionButtoniconfas fa-downloadsizelargeshapesquaretooltip下载文件positiontop-right:offsetX20:offsetY320/h24. 禁用状态/h2!-- 禁用状态 --FloatingActionButtoniconfas fa-gear:disabledtrueanimation-typescalepositiontop-right:offsetX20:offsetY420/h25. SVG 图标 /h2FloatingActionButton:iconicon5color#17a2b8textColor#ffftext 5positiontop-right:offsetX20:offsetY520sizesmallclick() console.log(Button 5 clicked!)//div
/templatestyle scoped
.button-container {position: relative; /* 使容器成为定位上下文 */
}h2 {margin-top: 0; /* 移除标题顶部的默认间距 */
}/* 绝对定位按钮 */
.fab {position: absolute; /* 绝对定位 */bottom: 20px; /* 距离底部20px */right: 20px; /* 距离右侧20px */
}
/style测试代码正常跑通附其他基本代码
添加路由页面展示入口
编写路由 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)},{path: /gridLayout,name: gridLayout,component: () import(../views/GridLayoutView.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/RouterLinkRouterLink to/gridLayoutGridLayout/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 DeepSeek 助力 Vue3 开发打造丝滑的悬浮按钮Floating Action Button https://blog.csdn.net/qq_33650655/article/details/145888339 到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章创作不易如果能帮助到大家,希望大家多多支持宝码香车~若转载本文一定注明本文链接。 更多专栏订阅推荐 htmlcssjs 绚丽效果 vue ✈️ Electron ⭐️ js 字符串 ✍️ 时间对象Date()操作