# vue-screen-layout

> A fast screen layout component based on Vue.js

Latest version **1.0.9** (published 2018-08-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-screen-layout
pnpm add vue-screen-layout
yarn add vue-screen-layout
bun add vue-screen-layout
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2018-08-01 |
| First published | 2018-07-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 79.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | markyong |
| Maintainers | mayong |
| Keywords | vue, screen, layout, vue-component |

## Links

- npm: https://www.npmjs.com/package/vue-screen-layout
- Homepage: http://markyong.github.io/vue-screen-layout/demo/
- npm.io page: https://npm.io/package/vue-screen-layout

## Recent versions

- 1.0.9 (latest) — 2018-08-01
- 1.0.7 — 2018-07-31

## README

# 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去看。

---
_Source: https://npm.io/package/vue-screen-layout · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._