网站开发职位描述,公司培训,网站做成微信小程序,php管理系统目录
1、图片懒加载
步骤一#xff1a;自定义全局指令
步骤二#xff1a;代码中使用
编辑步骤三#xff1a;效果查看
步骤四#xff1a;代码优化
2、封装组件案例-传对象
3、路由配置——tab标签
4、根据tab标签添加面包屑
4.1、实现
4.2、bug#xff1a;需要…目录
1、图片懒加载
步骤一自定义全局指令
步骤二代码中使用
编辑步骤三效果查看
步骤四代码优化
2、封装组件案例-传对象
3、路由配置——tab标签
4、根据tab标签添加面包屑
4.1、实现
4.2、bug需要手动刷新
4.3、解决方案一
4.4、方案优化onBeforeRouteUpdate钩子函数
5、修改路由行为 1、图片懒加载
步骤一自定义全局指令
重构main.js文件
app.directive(img-lazy,{//el:指令绑定元素 img//binding:binding.value 指令后面表达式的值 图片urlmounted(el,binding){ //console.log(el,binding.value)const { stop } useIntersectionObserver(el,([{ isIntersecting }]) {console.log(isIntersecting)if(isIntersecting){el.src binding.value;stop();}})}
}) 代码解释: app.directive(img-lazy, { ... })在 Vue 应用中定义一个名为 v-img-lazy 的全局指令。 mounted(el, binding) { ... }这是指令的 mounted 钩子函数它在被绑定的元素插入到父节点时调用。 el指令所绑定的元素在这里是一个 img 标签。binding一个对象包含了很多属性其中 binding.value 是指令等号后面的值这里是图片的 URL。 const { stop } useIntersectionObserver(el, callback)使用vueuse/core的 API - useIntersectionObserver 函数来观察 el 元素是否进入视口。 el要观察的 DOM 元素。callback一个回调函数当元素与视口有交集时调用。stop一个函数用于停止观察。 ([{ isIntersecting }]) { ... }这是 useIntersectionObserver 的回调函数。 isIntersecting一个布尔值表示元素是否进入视口。 if(isIntersecting) { ... }如果 isIntersecting 为 true说明图片进入了视口。 el.src binding.value;设置图片元素的 src 属性为指令的值图片的 URL从而开始加载图片。stop();停止观察因为图片已经加载不需要再观察其是否进入视口。
步骤二代码中使用
img v-img-lazyitem.picture alt
步骤三效果查看 步骤四代码优化
把这些代码都写在main.js中main.js中的内容太过于杂乱了些我们整理一下在根目录下创建directives/index.js
import { useIntersectionObserver } from vueuse/coreexport const lazyPlugin {install (app) {// 懒加载指令逻辑app.directive(img-lazy, {mounted (el, binding) {// el: 指令绑定的那个元素 img// binding: binding.value 指令等于号后面绑定的表达式的值 图片urlconsole.log(el, binding.value)const { stop } useIntersectionObserver(el,([{ isIntersecting }]) {console.log(isIntersecting)if (isIntersecting) {// 进入视口区域el.src binding.valuestop()}},)}})}
}
main.js中 2、封装组件案例-传对象 向组件传值的另一个案例-传普通值在本系列文章前端项目个人笔记二【Vue-cli - 引入阿里矢量库图标 吸顶交互 setup语法糖】 调用的地方: 很明显我们是有一个GoodItem组件并且我们直接把good的这个对象传过去了
GoodItem组件代码
script setup
defineProps({good: {type: Object,default: () { }}
})
/scripttemplateRouterLink to/ classgoods-itemimg v-img-lazygood.picture alt /p classname ellipsis{{ good.name }}/pp classdesc ellipsis{{ good.desc }}/pp classpriceyen;{{ good.price }}/p/RouterLink
/templatestyle scoped langscss
.goods-item {display: block;width: 220px;padding: 20px 30px;text-align: center;transition: all .5s;:hover {transform: translate3d(0, -3px, 0);box-shadow: 0 3px 8px rgb(0 0 0 / 20%);}img {width: 160px;height: 160px;}p {padding-top: 10px;}.name {font-size: 16px;}.desc {color: #999;height: 29px;}.price {color: $priceColor;font-size: 20px;}
}
/style
可以重点看一下是如何接收父组件传来的对象的·~ 3、路由配置——tab标签
路由配置: 效果: 4、根据tab标签添加面包屑
4.1、实现
效果: 这个值的获取是根据url中的id查询到tab的name的因此第一步我们需要封装一个查询请求
api/category.js
import http from /utils/http;/*** description: 根据id获得一级分类对象信息* param {*} id 分类id* return {*}*/
export function getTopCategoryAPI(id){return http.get(/category,{params:{id}});
}
使用: Category/index.vue:
script setup
import {getTopCategoryAPI} from /api/category
import {useRoute} from vue-router;
import {onMounted, onUpdated, ref} from vue;const categoryData ref({})
const route useRoute()
const getCategory async () {// 如何在setup中获取路由参数 useRoute() - route 等价于this.$route//console.log(route.params.id);const res await getTopCategoryAPI(route.params.id)categoryData.value res.result
}
onMounted(()getCategory())
/scripttemplatediv classtop-categorydiv classcontainer m-top-20!-- 面包屑 --div classbread-containerel-breadcrumb separatorel-breadcrumb-item :to{ path: / }首页/el-breadcrumb-itemel-breadcrumb-item{{ categoryData.name }}/el-breadcrumb-item/el-breadcrumb/div/div/div
/templatestyle scoped langscss
.top-category {h3 {font-size: 28px;color: #666;font-weight: normal;text-align: center;line-height: 100px;}.sub-list {margin-top: 20px;background-color: #fff;ul {display: flex;padding: 0 32px;flex-wrap: wrap;li {width: 168px;height: 160px;a {text-align: center;display: block;font-size: 16px;img {width: 100px;height: 100px;}p {line-height: 40px;}:hover {color: $xtxColor;}}}}}.ref-goods {background-color: #fff;margin-top: 20px;position: relative;.head {.xtx-more {position: absolute;top: 20px;right: 20px;}.tag {text-align: center;color: #999;font-size: 20px;position: relative;top: -20px;}}.body {display: flex;justify-content: space-around;padding: 0 40px 30px;}}.bread-container {padding: 25px 0;}
}
/style
重点代码 4.2、bug需要手动刷新 bug原因当你在同一个组件内点击时他会复用之前的组件 所以就不会刷新了需要手动刷新~
4.3、解决方案一 在路由入口处处理
RouterView :key$route.fullPath/ 方案将路由入口中的所有组件全部都会重新加载~ 而我们只需要对应的组件刷新即可因此就有了方案优化
4.4、方案优化onBeforeRouteUpdate钩子函数
onBeforeRouteUpdate((to){getCategory(to.params.id)
}) 5、修改路由行为 我们会发现当我们在首页时右侧滚动条可能是在中间当我们切到美食时滚动条还是在中间没有跳到最上面。处理
scrollBehavior(){return{top:0}
}
