饿了么的官网展示框 当hover 的时候展开,并且显示字体和更多信息
- 思路-使用 css3 新特性之一的 display-flex 和 flex-shrink 来实现；
display显示器，展示，显露，在这里我理解为展现形式-以什么形式方法在页面上存在。flex弯曲，屈伸，可活动的，如它的字面意思，display就是为 所在的 dom 元素开启一个可以自由伸展，收缩的容器，也叫作弹性盒子，它的子元素，我们可以称他们为弹性因子，是弹性盒子的每一项。- flex-grow 在盒子里可以伸展的空间，如果一个容器里面的空间是有剩余的，给一个弹性因子设置
flex-grow：1；指的是这一项将剩余的空间沾满，如果是两个因子同时设置了flex-grow：1；那就是两个子项平分剩余的空间。 - 也就是说所有弹性因子 的 flex-grow 值会被累加起来，与剩余空间相除，计算后返回相应的占比值。
- 首先给它套一个大盒子，并开启弹性盒子
- 之后给选中的子项设置 flex-grow 让他占据剩余空间，它就撑大了，可以在上图中看到，它是有一项在默认展示的，正巧与felx的逻辑相似，且实现简单。
布局
- 这是使用的 justify-content：space-between；设置的靠齐方式-并不理想
- 这是使用 justify-content：space-around，符合理想
<template>
<div class="box">
<div class="elema">
<div class="item" v-for="(itemContent,index) in data" :key="index">{{ itemContent }}</div>
</div>
你好
</div>
</template>
<script>
export default {
name:'',
data() {
return {
data:['蜂鸟配送','合作加盟','商家开店','及时零售','外卖点单']
}
},
}
</script>
<style scoped lang="less">
.elema{
margin: 0 auto;
width: 600px;
height: 300px;
background-color: rgb(14 90 131);
border-radius: 4px;
display: flex;
justify-content: space-around;
align-items: center;
}
.item{
border-radius: 5px;
box-sizing: border-box;
width: 45px;
height: 200px;
background-color: skyblue;
color: white;
padding: 50px 15px;
text-align: center;
}
</style>
- 接下来就是设置flex-grow 实现一个大图
- 由于子项都是渲染的 我使用 动态条件来控制样式的显示与隐藏
<div class="item" v-for="(itemContent,index) in data" :key="index" :class="{'active': index == showBig}" >{{ itemContent }}</div>这里是class的另一个写法，:class="{'active': index == showBig}"前面类名的成立与否取决于它的值是否为true。
- 展开一项成立，接下来给它绑定事件，就可以基本实现 官网上的效果了，如果想要一模一样还需要加上动画过渡，这里就交给你们啦。
- active 这一个样式是通过对比是否是当前索引判断的，所以，当鼠标移入的时候切换索引就可以实现动态效果。
<template>
<div class="box">
<div class="elema">
<div class="item" v-for="(itemContent,index) in data" :key="index"
:class="{'active': index == showBig}"
@mouseenter="hoverEnter(index)"
>{{ itemContent }}</div>
</div>
你好
</div>
</template>
<script>
export default {
name:'',
data() {
return {
data:['蜂鸟配送','合作加盟','商家开店','及时零售','外卖点单'],
showBig: 0,
}
},
methods:{
hoverEnter(index){
console.log('进入');
this.showBig = index
},
}
}
</script>
<style scoped lang="less">
.elema{
margin: 0 auto;
width: 600px;
height: 300px;
background-color: rgb(14 90 131);
border-radius: 4px;
display: flex;
justify-content: space-around;
align-items: center;
}
.item{
border-radius: 5px;
box-sizing: border-box;
width: 45px;
height: 200px;
background-color: skyblue;
color: white;
padding: 50px 15px;
text-align: center;
}
.active{
flex-grow: .8;
}
</style>
