header 组件
js 定义方法和样式
首先接收 由 main.js 传过来的 sells 数据,利用这些数据渲染到html中,具体代码如下:
<script>
//导入 评星star的组件
import star from 'components/star/star'
export default {
//接收父组件 main.js 传来的数据
props: {
seller: {
type: Object
}
},
//每个vue 实例被生成后调用这个函数
created() {
// 定义class的名称,html可以直接动态的使用这些class
this.iconClassMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
},
components: {
star
},
data() {
return {
//用来判断是否显示店面详细信息,默认不显示
detailShow: false
}
},
methods: {
showDetails() {
this.detailShow = true;
},
hideDetail() {
this.detailShow = false;
}
}
}
</script>
渲染html ,显示数据
这里的html显示的数据都是动态生成的,根据从main.js传过来的数据
例如: 显示图片的商标
<img :src="seller.avatar" width="64" height="64" />
商家的信息和描述信息
<div class="title">
<span class="brand"></span>
<span class="name">{{seller.name}}</span>
</div>
<div class="description">
{{seller.description + ' / ' + seller.deliveryTime + '分钟送达'}}
</div>
注意的是,商家优惠活动和弹出商品优惠活动的信息都要通过v-if指令来判断
(1)商家优惠活动具体代码如下:
<div class="supports" v-if="seller.supports">
<div class="supports_desc" >
<span class="icon" :class="iconClassMap[seller.supports[0].type]"></span>
<span class="text">{{seller.supports[0].description}}</span>
</div>
</div>
上述代码中 :class ,其实用的是 v-bind指令的简写。iconClassMap其实在上述js中已经定义了,对不同优惠的种类使用不同的class,相关class的css 定义如下:
.icon
display inline-block
vertical-align top
width 12px
height 12px
margin-right 4px
background-size 12px 12px
background-repeat no-repeat
&.decrease
bg-image('decrease_1')
&.discount
bg-image('discount_1')
&.guarantee
bg-image('guarantee_1')
&.invoice
bg-image('invoice_1')
&.special
bg-image('special_1')
.text
line-height 12px
font-size 10px
(2)弹出商家信息
利用 v-if =”detailShow” 指令,根据detailShow是否为true ,来判断是否弹出信息,detailShow初始化为false,当用户点击按钮时,绑定showDetails事件 @click=”showDetails()”,此方法在js也已经定义,就是令当前的detailShow置为true,反之亦然。
注意的是,弹出加了个过渡效果transition,类似于css3
具体代码如下
// transition 过渡效果,判断是否显示
<transition name="fade">
<div v-if="detailShow" class="detail">
<div class="detail-wrapper clearfix">
<div class="detail-main">
<h1 class="name">{{seller.name}}</h1>
<div class="star-wrapper">
<star :size="48" :score="seller.score"></star>
</div>
<div class="title">
<div class="line"> </div>
<div class="text">优惠信息</div>
<div class="line"></div>
</div>
<ul v-if="seller.supports" class="supports">
<li class="support-item" v-for="item in seller.supports">
<span class="icon" :class="iconClassMap[item.type]"></span>
<span class="text">{{item.description}}</span>
</li>
</ul>
<div class="title">
<div class="line"></div>
<div class="text">商家公告</div>
<div class="line"></div>
</div>
<div class="bulletin">{{seller.bulletin}}</div>
</div>
</div>
<div class="detail-close">
<i class="icon-close" @click="hideDetail()"></i>
</div>
</div>
</transition>