vue笔记：抽屉样式记录

代码：

 <div class="step1">
        <div class="chosetitle">1.选择抽屉</div>
        <!-- drawer_area 抽屉区 -->
        <div class="drawer_area">
          <div
            class="row"
            :class="nowDrawId == item.id ? 'active' : ''"
            v-for="(item, index) in machineItemList"
            :key="index"
            @click="toggleNowDrawId(item.id)"
          >
            <!-- 选中了某一行时显示右箭头 -->
            <div
              class="row_arrow el-icon-right"
              v-if="nowDrawId == item.id"
            ></div>
            <div
              class="col"
              :class="{ have: item.status == '1', none: item.status == '2' }"
              v-for="(item1, index1) in item.child"
              :key="index1"
            >
              {{ item1.id }}
            </div>
          </div>
        </div>

 created() {
    this.getMachineItemList()
  },
  methods: {
    //获取药箱布局 假设为9行*3列
    getMachineItemList(){
      let arr=[];
      for(let i=0;i<9;i++){
        //设置每一行的属性
        let rowObj={
          id:i+1,
          child:[]
        };
        for(let j=0;j<3;j++){
          //设置每一列的属性
          let colObj={
            id:(i+1)+'-'+(j+1)
          }
          //push为数组方法，增加一个项
          rowObj.child.push(colObj)
        }
        arr.push(rowObj)
      }
      console.log(arr)
      this.machineItemList=arr;
    },

    //当某一列被点击后，选中该行
    toggleNowDrawId(id) {
      this.nowDrawId = id;
    },

  },
};

 > .drawer_area {
          .row {
            //行布局
            display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10px;
						position: relative;
						> .row_arrow {
							display: none;
							position: absolute;
							left: -30px;
							top: 10px;
						}
						&:last-child {
							margin-bottom: 0;
						}
						&:hover,
						&.active {
							> .row_arrow {
								display: block;
							}
						}
            .col {
							width: 88px;
							height: 44px;
							background: rgba(231, 211, 49, 1);
							&.have {
								background: rgba(32, 159, 133, 1);
							}
							&.none {
								background: rgba(90, 134, 239, 1);
							}
						}
          }
        }