中文域名.网站,做商城网站都需要什么,seo技术培训沈阳,抖音怎么推广引流前言#xff1a;哈喽#xff0c;大家好#xff0c;今天给大家分享一篇文章#xff01;并提供具体代码帮助大家深入理解#xff0c;彻底掌握#xff01;创作不易#xff0c;如果能帮助到大家或者给大家一些灵感和启发#xff0c;欢迎收藏关注哦 #x1f495; 目录 Deep… 前言哈喽大家好今天给大家分享一篇文章并提供具体代码帮助大家深入理解彻底掌握创作不易如果能帮助到大家或者给大家一些灵感和启发欢迎收藏关注哦 目录 DeepSeek 助力 Vue 开发打造丝滑的点击动画Click Animations前言页面效果指令输入属性定义1. 动画类型相关属性2. 样式相关属性3. 动画次数和循环相关属性4. 状态控制属性 事件定义1. 动画开始事件2. 动画结束事件3. 点击事件 其他1. 兼容性处理2. 文档和示例3. 性能优化4. 可扩展性5. 错误处理 think组件代码 代码测试整理后主要代码定义组件 src\components\ClickAnimations\ClickAnimations.vue调用 src\views\ClickAnimationsView.vue 为测试代码正常跑通附其他基本代码编写路由 src\router\index.js编写展示入口 src\App.vue 页面效果 ️✍️️️️⚠️⬇️·正文开始⬇️·✅❓ 0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣*️⃣#️⃣
DeepSeek 助力 Vue 开发打造丝滑的点击动画Click Animations
前言
在社交媒体和各类技术论坛上用户对 DeepSeek 的评价如潮水般涌来其中不乏对其强大功能和出色表现的高度赞誉。许多用户分享了自己使用 DeepSeek 解决实际问题的案例这些案例生动地展现了 DeepSeek 在不同领域的应用价值。
在学术研究领域一位生物学博士分享了他的经历。他在研究一种罕见疾病的发病机制时需要查阅大量的文献资料。以往他需要花费数周的时间在海量的学术论文中筛选和整理信息而这次他借助 DeepSeek仅用了几天的时间就完成了这项工作。DeepSeek 不仅能够快速准确地理解论文的内容还能根据他的研究需求提供相关的研究思路和建议。例如在分析一篇关于基因调控的论文时DeepSeek 能够指出论文中尚未深入探讨的潜在研究方向为他的研究提供了新的灵感。他感慨地说“DeepSeek 就像是我的学术助手大大提高了我的研究效率让我能够更专注于实验和数据分析。”
页面效果 指令输入 已经创建好了一个基于Vue3的组合式API的项目(Composition API)并能正常运行起来请帮我用 Vue3的组合式API(Composition API) 生成一个 点击动画Click Animations 的功能组件所有代码都保存在components/ClickAnimations 下的文件夹中。功能组件的script标签中只有setup属性使用普通 JavaScript 实现,不使用TypeScript。 功能要有如下属性 属性定义
1. 动画类型相关属性
animationType指定点击时触发的动画类型如 fade淡入淡出、scale缩放、slide滑动等。可以使用字符串类型方便后续扩展更多动画类型。animationDuration动画持续的时间单位可以是毫秒ms。使用数字类型让用户可以自定义动画的快慢。animationDelay动画开始前的延迟时间单位同样为毫秒ms。用户可以根据需要设置动画触发的时机。
2. 样式相关属性
targetElement指定要应用动画的目标元素。可以是一个选择器字符串如 .my-element或者直接传入 DOM 元素的引用这样可以灵活地对不同元素应用动画。customClass允许用户传入自定义的 CSS 类名用于覆盖或扩展默认的动画样式。使用字符串类型。
3. 动画次数和循环相关属性
animationIterationCount动画播放的次数。可以是一个具体的数字也可以设置为 infinite 表示无限循环。使用字符串或数字类型。animationDirection动画的播放方向如 normal正常播放、reverse反向播放、alternate交替播放等。使用字符串类型。
4. 状态控制属性
disabled布尔类型用于控制组件是否禁用点击动画。当设置为 true 时点击事件不会触发动画。
事件定义
1. 动画开始事件
animation-start当动画开始播放时触发用户可以在这个事件中执行一些额外的操作如记录日志、更新状态等。
2. 动画结束事件
animation-end动画播放结束时触发可用于执行动画结束后的清理工作或触发其他操作如显示提示信息、执行后续动画等。
3. 点击事件
click除了触发动画外保留原生的点击事件方便用户在点击时执行其他业务逻辑。
其他
1. 兼容性处理
考虑不同浏览器对 CSS 动画的支持情况提供必要的前缀或备用方案确保动画在各种环境下都能正常显示。
2. 文档和示例
为组件编写详细的文档包括属性和事件的使用说明、示例代码等方便其他开发者快速上手。
3. 性能优化
避免在动画过程中频繁操作 DOM尽量使用 CSS 动画来实现以提高性能。
4. 可扩展性
设计组件时考虑未来的扩展性例如支持更多的动画效果和自定义配置选项方便后续功能的添加。
5. 错误处理
对传入的属性进行验证当用户传入不合法的值时给出明确的错误提示帮助用户快速定位问题。
你有更好的建议也可以添加要注明。组件定义好后给出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/ │ │ ├── ColorPicker/ │ │ ├── RightClickMenu/ │ │ ├── RangePicker/ │ │ ├── Navbar/ │ │ ├── FormValidation/ │ │ ├── CopyToClipboard/ │ │ ├── ClickAnimations/ │ │ ├── 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 │ │ ├── DatePickerView.vue │ │ └── AboutView.vue │ ├── App.vue # 根组件 │ └── main.js # 应用入口 ├── public/ # 公共资源目录 ├── index.html # HTML 模板 ├── package.json # 项目配置 ├── vite.config.js # Vite 配置 └── node_modules/ # 依赖包目录
think
好的我需要帮助用户创建一个基于Vue3组合式API的点击动画组件。用户已经有一个项目结构组件需要放在components/ClickAnimations文件夹下。首先我得理解用户的需求然后逐步实现每个功能点。
首先属性定义部分。动画类型、持续时间、延迟这些都需要作为props接收。目标元素可以是选择器字符串或DOM元素这里可能需要用ref来引用。自定义类名用于样式覆盖需要考虑如何合并到动画类中。动画次数和方向这些属性需要应用到CSS动画属性上。禁用状态需要控制点击事件是否触发。
事件方面要处理动画开始、结束以及点击事件。需要在这些时机触发相应的事件比如在动画开始时emit(‘animation-start’)。同时要确保原生点击事件仍然可用。
兼容性方面可能需要自动添加浏览器前缀比如使用autoprefixer或者在代码中动态检测。不过用户提到使用普通JavaScript所以可能在组件内部处理或者依赖现有的CSS处理工具。
性能优化方面用户强调使用CSS动画避免频繁操作DOM。所以应该通过添加/移除CSS类来触发动画而不是用JS操作样式。
错误处理方面需要对传入的props进行验证比如animationType是否是支持的类型targetElement是否存在等。如果用户传入了无效的值需要给出警告。
接下来组件结构。使用script setup语法没有模板所以需要返回渲染函数。不过用户可能希望用单文件组件所以还是需要写template部分。可能我之前误解了用户可能希望组件包含templatescript setup和style。
然后组件逻辑。当点击触发时如果禁用则不处理。否则找到目标元素应用动画类设置持续时间和延迟等。需要监听动画开始和结束事件以便触发用户的事件并在结束后清理动画类。
动态生成CSS动画可能需要根据不同的animationType来定义不同的关键帧。这部分可能需要预先定义好CSS类比如.fade-animation.scale-animation等然后在组件中根据类型添加对应的类。
关于目标元素的选择如果传入的是字符串选择器需要用document.querySelector来获取元素如果是DOM元素引用则直接使用。需要注意元素是否存在否则抛出错误。
调用示例部分用户需要三个例子。比如基本用法自定义类和目标元素以及禁用状态。每个示例展示不同的props配置帮助用户理解如何使用。
现在需要编写代码。首先组件的props定义使用Vue的defineProps函数。然后处理点击事件应用动画触发事件。在动画结束后移除动画类避免重复应用。
样式部分需要在组件的style标签中定义默认的动画关键帧比如fade、scale、slide等。同时处理自定义类名可能将默认类和自定义类合并。
可能遇到的问题如何动态添加和移除动画类同时处理多个动画属性。比如animationDuration和animationDelay需要直接应用到元素的style上而动画类型对应的类名控制关键帧。
另外浏览器兼容性可能需要为CSS属性添加前缀比如-webkit-animation。不过现代浏览器可能不需要但为了兼容可以在代码中动态添加或者在构建工具中处理。
最后文档和示例需要详细说明每个属性和事件的用法以及注意事项比如目标元素的存在性检查。
现在开始编写组件代码。结构如下
在ClickAnimations文件夹下创建ClickAnimations.vue文件。包含template、script setup和style。
script setup部分 定义props包括所有提到的属性。 处理点击事件检查disabled状态。 获取目标元素应用动画类设置style属性duration, delay, iterationCount, direction。 监听animationstart和animationend事件触发相应emit并在结束时清理类和样式。
template部分 包裹一个div监听点击事件使用$attrs传递其他属性。 插槽允许用户自定义内容。
style部分 定义默认的动画关键帧如fade、scale、slide。 定义对应的动画类如.fade-animation等。
调用示例
在ClickAnimationsView.vue中引入组件并提供不同的props配置展示不同效果。
测试各个属性是否生效比如动画类型、持续时间、禁用状态等。
错误处理方面在获取targetElement时如果找不到元素console.warn提示用户。
性能方面确保动画使用CSS避免重绘和回流。
最后编写文档说明每个属性和事件以及示例代码。
组件代码
下面按照要求创建点击动画组件并附上调用示例
components/ClickAnimations/ClickAnimations.vue
templatediv clickhandleClick v-bind$attrsslot/slot/div
/templatescript setup
import { ref, onMounted } from vueconst emit defineEmits([animation-start, animation-end, click])const props defineProps({animationType: {type: String,default: fade,validator: (value) [fade, scale, slide].includes(value)},animationDuration: {type: Number,default: 300},animationDelay: {type: Number,default: 0},targetElement: {type: [String, Object],required: true},customClass: {type: String,default: },animationIterationCount: {type: [Number, String],default: 1},animationDirection: {type: String,default: normal,validator: (value) [normal, reverse, alternate, alternate-reverse].includes(value)},disabled: {type: Boolean,default: false}
})let targetEl ref(null)onMounted(() {if (typeof props.targetElement string) {targetEl.value document.querySelector(props.targetElement)} else {targetEl.value props.targetElement}if (!targetEl.value) {console.warn(ClickAnimations: Target element not found)}
})const handleClick (e) {if (props.disabled || !targetEl.value) return// 触发原生点击事件emit(click, e)// 清除旧动画targetEl.value.style.animation void targetEl.value.offsetWidth // 触发重绘// 应用动画样式targetEl.value.classList.add(${props.animationType}-animation, props.customClass)targetEl.value.style.animationDuration ${props.animationDuration}mstargetEl.value.style.animationDelay ${props.animationDelay}mstargetEl.value.style.animationIterationCount props.animationIterationCounttargetEl.value.style.animationDirection props.animationDirection// 处理动画事件const handleAnimationStart (e) {if (e.target targetEl.value) {emit(animation-start, e)}}const handleAnimationEnd (e) {if (e.target targetEl.value) {targetEl.value.classList.remove(${props.animationType}-animation, props.customClass)targetEl.value.style.animation emit(animation-end, e)removeListeners()}}const removeListeners () {targetEl.value.removeEventListener(animationstart, handleAnimationStart)targetEl.value.removeEventListener(animationend, handleAnimationEnd)}targetEl.value.addEventListener(animationstart, handleAnimationStart)targetEl.value.addEventListener(animationend, handleAnimationEnd)
}
/scriptstyle
/* 默认动画样式 */
.fade-animation {animation-name: fade;
}.scale-animation {animation-name: scale;
}.slide-animation {animation-name: slide;
}keyframes fade {0% { opacity: 1; }50% { opacity: 0.3; }100% { opacity: 1; }
}keyframes scale {0% { transform: scale(1); }50% { transform: scale(1.2); }100% { transform: scale(1); }
}keyframes slide {0% { transform: translateX(0); }25% { transform: translateX(10px); }75% { transform: translateX(-10px); }100% { transform: translateX(0); }
}/* 浏览器兼容性前缀 */
-webkit-keyframes fade { /* ...相同的关键帧内容... */ }
-webkit-keyframes scale { /* ...相同的关键帧内容... */ }
-webkit-keyframes slide { /* ...相同的关键帧内容... */ }
/style调用示例 1 - 基本使用在 ClickAnimationsView.vue 中
templateClickAnimations target-element.boxanimation-startlog(Animation started)animation-endlog(Animation ended)button点击触发动画/buttondiv classbox这个元素会有渐变动画/div/ClickAnimations
/templatescript setup
import ClickAnimations from /components/ClickAnimations/ClickAnimations.vueconst log (msg) console.log(msg)
/scriptstyle
.box {width: 200px;height: 200px;background: #42b983;margin: 20px;
}
/style调用示例 2 - 自定义动画参数在 ClickAnimationsView.vue 中
templateClickAnimations:target-elementtargetElanimation-typescale:animation-duration500:animation-delay100animation-iteration-countinfinitecustom-classmy-custom-animationbutton点击触发缩放动画/buttondiv reftargetEl classcircle/div/ClickAnimations
/templatescript setup
import { ref } from vue
import ClickAnimations from /components/ClickAnimations/ClickAnimations.vueconst targetEl ref(null)
/scriptstyle
.circle {width: 100px;height: 100px;border-radius: 50%;background: #ff6b6b;margin: 20px;
}.my-custom-animation {animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
/style调用示例 3 - 禁用状态在 ClickAnimationsView.vue 中
templateClickAnimationstarget-element.disabled-box:disabledtruebutton已禁用点击动画/buttondiv classdisabled-box/div/ClickAnimations
/templatestyle
.disabled-box {width: 150px;height: 150px;background: #4dabf7;
}
/style组件特性说明
自动处理浏览器前缀兼容现代浏览器动画结束后自动清理样式支持通过选择器或直接传递DOM引用两种方式指定目标元素内置三种基础动画类型fade/scale/slide完善的属性验证和错误提示性能优化使用纯CSS动画避免强制同步布局
扩展建议
可以添加animation-fill-mode属性支持可以增加更多预设动画类型如rotate、bounce等可以添加点击涟漪效果作为补充动画可以支持多个元素同时触发动画可以添加动画组合功能多个动画同时运行
代码测试 略微调整了一下 整理后主要代码
定义组件 src\components\ClickAnimations\ClickAnimations.vue
templatediv clickhandleClick v-bind$attrsslot/slot/div
/templatescript setup
import { ref, onMounted, onUnmounted } from vueconst emit defineEmits([animation-start, animation-end, click])const props defineProps({// 动画类型fade, scale, slideanimationType: {type: String,default: fade,validator: (value) [fade, scale, slide].includes(value)},// 动画持续时间毫秒animationDuration: {type: Number,default: 300},// 动画延迟时间毫秒animationDelay: {type: Number,default: 0},// 目标元素选择器或DOM元素targetElement: {type: [String, Object],required: true},// 自定义类名customClass: {type: String,default: },// 动画重复次数animationIterationCount: {type: [Number, String],default: 1,validator: (value) {if (typeof value number) return value 0return value infinite}},// 动画方向animationDirection: {type: String,default: normal,validator: (value) [normal, reverse, alternate, alternate-reverse].includes(value)},// 是否禁用disabled: {type: Boolean,default: false}
})// 目标元素引用
const targetEl ref(null)// 在组件挂载时获取目标元素
onMounted(() {if (typeof props.targetElement string) {targetEl.value document.querySelector(props.targetElement)} else {targetEl.value props.targetElement}if (!targetEl.value) {console.warn(ClickAnimations: Target element not found)}
})// 处理点击事件
const handleClick (e) {if (props.disabled || !targetEl.value) return// 触发原生点击事件emit(click, e)// 清除旧动画targetEl.value.style.animation void targetEl.value.offsetWidth // 触发重绘// 准备要添加的类名const classes [${props.animationType}-animation]if (props.customClass) {classes.push(props.customClass)}// 应用动画样式targetEl.value.classList.add(...classes)targetEl.value.style.animationDuration ${props.animationDuration}mstargetEl.value.style.animationDelay ${props.animationDelay}mstargetEl.value.style.animationIterationCount props.animationIterationCounttargetEl.value.style.animationDirection props.animationDirection// 处理动画开始事件const handleAnimationStart (e) {if (e.target targetEl.value) {emit(animation-start, e)}}// 处理动画结束事件const handleAnimationEnd (e) {if (e.target targetEl.value) {// 移除动画类和样式targetEl.value.classList.remove(...classes)targetEl.value.style.animation emit(animation-end, e)removeListeners()}}// 移除事件监听器const removeListeners () {targetEl.value.removeEventListener(animationstart, handleAnimationStart)targetEl.value.removeEventListener(animationend, handleAnimationEnd)}// 添加事件监听器targetEl.value.addEventListener(animationstart, handleAnimationStart)targetEl.value.addEventListener(animationend, handleAnimationEnd)
}// 组件卸载时清理
onUnmounted(() {if (targetEl.value) {targetEl.value.style.animation const animationClass ${props.animationType}-animationif (targetEl.value.classList.contains(animationClass)) {targetEl.value.classList.remove(animationClass)}if (props.customClass targetEl.value.classList.contains(props.customClass)) {targetEl.value.classList.remove(props.customClass)}}
})
/scriptstyle
/* 渐变动画 */
.fade-animation {animation-name: fade;
}keyframes fade {0% { opacity: 1; }50% { opacity: 0.3; }100% { opacity: 1; }
}/* 缩放动画 */
.scale-animation {animation-name: scale;
}keyframes scale {0% { transform: scale(1); }50% { transform: scale(1.2); }100% { transform: scale(1); }
}/* 滑动动画 */
.slide-animation {animation-name: slide;
}keyframes slide {0% { transform: translateX(0); }25% { transform: translateX(10px); }75% { transform: translateX(-10px); }100% { transform: translateX(0); }
}/* Webkit 浏览器兼容性 */
-webkit-keyframes fade {0% { opacity: 1; }50% { opacity: 0.3; }100% { opacity: 1; }
}-webkit-keyframes scale {0% { transform: scale(1); }50% { transform: scale(1.2); }100% { transform: scale(1); }
}-webkit-keyframes slide {0% { transform: translateX(0); }25% { transform: translateX(10px); }75% { transform: translateX(-10px); }100% { transform: translateX(0); }
}/* Firefox 浏览器兼容性 */
-moz-keyframes fade {0% { opacity: 1; }50% { opacity: 0.3; }100% { opacity: 1; }
}-moz-keyframes scale {0% { transform: scale(1); }50% { transform: scale(1.2); }100% { transform: scale(1); }
}-moz-keyframes slide {0% { transform: translateX(0); }25% { transform: translateX(10px); }75% { transform: translateX(-10px); }100% { transform: translateX(0); }
}
/style调用 src\views\ClickAnimationsView.vue
templatediv classclick-animations-demoh2点击动画示例/h2!-- 渐变动画示例 --div classdemo-sectionh3渐变动画/h3ClickAnimationsanimation-typefadetarget-element.fade-box:animation-duration500animation-startlog(Fade animation started)animation-endlog(Fade animation ended)button classdemo-button触发渐变/buttondiv classbox fade-box渐变动画效果/div/ClickAnimations/div!-- 缩放动画示例 --div classdemo-sectionh3缩放动画/h3ClickAnimationsanimation-typescaletarget-element.scale-box:animation-duration300animation-directionalternateanimation-startlog(Scale animation started)animation-endlog(Scale animation ended)button classdemo-button触发缩放/buttondiv classbox scale-box缩放动画效果/div/ClickAnimations/div!-- 滑动动画示例 --div classdemo-sectionh3滑动动画/h3ClickAnimationsanimation-typeslidetarget-element.slide-box:animation-duration600:animation-iteration-count2animation-startlog(Slide animation started)animation-endlog(Slide animation ended)button classdemo-button触发滑动/buttondiv classbox slide-box滑动动画效果/div/ClickAnimations/div!-- 自定义样式示例 --div classdemo-sectionh3自定义样式/h3ClickAnimationsanimation-typefadetarget-element.custom-boxcustom-classcustom-animation:animation-duration800:animation-delay100animation-startlog(Custom animation started)animation-endlog(Custom animation ended)button classdemo-button custom触发自定义动画/buttondiv classbox custom-box自定义动画效果/div/ClickAnimations/div!-- 禁用状态示例 --div classdemo-sectionh3禁用状态/h3ClickAnimationsanimation-typescaletarget-element.disabled-box:disabledtrueanimation-startlog(Disabled animation started)animation-endlog(Disabled animation ended)button classdemo-button disabled禁用状态点击无效/buttondiv classbox disabled-box禁用状态/div/ClickAnimations/div/div
/templatescript setup
import ClickAnimations from /components/ClickAnimations/ClickAnimations.vueconst log (msg) console.log(msg)
/scriptstyle scoped
.click-animations-demo {padding: 20px;max-width: 800px;margin: 0 auto;
}h2 {color: #2c3e50;margin-bottom: 30px;
}h3 {color: #2c3e50;margin-bottom: 15px;font-size: 18px;
}.demo-section {margin-bottom: 40px;padding: 20px;border: 1px solid #ebeef5;border-radius: 8px;background-color: #fff;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}.demo-button {padding: 10px 20px;font-size: 14px;background: #42b983;border: none;border-radius: 4px;color: white;cursor: pointer;transition: background-color 0.3s;
}.demo-button:hover {background: #3aa876;
}.demo-button.custom {background: #6366f1;
}.demo-button.custom:hover {background: #4f46e5;
}.demo-button.disabled {background: #c0c4cc;cursor: not-allowed;
}.box {width: 200px;height: 200px;margin: 20px 0;display: flex;align-items: center;justify-content: center;color: white;font-size: 16px;border-radius: 8px;text-align: center;padding: 20px;transition: background-color 0.3s;
}.fade-box {background: #42b983;
}.scale-box {background: #e6a23c;
}.slide-box {background: #f56c6c;
}.custom-box {background: #6366f1;background: linear-gradient(135deg, #6366f1, #4f46e5);
}.disabled-box {background: #909399;
}/* 自定义动画样式 */
:deep(.custom-animation) {box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
}
/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)}],
})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/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
页面效果 到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章创作不易如果能帮助到大家,希望大家多多支持宝码香车~若转载本文一定注明本文链接。 更多专栏订阅推荐 htmlcssjs 绚丽效果 vue ✈️ Electron ⭐️ js 字符串 ✍️ 时间对象Date()操作
