# vue-wangui

> ![image-20201127104427924](images/image-20201127104427924.png)

Latest version **0.0.1** (published 2020-11-30) · 0 weekly downloads

## Install

```sh
npm install vue-wangui
pnpm add vue-wangui
yarn add vue-wangui
bun add vue-wangui
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2020-11-30 |
| First published | 2020-11-30 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 115.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | 王金龙 |
| Maintainers | ruanjian5216 |

## Links

- npm: https://www.npmjs.com/package/vue-wangui
- npm.io page: https://npm.io/package/vue-wangui

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.6.11

## Recent versions

- 0.0.1 (latest) — 2020-11-30

## README

# WangSkeleton



### 头像

 ![image-20201127104427924](images/image-20201127104427924.png)

```
  // 头像
        {
          type: "avatar",
          options: {
            // 行数(默认:1)
            row: 1,
            // 列数(默认:1)
            column: 1,
            // 每个元素宽(默认40)
            width: "40px",
            // 每个元素的高(默认40)
            height: "40px",
            // 背景颜色(有默认)
            backgroundColor: "#ccc",
            // 水平对齐方式(默认:左)
            justifyContent: "flex-start",
            // 垂直对齐方式(默认:center)
            alignItems: "center",
            // 是否动画(默认:无)
            active: true,
            // 行间距(默认: 10)
            itemRowMargin: "10px",
            // 列间距(默认: 0)
            itemColumnMargin: "0px",
          },
        },
```

### 分割线

 ![image-20201127143306440](images/image-20201127143306440.png)

```
// 分割线
        {
          type: "line",
          options: {
            //  行
            row: 2,
            // 列
            column: 2,
            width: "120px",
            height: "20px",
            backgroundColor: "#ccc",
            justifyContent: "flex-start",
            // 垂直对齐方式(默认:center)
            alignItems: "center",
            // 是否动画
            active: true,
            itemRowMargin: "10px",
            // 列间距(默认: 0)
            itemColumnMargin: "0px",
          },
        },
```



### 列表

 ![image-20201127143319178](images/image-20201127143319178.png)

| API              | 内容 | 类型    | 默认值     |
| ---------------- | ---- | ------- | ---------- |
| row              |      | Number  | 4          |
| column           |      | Number  | 1          |
| width            |      | String  | 600px      |
| height           |      | String  | 20px       |
| backgroundColor  |      | String  | #F2F2F2    |
| justifyContent   |      | String  | flex-start |
| active           |      | Boolean | false      |
| itemRowMargin    |      | String  | 10px       |
| itemColumnMargin |      | String  | 0px        |
| firstWidth       |      | String  | 200px      |
| lastWidth        |      | String  | ''         |
| alignItems       |      | String  | center     |

使用

```
options: {
            active: true,
          }
```



### 卡片

 ![image-20201127104404323](images/image-20201127104404323.png)

```
 // 卡片
        {
          type: "card",
          options: {
            // 行数(默认:1)
            row: 2,
            // 列数(默认:1)
            column: 2,
            // 每个元素宽(默认:30)
            width: "30px",
            // 每个元素的高(默认:30)
            height: "30px",
            // 背景颜色(有默认)
            backgroundColor: "#ccc",
            // 对齐方式(默认:左)
            justifyContent: "flex-start",
            // 是否动画(默认:无)
            active: true,
             // 行间距(默认:10)
            itemRowMargin: "10px",
            // 列间距(默认: 0)
            itemColumnMargin: "0px",
            // 垂直对齐方式(默认:center)
            alignItems: "center",
          },
        },
```

### 全局属性

```
 <WangSkeleton height="500px" :options="options" />
```

|       API       |        内容        |  类型   |              值              | 默认值 |
| :-------------: | :----------------: | :-----: | :--------------------------: | :----: |
|      type       |      显示类型      | String  | avatar/line/list/card/custom |  list  |
|     options     |     全局设置项     | Object  |              {}              |   {}   |
| childrenOption  |   设置子组件类型   |  Array  |              []              |   []   |
|    isUseSlot    |    是否使用插槽    | Boolean |          false/true          | false  |
|      width      |       模块宽       | String  |            100px             |   ''   |
|     height      |       模块高       | String  |            100px             |   ''   |
| backgroundColor | 背景颜色（调试用） | String  |             red              |   ''   |





### 自定义

 ![image-20201127104521155](images/image-20201127104521155.png)

|      API       |      内容      |  类型   |              值              | 默认值 |
| :------------: | :------------: | :-----: | :--------------------------: | :----: |
|      type      |    显示类型    | String  | avatar/line/list/card/custom |        |
|    options     |   全局设置项   | Object  |              {}              |   {}   |
| childrenOption | 设置子组件类型 |  Array  |              []              |        |
|   isUseSlot    |  是否使用插槽  | Boolean |          false/true          | false  |
|                |                |         |                              |        |



```
 <WangSkeleton :childrenOption="childrenOption" type="custom"  />
```

#### options

* 全局配置项可以全部不设置，在每个子组件中都有默认值使用
*  传全局的配置就使用全局的配置,没有就用单独的每个item的配置(每个item的配置优先级高)

|       API        |   内容   |  类型  |
| :--------------: | :------: | :----: |
| backgroundColor  | 背景颜色 | String |
|      active      |          |        |
|  itemRowMargin   |          |        |
| itemColumnMargin |          |        |
|    alignItems    |          |        |
|  justifyContent  |          |        |
|      height      |          |        |
|      width       |          |        |
|       row        |          |        |





```
// 全局配置
      options: {
        // 背景颜色
        backgroundColor: "red",
        // 是否动画
        active: false,
      },
```

#### childrenOption

```js
 childrenOption: [
        // 头像
        {
          type: "avatar",
          options: {
            // 行数(默认:1)
            row: 1,
            // 列数(默认:1)
            column: 1,
            // 每个元素宽(默认40)
            width: "40px",
            // 每个元素的高(默认40)
            height: "40px",
            // 背景颜色(有默认)
            backgroundColor: "#ccc",
            // 水平对齐方式(默认:左)
            justifyContent: "flex-start",
            // 垂直对齐方式(默认:center)
            alignItems: "center",
            // 是否动画(默认:无)
            active: true,
            // 行间距(默认: 10)
            itemRowMargin: "10px",
            // 列间距(默认: 0)
            itemColumnMargin: "0px",
          },
        },
        // 分割线
        {
          type: "line",
          options: {
            //  行
            row: 2,
            // 列
            column: 2,
            width: "120px",
            height: "20px",
            backgroundColor: "#ccc",
            justifyContent: "flex-start",
            // 垂直对齐方式(默认:center)
            alignItems: "center",
            // 是否动画
            active: true,
            // 行间距(默认:10)
            itemRowMargin: "10px",
            // 列间距(默认: 0)
            itemColumnMargin: "0px",
          },
        },
        // 卡片
        {
          type: "card",
          options: {
            // 行数(默认:1)
            row: 2,
            // 列数(默认:1)
            column: 2,
            // 每个元素宽(默认:30)
            width: "30px",
            // 每个元素的高(默认:30)
            height: "30px",
            // 背景颜色(有默认)
            backgroundColor: "#ccc",
            // 对齐方式(默认:左)
            justifyContent: "flex-start",
            // 是否动画(默认:无)
            active: true,
             // 行间距(默认:10)
            itemRowMargin: "10px",
            // 列间距(默认: 0)
            itemColumnMargin: "0px",
            // 垂直对齐方式(默认:center)
            alignItems: "center",
          },
        },
        // 列表
        {
          type: "list",
          options: {
            // 行数(默认:1)
            row: 3,
            // 列数(默认:1)
            column: 1,
            // 每个元素宽(默认600)
            width: "600px",
            // 每个元素的高(默认20)
            height: "20px",
            // 背景颜色(默认: #F2F2F2)
            backgroundColor: "#ccc",
            // item 对齐方式(默认:左)
            justifyContent: "center",
            // 是否动画(默认:无)
            active: true,
            // 行间距
            itemRowMargin: "10px",
            // 列间距(默认: 0)
            itemColumnMargin: "0px",
            // 首条宽度(默认100)
            firstWidth: "300px",
            // 末条宽度(默认 '')
            // lastWidth: "300px",
            // 垂直对齐方式(默认:center)
            alignItems: "center",
          },
        },
      ],
```

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