Question

我正在寻找一种在vue2中向用户突出显示更新的行的方法。我目前正在使用v-for生成表：

<table class="table temptable">
      <tbody v-if="this.tempItems">
      <tr>
          <th>SKU</th>
          <th>QTY</th>
      </tr>
      <tr v-for="item in this.tempItems" :class="{ rowFlash: item.rowUpdated }">
      <td data-title="SKU">@{{ item.sku }}</td>
      <td data-title="QTY">@{{ item.qty }}</td>
      </tr>
      </tbody>
</table>

我尝试了过渡，过渡小组。我最近的是使用:class="{ rowFlash: item.rowUpdated }"到<tr>，但是我还没有找到最终结果的方法。

我最终希望在插入或更新时突出显示该行（背景颜色：红色），然后在几秒钟后逐渐消失为白色。

编辑

我的JS代码如下：

this.vm.tempItems[response.data.sku].qty += 1;

这是通过扫描器API启动的。因此，当扫描触发时，它将代码发送给脚本，并带回产品SKU。该vue实例仅在我网站的此页面上运行，因此我目前不使用vue模板。所有这些JS都在页面的页脚脚本中运行。

编辑2

我有一些工作要做，但我认为这不是一个很好的解决方案！

JS

this.vm.tempItems[response.data.sku].rowUpdated = false;
setTimeout(function(){ this.vm.tempItems[response.data.sku].rowUpdated = true; }, 50);

CSS

.rowRed{
    background: #ee815b;
}

.rowFade {
    background: white !important;
    transition: 1.5s !important;
}

通过使用:class="{ rowFlash: item.rowUpdated }"更改行的类别，然后立即将其更改回，它给了我红色突出显示淡出效果。虽然感觉很乱，但我不喜欢在其中设置setTimeout的想法。但是，如果没有超时，我不确定在将vue属性设置为true后如何将其更改回false吗？

vue2突出显示更新的行

0 个答案: