Vue 头部动态添加数据

最新推荐文章于 2023-04-20 09:28:57 发布

爱吃排骨

最新推荐文章于 2023-04-20 09:28:57 发布

阅读量4.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js开发饿了么文章标签： vue饿了么头部

本文链接：https://blog.youkuaiyun.com/qq_36947128/article/details/77159318

vue.js开发饿了么专栏收录该内容

10 篇文章

订阅专栏

上篇文章我们已经完成了头部和中间部分的骨架搭建，现在我们来开发头部的css代码吧

第一步连接data.json获得图片以及品牌名称及基础数据

在header.vue 中template中写入

这样就可以获取到商铺图片。

我们可以去data.json文件中看看seller.avatar

"avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",是这样的

第二步获取商铺名称

我们可以去data.json文件中看看seller.name

"name": "粥品香坊（回龙观）",

第三步获取配送时间

第四步获取在线减满

第五步获取介绍

补：获取长度

<div class="mui_position"@click="showDeta">
			<span class="count">{{seller.supports.length}}个</span>
			<span class="icc"><img src="../img/right.png"></span>
		</div>

第六步编写css

<style>
	.header{
		position: relative;
	}
	.mui-content{
		background: none;
		opacity: 0.;
	
	    font-size: 13px;
	    line-height: 22px;
	    color: white;
	}
	.name{
		font-size: 15px;
	}
	.avatar{
		display: inline-block;
	   
		
	}
	.avatar img{
		float: right;
		margin-right: 15px;
	}
	.mui-padding{
			padding: 24px 12px 10px 24px;
	}
	.bullent{
		display: inline-block;
		position: relative;
		
	}
	.text{
		display: inline-block;
		margin-left: 15px;	}
	.brand{
		display: inline-block;
		width: 30px;
		height: 18px;
		position:relative;
	}
	.brand img{
		width: 30px;
		height: 18px;
		position: absolute;
		top: 4px;
	}
	.icon{
		display: inline-block;
		height: 18px;
		
	
	}
	.support{
	position: relative;	
	}
	.support span img{
		height: 18px;
		position: absolute;
		top: 4px;
	}
	.mui_position{
		position: absolute;
		width: 60px;
		height: 30px;
		background:rgba(7,17,27,0.2);
		border-radius:15px;
		text-align: center;
		top: 40px;
		right: 15px;
		line-height: 30px;
	}
	.count{
		
		color: #CCCCCC;
	}
	.icc img{
		vertical-align: middle;
		margin-top: -5px;
	}
	.bullent-conten{
		width: 100%;
		height: 30px;
		background:rgba(7,17,27,0.2);
		font-size: 13px;
		
	}
	.bullent-title{
		display: inline-block;
		float: left;
		
	}
	.bullent-title img{
		height: 18px;
	  margin-top: 5px;
	  margin-left: 20px;
	}
	.bullen-text{
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		display: inline-block;
	line-height: 30px;
	color: white;
		
	}
	.mui-col-xs-1 img{
		margin-top: 5px;
		margin-left: 20%;
	}
	.bullent-img{display: inline-block;}
	.bacground{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background: rgba(7,17,27,0.5);
		filter: blur(10px);
		
	}
	.mask{
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(7,17,27,0.5);
		width: 100%;
		height: 100%;
		z-index: 100;
		
	}
	.mask_warpp{
	min-height: 100%;
	
		
	}
	.mask_main{
		margin-top: 64px;
		padding-bottom: 64px;
	}
	.mask_icon{
		position: relative;
		width: 32px;
		height: 32px;
		margin:-64px auto 0 auto;
		clear: both;
		font-size: 32px;
	}
	.clearfix{
		display: inline-block;
	}
	.clearfix:after{
		content: ".";
		display: block;
		height: 0;
		line-height: 0;
		clear: both;
		visibility: hidden;
	}
	
</style>

在来看看整体的header.vue

<template>
	<div class="header">
		<div class="mui-content">
			<div class="mui-row mui-padding">
		<div class="avatar mui-col-sm-3 mui-col-xs-3">
		<img width="64" height="64" :src="seller.avatar" />
		</div>
		<div class="bullent mui-col-sm-9  mui-col-xs-9">
			 <div class="title">
			 	<span class="brand"><img src="../img/brand@2x.png"></span>
			 	<span class="name">{{seller.name}}</span>
			 </div>
		
		<div class="description">
			{{seller.description}}/{{seller.deliveryTime}}分钟送达
			
		</div>
		<div class="support" v-if="seller.supports" style="width: 50%;">
			<span class="icon"><img src="../img/decrease_3@2x.png"></span>
			<span class="text">{{seller.supports[0].description}}</span>
			
		</div>
		<div v-if="seller.supports">
		<div class="mui_position"@click="showDeta">
			<span class="count">{{seller.supports.length}}个</span>
			<span class="icc"><img src="../img/right.png"></span>
		</div>
		</div>
		
		
			 </div>
			 
		</div>
		
		
		</div>
		<div class="bullent-conten"@click="showDeta">
			 	     <div class="mui-row">
			 		<span class="bullent-title mui-col-sm-2 mui-col-xs-2"><img src="../img/bulletin@2x.png"></span>
			 		<span class="bullen-text mui-col-sm-9 mui-col-xs-9" >{{seller.bulletin}}</span>
			 		<span class="bullent-img  mui-col-sm-1 mui-col-xs-1" ><img src="../img/right.png" ></span>
			 
			 	</div>
			 </div>
			  <div class="bacground">
			 <img :src="seller.avatar"width="100%" height="100%"/>
			 </div>
			<div class="mask" v-show="detaShow">
				<div class="mask_warpp clearfix">
					<div class="mask_main">
					
						
						
						
					</div>
				</div>
				<div class="mask_icon" @click="showClone()" >
					<img src="../img/guanbi.png" />
				</div>
				
			</div>
	</div>
	
</template>

<script type="text/ecmascript-6">
	export default {
		props:{
			seller:{
				type:Object
			}
		},
		data(){
			return{
				detaShow:false,
				
			};
		},
		methods:{
			showDeta(){
				this.detaShow=true;
			},
		  showClone(){
		  	this.detaShow=false
		  }
		},
		
	};
</script>
<style>
	@import url("/static/mui.min.css");
</style>
<style>
	.header{
		position: relative;
	}
	.mui-content{
		background: none;
		opacity: 0.;
	
	    font-size: 13px;
	    line-height: 22px;
	    color: white;
	}
	.name{
		font-size: 15px;
	}
	.avatar{
		display: inline-block;
	   
		
	}
	.avatar img{
		float: right;
		margin-right: 15px;
	}
	.mui-padding{
			padding: 24px 12px 10px 24px;
	}
	.bullent{
		display: inline-block;
		position: relative;
		
	}
	.text{
		display: inline-block;
		margin-left: 15px;	}
	.brand{
		display: inline-block;
		width: 30px;
		height: 18px;
		position:relative;
	}
	.brand img{
		width: 30px;
		height: 18px;
		position: absolute;
		top: 4px;
	}
	.icon{
		display: inline-block;
		height: 18px;
		
	
	}
	.support{
	position: relative;	
	}
	.support span img{
		height: 18px;
		position: absolute;
		top: 4px;
	}
	.mui_position{
		position: absolute;
		width: 60px;
		height: 30px;
		background:rgba(7,17,27,0.2);
		border-radius:15px;
		text-align: center;
		top: 40px;
		right: 15px;
		line-height: 30px;
	}
	.count{
		
		color: #CCCCCC;
	}
	.icc img{
		vertical-align: middle;
		margin-top: -5px;
	}
	.bullent-conten{
		width: 100%;
		height: 30px;
		background:rgba(7,17,27,0.2);
		font-size: 13px;
		
	}
	.bullent-title{
		display: inline-block;
		float: left;
		
	}
	.bullent-title img{
		height: 18px;
	  margin-top: 5px;
	  margin-left: 20px;
	}
	.bullen-text{
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		display: inline-block;
	line-height: 30px;
	color: white;
		
	}
	.mui-col-xs-1 img{
		margin-top: 5px;
		margin-left: 20%;
	}
	.bullent-img{display: inline-block;}
	.bacground{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background: rgba(7,17,27,0.5);
		filter: blur(10px);
		
	}
	.mask{
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(7,17,27,0.5);
		width: 100%;
		height: 100%;
		z-index: 100;
		
	}
	.mask_warpp{
	min-height: 100%;
	
		
	}
	.mask_main{
		margin-top: 64px;
		padding-bottom: 64px;
	}
	.mask_icon{
		position: relative;
		width: 32px;
		height: 32px;
		margin:-64px auto 0 auto;
		clear: both;
		font-size: 32px;
	}
	.clearfix{
		display: inline-block;
	}
	.clearfix:after{
		content: ".";
		display: block;
		height: 0;
		line-height: 0;
		clear: both;
		visibility: hidden;
	}
	
</style>

这样头部就已经完成了