商品尺码表（每次只能点击一个尺码）

zzのpara

于 2022-07-12 09:40:50 发布

阅读量114

点赞数

分类专栏： vue项目文章标签：前端 vue html css

本文链接：https://blog.csdn.net/paradoxzl/article/details/125736212

版权

这篇博客探讨了如何在前端使用Vue.js、HTML和CSS实现一个交互式的商品尺码表，表头固定，列颜色交替，并带有滚动条功能，提供良好的用户体验。

摘要由CSDN通过智能技术生成

<div id="grids">
        <label v-for="(item,index) in sizeArr" v-bind:class="{clicks:index==isActive,noclicks:index!==isActive}" v-on:click="checkItem(index)">{
  {item}}</label>
</div>

#grids{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 7px;
    margin-top: 8px;
    height: 158px;
}
.noclicks{
    position: relative;
    height: 48px;
    border-radius: 4px;
    color: rgb(17, 17, 17);
    box-shadow: rgb(229 229 229) 0px 0px 0px 1px;
    -webkit-box-flex: 1;
    flex-grow: 1;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    outline: none;
    cursor: pointer;