ios在VUE按数据切换视图中的class控制样式时,background丢失问题

<dl>
              <dd
                v-for="(floors, index2) in item.floors"
                :key="'dd'+activeName + '' + item.unitId + 'floor'+floors.floor+ 'index'+index + index2"
              >
                  <div
                    :class="{bnt: true, check: floors.isComplete === 1, disabled: floors.status !== 0}"
                    @click="floorsClick(floors)"
                  >{{ floors.floor }}层</div>
              </dd>
            </dl>

.bnt {
                margin: 0 0 5px 5px;
                 border-radius: 5px;
                color: #fff;
                text-align: center;
                width: 50px;
                height: 14px;
                line-height: 14px;
                background-color: #ffd2b9 !important;
                &.check {
                  color: #fff;
                  border: none;
                  background-color: #f99d33 !important;
                }
                &.disabled {
                  cursor: not-allowed;
                }
              }                

在ios16下发现border-radius: 5px和background-color: #ffd2b9放在一起时,经过多次测试在切换class来变化样式时,background就会失效,在外侧增加一个div做border-radius加overflow: hidden;进行替换便可修复

 

posted @ 2023-03-03 10:00  me春天  阅读(78)  评论(0编辑  收藏  举报