vue-screen-layout

A fast screen layout component based on Vue.js

How to use?

npm install vue-screen-layout

Example

<template>
   <vue-screen-layout :row="row" :span="span" :merge="grid" :config="true">
      <template slot="home"></template>
      <template slot="43"></template>
   </vue-screen-layout>
</template>
<script>
import VueScreenLayout from 'vue-screen-layout'
export default {
  components: {
    VueScreenLayout
  },
  data () {
    row: 3,
    span: 4,
    grid: {
      home: ["12","23"]
    }
  }
}
</script>

options

| 属性 | 类型 | 默认 | 描述 | 必须 | |----|----|----| ----| ----| | span | Number | 1 | 横向几块内容（1-9） | 是 | | row | Number | 1 | 纵向几块内容（1-9） | 是 | | merge | Object | | 要合并的块 | 否 | | config | Boolean | false | 显示颜色和文字 | 否 |

Explain

vue-screen-layout默认会生成span*row块div（屏幕），当你需要为某块div添加内容时，你只需要这样做：

1. <template slot="12"></tempalte>，具体的slot name，你可以打开config去查看（可以想象一个坐标系）。
2. merge需要传入一个对象，key为将来要用的slot name，value为你要合并的内容，只需要传入对应的位置（告诉它最小位置和最大位置，画一个矩形。比如：["12", "23"]指将<12,13,22,23>这四块合并为一块），也可以打开config去看。