制作公司网站的步骤,平台设计方法,电商网站设计公司力推亿企邦,企业网络费用前言#xff1a;哈喽#xff0c;大家好#xff0c;今天给大家分享一篇文章#xff01;并提供具体代码帮助大家深入理解#xff0c;彻底掌握#xff01;创作不易#xff0c;如果能帮助到大家或者给大家一些灵感和启发#xff0c;欢迎收藏关注哦 #x1f495; 目录 Deep… 前言哈喽大家好今天给大家分享一篇文章并提供具体代码帮助大家深入理解彻底掌握创作不易如果能帮助到大家或者给大家一些灵感和启发欢迎收藏关注哦 目录 DeepSeek 助力 Vue3 开发打造丝滑的弹性布局Flexbox前言页面效果指令输入定义属性容器相关属性子元素相关属性 定义事件其他 think组件代码 代码测试测试代码正常跑通附其他基本代码编写路由 src\router\index.js编写展示入口 src\App.vue 页面效果相关文章 ️✍️️️️⚠️⬇️·正文开始⬇️·✅❓ 0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣*️⃣#️⃣
DeepSeek 助力 Vue3 开发打造丝滑的弹性布局Flexbox
前言
DeepSeek 的发展也面临着一些技术挑战如算力需求、数据质量和模型优化等问题。为了应对这些挑战DeepSeek 采取了一系列有效的措施如创新算法和架构设计、建立严格的数据治理体系、进行多方面的技术革新等展现出了强大的技术实力和创新能力。
页面效果 指令输入 已经创建好了一个基于Vue3的组合式API的项目(Composition API)并能正常运行起来请帮我用 Vue3的组合式API(Composition API) 生成一个 弹性布局Flexbox 的功能组件所有代码都保存在components/Flexbox 下的文件夹中。功能组件的script标签中只有setup属性使用普通 JavaScript 实现,不使用TypeScript。 功能要有如下属性 定义属性
容器相关属性 display 作用指定元素是否以弹性容器显示虽然默认是弹性布局但可以提供一个属性让用户选择是否开启。类型Boolean默认值true说明当设置为 false 时组件不使用弹性布局。 flexDirection 作用定义主轴的方向即子元素的排列方向。类型String可选值row、row-reverse、column、column-reverse默认值row flexWrap 作用定义子元素是否换行。类型String可选值nowrap、wrap、wrap-reverse默认值nowrap flexFlow 作用是 flexDirection 和 flexWrap 的缩写属性。类型String默认值undefined说明如果设置了 flexFlow则 flexDirection 和 flexWrap 的设置将被忽略。 justifyContent 作用定义子元素在主轴上的对齐方式。类型String可选值flex-start、flex-end、center、space-between、space-around、space-evenly默认值flex-start alignItems 作用定义子元素在交叉轴上的对齐方式。类型String可选值flex-start、flex-end、center、baseline、stretch默认值stretch alignContent 作用定义多根轴线的对齐方式如果子元素只有一根轴线该属性不起作用。类型String可选值flex-start、flex-end、center、space-between、space-around、stretch默认值stretch
子元素相关属性 gap 作用定义子元素之间的间距。类型String默认值0 inline 作用指定弹性容器是否为行内元素。类型Boolean默认值false
定义事件 resize 作用当弹性容器大小改变时触发可用于在容器大小变化时进行一些额外的处理比如重新计算子元素的布局。参数{ width: number, height: number }表示容器的新宽度和高度。 childAdded 作用当有新的子元素添加到弹性容器时触发可用于在子元素添加后进行一些初始化操作。参数HTMLElement表示新添加的子元素。 childRemoved 作用当有子元素从弹性容器中移除时触发可用于在子元素移除后进行一些清理操作。参数HTMLElement表示被移除的子元素。
其他
提供插槽使用 Vue 的插槽机制允许用户将任意内容插入到弹性容器中增加组件的灵活性。样式隔离确保组件的样式不会影响到外部的其他元素同时也不会被外部样式影响可以使用 CSS 作用域或者 CSS Modules。响应式设计考虑结合媒体查询或者 Vue 的响应式数据让弹性布局在不同的屏幕尺寸下有不同的表现。文档和示例编写详细的文档说明每个属性和事件的作用并提供一些使用示例方便其他开发者使用该组件。
你有更好的建议也可以添加要注明。组件定义好后给出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/ │ │ ├── PasswordInput/ │ │ ├── GridLayout/ │ │ ├── Flexbox/ │ │ ├── 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 │ │ ├── PasswordInputView.vue │ │ ├── FlexboxView.vue │ │ ├── DatePickerView.vue │ │ └── AboutView.vue │ ├── App.vue # 根组件 │ └── main.js # 应用入口 ├── public/ # 公共资源目录 ├── index.html # HTML 模板 ├── package.json # 项目配置 ├── vite.config.js # Vite 配置 └── node_modules/ # 依赖包目录
think
组件代码
我将为您创建一个功能完整的Flexbox组件并提供使用示例。以下是组件的实现方案
!-- components/Flexbox/FlexContainer.vue --
templatedivrefcontainerRefclassflex-container:stylecontainerStylesslotchangehandleSlotChangeslot/slot/div
/templatescript setup
import { ref, computed, onMounted, onUnmounted } from vueconst props defineProps({display: {type: Boolean,default: true},flexDirection: {type: String,default: row,validator: (value) [row,row-reverse,column,column-reverse].includes(value)},flexWrap: {type: String,default: nowrap,validator: (value) [nowrap, wrap, wrap-reverse].includes(value)},flexFlow: String,justifyContent: {type: String,default: flex-start,validator: (value) [flex-start,flex-end,center,space-between,space-around,space-evenly].includes(value)},alignItems: {type: String,default: stretch,validator: (value) [flex-start,flex-end,center,baseline,stretch].includes(value)},alignContent: {type: String,default: stretch,validator: (value) [flex-start,flex-end,center,space-between,space-around,stretch].includes(value)},gap: {type: String,default: 0},inline: {type: Boolean,default: false}
})const emit defineEmits([resize, childAdded, childRemoved])const containerRef ref(null)
let resizeObserver null
let mutationObserver nullconst containerStyles computed(() {const styles {gap: props.gap,justifyContent: props.justifyContent,alignItems: props.alignItems,alignContent: props.alignContent}if (props.display) {styles.display props.inline ? inline-flex : flexstyles.flexFlow props.flexFlow ? props.flexFlow : ${props.flexDirection} ${props.flexWrap}} else {styles.display props.inline ? inline-block : block}return styles
})const handleResize (entries) {for (const entry of entries) {const { width, height } entry.contentRectemit(resize, { width, height })}
}const handleMutation (mutations) {for (const mutation of mutations) {mutation.addedNodes.forEach(node {if (node.nodeType Node.ELEMENT_NODE) {emit(childAdded, node)}})mutation.removedNodes.forEach(node {if (node.nodeType Node.ELEMENT_NODE) {emit(childRemoved, node)}})}
}onMounted(() {// 初始化ResizeObserverresizeObserver new ResizeObserver(handleResize)if (containerRef.value) {resizeObserver.observe(containerRef.value)}// 初始化MutationObservermutationObserver new MutationObserver(handleMutation)mutationObserver.observe(containerRef.value, {childList: true,subtree: false})
})onUnmounted(() {resizeObserver?.disconnect()mutationObserver?.disconnect()
})
/scriptstyle scoped
.flex-container {width: 100%;min-height: 50px;box-sizing: border-box;
}
/style以下是5个使用示例
!-- 示例1: 基本行布局 --
templateFlexContainerdiv v-forn in 3 :keyn classboxItem {{ n }}/div/FlexContainer
/templatescript setup
import FlexContainer from /components/Flexbox/FlexContainer.vue
/scriptstyle
.box {padding: 20px;background: #eee;margin: 5px;
}
/style!-- 示例2: 列布局居中 --
templateFlexContainer flex-directioncolumnjustify-contentcenteralign-itemscentergap10pxstyleheight: 300px; border: 1px solid #ccc;div v-forn in 3 :keyn classboxItem {{ n }}/div/FlexContainer
/template!-- 示例3: 换行布局 --
templateFlexContainerflex-wrapwrapgap20pxresizehandleResizediv v-forn in 8 :keyn stylewidth: 200px classboxItem {{ n }}/div/FlexContainer
/templatescript setup
const handleResize (size) {console.log(Container size changed:, size)
}
/script!-- 示例4: 响应式布局 --
templateFlexContainer:flex-directionisMobile ? column : row:gapisMobile ? 10px : 20pxdiv v-forn in 4 :keyn classboxItem {{ n }}/div/FlexContainer
/templatescript setup
import { ref, onMounted, onUnmounted } from vueconst isMobile ref(false)const checkMobile () {isMobile.value window.innerWidth 768
}onMounted(() {window.addEventListener(resize, checkMobile)checkMobile()
})onUnmounted(() {window.removeEventListener(resize, checkMobile)
})
/script!-- 示例5: 事件处理 --
templateFlexContainerchild-addedhandleChildAddedchild-removedhandleChildRemovedresizehandleResizestyleborder: 1px solid #ddd; padding: 10px;div v-foritem in items :keyitem classbox{{ item }}/div/FlexContainerbutton clickaddItemAdd Item/buttonbutton clickremoveItemRemove Item/button
/templatescript setup
import { ref } from vueconst items ref([A, B, C])const addItem () {items.value.push(String.fromCharCode(65 items.value.length))
}const removeItem () {if (items.value.length 0) {items.value.pop()}
}const handleChildAdded (element) {console.log(Child added:, element)element.style.backgroundColor #e3f2fd
}const handleChildRemoved (element) {console.log(Child removed:, element)
}const handleResize ({ width, height }) {console.log(New container size: ${width}x${height})
}
/script优化建议
性能优化添加防抖处理resize事件可访问性添加ARIA属性边界处理处理无效属性值扩展性添加子元素order/flex属性支持调试支持开发模式下显示布局轮廓
组件特点
完整的Flexbox属性支持响应式尺寸监控子元素变化追踪样式隔离类型验证完善的文档支持灵活的事件处理良好的浏览器兼容性
使用时可以根据需要添加自定义样式组件会自动处理布局逻辑。事件系统可以帮助实现动态布局调整和动画效果。
代码测试 运行正常 测试代码正常跑通附其他基本代码
添加路由页面展示入口
编写路由 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)},{path: /passwordInput,name: passwordInput,component: () import(../views/PasswordInputView.vue)},{path: /flexbox,name: flexbox,component: () import(../views/FlexboxView.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/RouterLinkRouterLink to/passwordInputPasswordInput/RouterLinkRouterLink to/flexboxFlexbox/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 DeepSeek 助力 Vue3 开发打造丝滑的网格布局Grid Layouthttps://blog.csdn.net/qq_33650655/article/details/145893422 DeepSeek 助力 Vue3 开发打造丝滑的密码输入框Password Inputhttps://blog.csdn.net/qq_33650655/article/details/145903079 到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章创作不易如果能帮助到大家,希望大家多多支持宝码香车~若转载本文一定注明本文链接。 更多专栏订阅推荐 htmlcssjs 绚丽效果 vue ✈️ Electron ⭐️ js 字符串 ✍️ 时间对象Date()操作
