今天在修改项目bug的时候,遇到一个问题,说是热搜商品如果文字溢出的话就自动隐藏,之前用的方法比较老旧,今天尝试用了flex布局来实现,发现真的挺简单的。
之前的bug如下图
之前的代码如下:
<p>
<i v-for="item in keywords"
@click="$router.push({name:'searchGoods',query:{keyword:item}})">{{item}}</i>
</p>
改正之后的代码:
<p style="display:flex;flex-wrap:wrap;height:21px;">
<i v-for="item in keywords"
@click="$router.push({name:'searchGoods',query:{keyword:item}})">{{item}}</i>
</p>