Vue3实战总结

1、父传子，实现自定义每页主题

2、在使用vant中的indexBar

3、接口获值，按需遍历，模糊查询

4、返回按钮，数据传递

5、轮播图的实现

（一）第一步

（二）首页轮播图布局

<!-- 分类入口 -->
<div class="foodType">
	<ul class="flex foodType_main">
		<li class="foodType_item" >
			<img src="" alt="">
			<span class="f_title">
			美食
			</span>
		</li>
	</ul>
</div>
<style>
.foodType{ /* 轮播开始*/
	height:5.866666rem;//220
	.foodType_main{
		flex-wrap:wrap;
	}
	.foodType_item{
		width:20%;
		margin-top:0.533333rem;//20
		color:#666;
		text-align:center;
		span{
		color:#666;
	}
	img{
		display:block;
		width:1.333333rem;//50
		height:1.333333rem;
		margin:0.053333rem auto;//2
	}
}
// .mint-swipe-indicators{
// .is-active{
// background-color:red;
// }
// }
} /* 轮播结束*/
</style>

（三）图片处理

// 格式化图片地址
function formatImgSrc(hash,size,auto){
	/* 
	   7e76a23eb90dada42528bc41499d6f8jpeg 
	 /7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg
	*/
	if(!hash)return '';
	hash = hash.replace(/^(.{1})(.{2})(.+(jpeg|png))$/g,'$1/$2/$3.$4');
	size = size || 90;
	size = auto?size:size+'x'+size;
	return auto?`//fuss10.elemecdn.com/${hash}?imageMogr/format/webp/thumbnail/${size}x/`:`//fuss10.elemecdn.com/${hash}?imageMogr/format/webp/thumbnail/!${size}r/gravity/Center/crop/${size}/`;
}
export default formatImgSrc;

全局挂载formatImgSrc

app.config.globalProperties.$formatImgSrc = formatImgSrc

6、自定义吸附指令

//自定义吸附指令
const vFixed = {
	mounted(el,binding){
		//1、获取元素距离顶部的高度
		var 
			_el = el,
			dt = 0,
			st = 0,
			arg=binding.arg || 0,
			tVal=arg/37.5 +'rem',
			bool,_bool;
		var 
			dHtml = document.documentElement,
			dBody = document.body;
			
		var css = {
			position :'fixed',
			left:'0',
			top:tVal,
			width:'100%'
		}
		//设置占位符
		var dP = document.createElement('p');
		dP.style.height = el.offsetHeight/37.5+'rem'
		dP.style.display='none'
		el.after(dP)
		
		do{
			//元素相对定位父级的距离
			dt += _el.offsetTop;
			_el = _el.offsetParent
		}while(_el)
		//2、获取滚动条高度
		//给window body HTML添加scroll事件
		window.addEventListener('scroll',scrollFn,false)
		dHtml.addEventListener('scroll',scrollFn,false)
		dBody.addEventListener('scroll',scrollFn,false)
		
		function scrollFn(){
			//拿到滚动的高度
			st = dHtml.scrollTop || dBody.scrollTop;
			bool = st>=dt-arg;//滚动的高度大于 父级相对距离
			if(_bool !== bool){//滚动条的状态
				// console.log(bool?'高度够了':'高度不够了')
				for(var k in css){
					if(bool){
						el.style[k] = css[k]
						dP.style.display='block'
					}else{
						//清除原本样式
						el.style[k] = ''
						dP.style.display='none'
					}
				}
				_bool = bool;				
			}
		}
	}
}
export default vFixed;

7、首页商户

7.1数据传递 接口接收

7.2数据使用 距离计算

7.3点击切换状态

7.4点击跳转页面 使用组合式API

传：

$router.push({
	path:'/detail/menu',
	query:{
		id:items.id
	}
})

接：

this.$route.query.id

7.5详情页vant弹出框的使用

注意：引入弹出框的同时引入遮罩层

8、解决数据丢失

访问的路径没有id 会导致数据丢失

8.1使用localStorage本地存储

// 存储
localStorage.setItem("lastname", "Smith");

8.2简单方法：拼接id

9、详情页

10、详情菜单内容的高度获取

11、详情页滚动、点击切换分类效果

11.1设置选中样式

11.2设置点击左侧，右侧到指点点

11.3右侧滚动左边做出响应

代码见：Menu.vue、menuModel.js

12、加入购物车点击按钮的封装

13、加购商品【使用vuex】

13.1分析

13.2实现

14、加减 数据处理

15、设置动画效果

16、显示隐藏

17、使用vuex实现清空

18、首页角标显示

18.1实现

19、详情页角标显示分析

记录分类所需要得数据
  //分类状态
  cateGory:{
	  <!-- 商家id -->
	  162958680:{
		<!-- 根据分类id记录分类的数量 -->
		-1:4,
		-2:3,
		54028672127:5,
	  }
  }

19.1传入商品和分类id

19.2定义分类的状态

19.3加购商品

	//添加分类数量
	addCategory(state,item){
		// console.log(item);
		
		//获取分类的状态
		var cState = state.cateGory;
		var {resId,cid} = item
		var res = cState[resId]
		if(!cid)retrun;
		
		//判断商家或者分类是否存在
		if(resId in cState){
			//判断类别是否存在
			if(cid in res){
				res[cid]++;//分类数量++
			}else{
				res[cid]=1;
			}
		}else{
			//添加新的分类
			cState[resId] = {
				[cid]:1
			}
		}
	},

19.4减少物品

	subCategory(state,item){
		var cState = state.cateGory;//分类状态
		var {resId,cid} = item;//商家id 分类id
		var res = cState[resId];//商家的分类信息
		
		if(!cid)return;
		res[cid]--;
		//删除类别
		if(res[cid]<=0){
			delete res[cid];
		}
		//删除商家
		if(!state.foodState[resId] || state.foodState[resId].count_all<=0){
			delete cState[resId];
		}
		console.log(cState);
	},

20、清空购物车

	//清空商家数据
	clearCart(state,resId){
		//清空购物车的信息
		delete state.foodState[resId]
		//清空分类的数据
		delete state.cateGory[resId]
	}