乐趣区

关于vue.js:实现nm布局模板

jiezi

在页面布局模板的开发场景中，咱们经常须要实现 2 2,33,4 4 等布局款式，能够对立形象为 n 行 m 列的布局。那如何实现一个 n m 的布局款式呢？本篇文章向大家分享一些我的想法。

1、提供两个输入框给用户，让用户本人输出行和列的数量。
2、获取用户输出的行列，将行、列参数传给模板组件
3、模板组件内应用双层 for 循环渲染页面的每一个盒子。应用百分比布局动静计算盒子对应的宽、高占比。宽：Math.round(100 / this.row)，高：Math.round(100 / this.column)。给 style 属性绑定动静的宽高百分比。依据 for 循环渲染的 index，设置每个盒子的惟一标识。具体循环代码如下：

 <div
        v-for="(item, ind) in column"
        :key="ind"
        class="item_block_row"
        :style="{width:'100%', height:'100%'}"
      >
        <div
          v-for="(item2, ind2) in row"
          :key="ind2"
          :style="{width: itemWidth - 1 +'%', height: itemHeight2 - 1 +'%'}"
          class="item_block"
        >
          <i
            v-show="
              list2 &&
                list2.length &&
                playDomName !== 'wasm_player_block_' + ind + '_' + ind2
            "class="el-icon-caret-right template_play_btn"@click="playVideo(ind, ind2)"
          ></i>
          <i
            v-if="list2 && list2.length"
            class="wasm_player_block"
            :class="'wasm_player_block_' + ind + '_' + ind2":id="'play_video_'+ ind +'_'+ ind2"
            style="width:100%;height:100%;"
          ></i>
        </div>
      </div>

4、在每一个盒子外部，如果咱们须要动态显示数组的每一项，能够将一维数组解决为二维数组，二维数组的每一项正好对应布局页面的每一个盒子。即可进行数据的展现。

应用 lodash 中的_.chunk(array, [size=1]) 办法即可轻松实现。改办法将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。如果 array 无奈被宰割成全副等长的区块，那么最初残余的元素将组成一个区块。返回一个蕴含拆分区块的新数组（注：相当于一个二维数组）。如：
_.chunk([‘a’, ‘b’, ‘c’, ‘d’], 2);// => [[‘a’, ‘b’], [‘c’, ‘d’]]
_.chunk([‘a’, ‘b’, ‘c’, ‘d’], 3);// => [[‘a’, ‘b’, ‘c’], [‘d’]]

咱们能够在 computed 中动静获取改二维数组
list2() {

  let arr = _.chunk(this.list, this.row);
  return arr;

}
次要代码如下图所示：

退出移动版