头部组件header.vue
五.Header.vue
-
弹层制做 vue动画效果配置和弹层css sticky footer原理css
使用css sticky footer技术html
vue的v-for遍历vue
vue的v-show和事件监听segmentfault
vue动画处理数组
-
header和公告栏制做浏览器
text-overflow:ellipsis的使用安全
font-size:0和vertical-align的使用app
mixin的运用 stylus相关和1像素边框问题dom
背景图片的虚化ide
flex布局的使用
html部分
<template>
<div class="header">
<div class="content-wrapper">
<div class="avatar">
<img width="64" height="64" :src="seller.avatar">
</div>
<div class="content">
<div class="title">
<span class="brand"></span>
<span class="name">{{seller.name}}</span>
</div>
<div class="description">
{{seller.description}} / {{seller.deliveryTime}}分钟送达
</div>
<div v-if="seller.supports" class="supports">
<!--只列出第一个support的内容-->
<span class="icon" :class="classMap[seller.supports[0].type]"></span>
<span class="text">{{seller.supports[0].description}}</span>
</div>
</div>
<div v-if="seller.supports" class="support-count" @click="showDetail">
<span class="count">{{seller.supports.length}}个</span>
<i class="icon-keyboard_arrow_right"></i>
</div>
</div>
<!--绑定showDetail事件-->
<div class="bulletin-wrapper" @click="showDetail">
<span class="bulletin-title"></span><span class="bulletin-text">{{seller.bulletin}}</span>
<i class="icon-keyboard_arrow_right"></i>
</div>
<div class="background">
<img width="100%" height="100%" :src="seller.avatar">
</div>
<!--这里使用了vue的动画配置transition-->
<transition name="fade">
<div v-show="detailShow" class="detail">
<!--使用clearfix这个class来作css sticky footer-->
<div class="detail-wrapper clearfix">
<div class="detail-main">
<h1 class="name">{{seller.name}}</h1>
<div class="star-wrapper">
<!--这里传值给star组件-->
<star :size="48" :score="seller.score"></star>
</div>
<div class="title">
<div class="line"></div>
<div class="text">优惠信息</div>
<div class="line"></div>
</div>
<!--列出所有的support的内容-->
<ul v-if="seller.supports" class="supports">
<li class="support-item" v-for="(item,index) in seller.supports">
<span class="icon" :class="classMap[seller.supports[index].type]"></span>
<span class="text">{{seller.supports[index].description}}</span>
</li>
</ul>
<div class="title">
<div class="line"></div>
<div class="text">商家公告</div>
<div class="line"></div>
</div>
<div class="bulletin">
<p class="content">{{seller.bulletin}}</p>
</div>
</div>
</div>
<!--绑定hideDetail事件-->
<div class="detail-close" @click="hideDetail">
<i class="icon-close"></i>
</div>
</div>
</transition>
</div>
</template>
js部分
星星组件参看:star.vue
<script>
import star from '../star/star.vue'; //导入星星组件
export default{
props: {
seller: { //将seller对象传给组件
type: Object //这是vue的prop验证属性的写法
}
},
data(){
return { //设置一个变量来控制显示隐藏,vue直接会关联到dom
detailShow: false
}
},
methods: {
showDetail(){
this.detailShow = true; //变量控制显示公告详情页
}
},
created(){ //主要看这个classMap
this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
},
components: {
'star': star
}
}
</script>
这里须要注意的是:
使用一个classMap的映射方法来实现数字和类型之间的转换
元数据supports是一个数组:
"supports": [
{
"type": 0,
"description": "在线支付满28减5"
},
{
"type": 1,
"description": "VC无限橙果汁全场8折"
},
{
"type": 2,
"description": "单人精彩套餐"
},
{
"type": 3,
"description": "该商家支持发票,请下单写好发票抬头"
},
{
"type": 4,
"description": "已加入“外卖保”计划,食品安全保障"
}
],
而后页面须要根据不一样的type来显示不一样的description,而且还要显示不一样的图片
这就须要作一个关联,将数组的值跟图片关联起来,而图片的关联是根据class来识别的,从而能够实现数组的方式来调用对应的图片.
<!--这是css里面的-->
&.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')
经过作一个对应关系
this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']; //classMap数组的顺序就对应supports数组的顺序 //例如supports数组的第一个元素就对应decrease,而decrease又对应到.decrease的class classMap[seller.supports[0].type] //seller.supports[0].type就是0,而后classMap的第0个就是decrease,就可以指向到.decrease
这里只须要用数组第一个元素便可
<div v-if="seller.supports" class="supports">
<span class="icon" :class="classMap[seller.supports[0].type]"></span>
<span class="text">{{seller.supports[0].description}}</span>
</div>
这里是用到所有的元素
<ul v-if="seller.supports" class="supports">
<li class="support-item" v-for="(item,index) in seller.supports">
<span class="icon" :class="classMap[seller.supports[index].type]"></span>
<span class="text">{{seller.supports[index].description}}</span>
</li>
</ul>
css部分
考虑到行内元素的不一致的对齐,须要大量使用line-height和vertical-align
font-size为0,为了去掉行内元素的间隙,这个能够继承,因此须要在子孙元素里面再单独设置font-size
对于text-overflow:ellipsis的长度取决于块的长度
<span class="bulletin-title"></span><span class="bulletin-text">{{seller.bulletin}}</span>用合并代替换行来取消多余字符,这种状况也是能够避免设置font-size为0使用vertical-align :top以后还须要margin-top :7px,在没办法彻底对齐的状况下使用
clearfix的css sticky footer部分须要参看:vue动画效果配置和弹层css sticky footer原理
<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixin.styl" //导入minxin
.header
position relative //这里的相对定位是为了让下面的绝对定位作参考
overflow: hidden
color: #ffffff
background: rgba(7, 17, 27, 0.5)
.content-wrapper
padding: 24px 12px 18px 24px
font-size: 0 //这里为0是为了去掉行内元素的间隙,这个能够继承,因此须要在子孙元素里面再单独设置font-size
position: relative //这里的相对定位是为了让下面的绝对定位作参考
.avatar
display: inline-block
vertical-align: top
img
border-radius: 2px
.content
display: inline-block
margin-left: 16px
.title
margin: 2px 0 8px 0
.brand
display: inline-block
vertical-align: top
width: 30px
height: 18px
bg-image('brand') //这里使用了一个图片的mixin
background-size: 30px 18px
background-repeat: no-repeat
.name
margin-left: 6px
font-size: 16px
line-height: 18px
font-weight: bold
.description
margin-bottom: 10px
line-height: 12px
font-size: 12px
.supports
.icon
display: inline-block
vertical-align: top
width: 12px
height: 12px
margin-right: 4px
background-size: 12px 12px
background-repeat: no-repeat
&.decrease //这里就是配合classMap进行图片切换的
bg-image('decrease_1') //这是图片的mixin,在mixin.styl里面能够看到
&.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
.support-count
position: absolute
right: 12px
bottom: 14px
padding: 0 8px
height: 24px
line-height: 24px
border-radius: 14px
background: rgba(0, 0, 0, 0.2)
text-align: center
.count
vertical-align: top //考虑到行内元素的不一致的对齐,须要大量使用line-height和vertical-align
font-size: 10px
.icon-keyboard_arrow_right
margin-left: 2px
line-height: 24px
font-size: 10px
.bulletin-wrapper
position: relative //作相对定位,给icon-keyboard_arrow_right绝对定位作参照
height: 28px
line-height: 28px
padding: 0 22px 0 12px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis //这里是字数太长的省略处理
background: rgba(7, 17, 27, 0.2)
.bulletin-title
display: inline-block
vertical-align: top
margin-top: 8px
width: 22px
height: 12px
bg-image('bulletin')
background-size: 22px
.bulletin-text
vertical-align: top
margin: 0 4px
font-size: 10px
font-weight: 200
.icon-keyboard_arrow_right
position: absolute
font-size: 10px
right: 12px
top: 8px
.background //这里使用的是图片作背景,因此须要作下面这些处理
position absolute //背景图片须要绝对定位
top: 0 //设置位置
left: 0
width: 100% //设置大小
height: 100%
z-index: -1 //将背景图片设置里层,避免突出位置看到外露部分
filter: blur(10px) //背景图片虚化
.detail
position: fixed //弹出层,因此用fixed
z-index: 100 //须要设置z-index保持必定的高度
top: 0
left: 0
width: 100%
height: 100%
overflow: auto //加overflow hidden来把多余的背景阴影去掉
opacity: 1 //这是动画设置
background: rgba(7, 17, 27, 0.8)
&.fade-enter-active, &.fade-leave-active //vue的动画须要参考vue动画配置理解
transition: all 0.5s
&.fade-enter, &.fade-leave-active
opacity: 0
background: rgba(7, 17, 27, 0)
.detail-wrapper
width: 100%
min-height: 100% //由于不知道有多少内容,因此用min-height
.detail-main
margin-top: 64px
padding-bottom: 64px //预留下面close按钮的位置,因此下内边距顶起
.name
line-height: 16px
text-align: center
font-size: 16px
font-weight: 700
.star-wrapper
margin-top: 18px
padding: 2px 0
text-align center
.title
display: flex //使用flex布局等分详情页优惠界面
width: 80%
margin: 28px auto 24px auto
.line
flex: 1 //使用1的比例的flex块
position: relative //这里使用相对布局加top对齐,能够也能够margin-bottom
top: -6px
border-bottom: 1px solid rgba(255, 255, 255, 0.2) //使用border生成线,由于使用的是div
.text
padding: 0 12px
font-size: 14px
font-weight 700
.supports
width: 80%
margin: 0 auto
.support-item
padding: 0 12px
margin-bottom: 12px
font-size: 0
&:last-child
margin-bottom: 0
.icon
display: inline-block
width: 16px
height: 16px
vertical-align: top
margin-right: 6px
background-size: 16px 16px
background-repeat: no-repeat
//经过对应不一样的class来对应不一样的图片
&.decrease
bg-image('decrease_2')
&.discount
bg-image('discount_2')
&.guarantee
bg-image('guarantee_2')
&.invoice
bg-image('invoice_2')
&.special
bg-image('special_2')
.text
line-height: 16px
font-size: 12px
.bulletin
width: 80%
margin: 0 auto
.content
padding: 0 12px
line-height: 24px
font-size: 12px
.detail-close
position: relative
width: 32px
height: 32px
margin: -64px auto 0 auto //使用以前预留了的位置
clear: both
font-size: 32px
</style>
备注:
text-overflow :ellipsis显示在底部.不是中间,是浏览器的显示处理不一样关于文字内容溢出用点点点-省略号表示
相关文章
- 1. 小程序自定义头部组件
- 2. 第六，vue组件及应用-建立头部组件
- 3. 第六，vue组件及应用-创建头部组件
- 4. vue组件（将页面公用的头部组件化）
- 5. 11、组件入门及写个首页头部组件
- 6. uni app 自定义 头部组件（2） 局部 右侧按钮
- 7. IMX头部详细解析之一 头部组成
- 8. IPv4头部和IPv6头部
- 9. ESP32 固件头部分析
- 10. vue之CSS头部组件中样式的设置
- 更多相关文章...
- • ionic 头部与底部 - ionic 教程
- • ionic 头部和底部 - ionic 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • 互联网组织的未来：剖析GitHub员工的任性之源
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章