# @fekit/mc-view

> 原生JS视图控制器

Latest version **1.1.2** (published 2020-01-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fekit/mc-view
pnpm add @fekit/mc-view
yarn add @fekit/mc-view
bun add @fekit/mc-view
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2020-01-09 |
| First published | 2019-12-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 42.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | xiaojunbo |
| Maintainers | xiaojunbo |
| Keywords | view |

## Links

- npm: https://www.npmjs.com/package/@fekit/mc-view
- Repository: https://gitlab.com/fekits/mc-view
- Homepage: https://gitlab.com/fekits/mc-view#readme
- Issues: https://gitlab.com/fekits/mc-view/issues
- npm.io page: https://npm.io/package/@fekit/mc-view

## Dependencies (2)

- [@fekit/mc-base](https://npm.io/package/@fekit/mc-base.md) ^1.0.8
- [@fekit/mc-watch](https://npm.io/package/@fekit/mc-watch.md) ^1.0.0

## Recent versions

- 1.1.2 (latest) — 2020-01-09
- 1.1.1 — 2020-01-08
- 1.1.0 — 2019-12-12
- 1.0.2 — 2019-12-11
- 1.0.1 — 2019-12-10
- 1.0.0 — 2019-12-10

## README

# @FEKIT/MC-VIEW
```$xslt
一款数据驱动的视图控制器原生JS版本，主要用于弹框，消息，单页路由的视图控制！
```

#### 索引
* [演示](#演示)
* [参数](#参数)
* [示例](#示例)
* [版本](#版本)
* [反馈](#反馈)


#### 演示
[https://fekit.asnowsoft.com/plugins/mc-view](https://fekit.asnowsoft.com/plugins/mc-view)


#### 开始

下载项目: 

```npm
npm i @fekit/mc-view
```

#### 参数
```$xslt
{
  el: Element,           一个DOM元素，受控制显示隐藏的元素
  state: Number,         显示或隐藏的初始状态，如果设了watch数据监听，则这个不用 0:隐藏 1:隐藏(有动画) 2:显示(有动画) 3:显示
  on: {                  状态变化时的回调
    init(){},            插件初始化之后执行
    before(){},          显示隐藏之前执行
    show() {},           显示后执行（在动画完成后执行）
    hide() {},           隐藏后执行（在动画完成后执行）
    open() {},           显示后执行
    none() {},           隐藏后执行
  },
  ev: {                  绑定点击事件的元素
    show: Element,       点击要显示的元素（有动画的）
    hide: Element,       点击要隐藏的元素（有动画的）
    open: Element,       点击要显示的元素
    none: Element,       点击要隐藏的元素
  }
}
```

#### 示例

```javascript
import view from '@fekit/mc-view';

// 实例1
let aaa = {
  data: {
    content: null,
    active: 0
  },
  on: {
    before(showParam, _this) {
      const { view, data } = _this;
      if (showParam && view === 2) {
        data.content = document.querySelector('#content').children;
        let size = data.content.length;
        for (let i = 0; i < size; i++) {
          data.content[i].className = '';
        }
        data.content[showParam].className = 'on';
        data.active = showParam;
      }
    },
    show(showParam, _this) {
      console.log('显示了');
      console.log('第一个参数 showParam 是show的入参', showParam);
      console.log('第二个参数 _this 是这个构造函数对象', _this);
    },
    hide() {
      console.log('隐藏了');
    }
  },
  el: '#poetry',
  ev: {
    show: '.show_poetry',
    hide: '.hide_poetry'
  }
};
$bus.aaa = view(aaa);

// 显示(有动画)
$bus.aaa.show();
// 隐藏(有动画)
$bus.aaa.hide();

```

#### 版本
```$xslt [last version]
v1.1.0
1. 完全重构插件，重新设计插件的使用方式与场景
```

```$xslt
v1.0.2
1. 完善文档
```

```$xslt
v1.1.0
1. 完成了核心功能
```

#### 反馈
```$xslt
如果您在使用中遇到问题，请通过以下方式联系我。
email: xiaojunbo@126.com
```

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