又隔段时间没写博客了,今天写下博客。之前在项目遇到要实现这样一个需求,如下图所示:
在这里插入图片描述
就是根据不同的状态呈现不同的颜色,一开始拿到这个需求的时候有点迷惑,后来自己查了下文档,发现可以这样做,废话不多说,直接上代码(相关逻辑代码可以忽略):

//template里面
 <ul class="flex calendar_day font-ml flex">
   <li
      v-for="(item, index) in calendarInfo.calendars"
      :key="item.id"
      :class="[
        judgeFirstDay,
        item.approvalStatus === 0
          ? 'finishing'
          : item.approvalStatus === 1
          ? 'finish'
          : item.approvalStatus === 2
          ? 'unfinished'
          : ''
      ]"
   >{{ item.day }}</li>
 </ul>
// computed里面
  judgeFirstDay() {
      let day = "";
      if (this.calendarInfo.calendars[0]) {
        day = this.calendarInfo.calendars[0].week;
      }
      switch (day) {
        case 1:
          return "li_one";
          break;
        case 2:
          return "li_two";
          break;
        case 3:
          return "li_three";
          break;
        case 4:
          return "li_four";
          break;
        case 5:
          return "li_five";
          break;
        case 6:
          return "li_six";
          break;
        case 7:
          return "li_seven";
          break;
      }
    }
    //css
    .li_one {
      &:nth-child(7n + 1) {
        margin-left: 0vw;
      }
    }
    .li_two {
      &:nth-child(7n) {
        margin-left: 0vw;
      }
      &:first-child {
        margin-left: 12.1333vw;
      }
    }
    .li_three {
      &:nth-child(7n -1) {
        margin-left: 0vw;
      }
      &:first-child {
        margin-left: 24.2666vw;
      }
    }
    ......

上面主要用的是vue中动态class进行实现的,并结合了computed这一属性。其实judgeFirstDay也可以放在method里面,但有点不太好,官方有文档说明:
在这里插入图片描述
整个意思就是放在method里面的话,还有多次执行的可能。再截一张图
在这里插入图片描述
这样应该比较好理解了。
另外还有点需要补充的是,在css中用到子类选择器的时候,我们可以根据业务的逻辑和界面进行相关的计算,比如就像上面的7n,7n+1…因为n是从0开始,所以有些细心的同学会发现可能会出现负数的情况,开始自己也被这疑问给困惑住了,但经过多次测试发现负数的情况的,页面上是没有任何元素可以匹配的,所以我觉得我们可以忽略负数这种情况,根据规律写下计算公式就行。

Logo

前往低代码交流专区

更多推荐