Vue css实现语文作文格子效果

Vue + css实现语文作文格子效果，基本上是css实现的,且需要提示每满100字数给出提示，且每一行拼接完整行数

效果图：

![在这里插入图片描述](https://img-blog.csdnimg.cn/5ea3a563154341c68bf30c2b15da8183.png

代码区域：

DOM部分

<!-- 语文作文 -->
          <div v-if="cellList.length > 0" class="ChineseWrittes">
            <div
              v-for="(item, index) in cellList"
              :key="index"
              :class="[(index + 1) % 22 == 0 ? 'littleCellB' : 'littleCell']"
            >
              <div v-if="(index + 1) % 100 == 0" class="cellTips">
                <span>{{ index + 1 }}</span>
              </div>
            </div>
          </div>
         //之所以要去余数22取整，是因为每行22个，每行的最后一个去掉右边边框，如此就不会有样式冲突

样式style部分

  // 作文样式
  .ChineseWrittes {
    width: 99.85%;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #000000;
    border-top: none;
    .littleCell {
      width: 30px;
      height: 30px;
      margin-bottom: 5px;
      border: 1px solid #171212;
      border-left: none;
    }
    .littleCellB {
      width: 30px;
      height: 30px;
      margin-bottom: 5px;
      border: 1px solid #171212;
      border-left: none;
      border-right: none;
    }
    //文字提示
    .cellTips {
      position: absolute;
      color: rgb(8, 8, 8);
      font-weight: 560;
      left: 6px;
      top: -6px;
    }
  }

格子个数来源

cellList为一个数组，需要多少个格子，只需控制cellList数组中元素的个数即可