@FEKIT/MC-VIEW

一款数据驱动的视图控制器原生JS版本，主要用于弹框，消息，单页路由的视图控制！

索引

• 演示
• 参数
• 示例
• 版本
• 反馈

演示

https://fekit.asnowsoft.com/plugins/mc-view

开始

下载项目:

npm i @fekit/mc-view

参数

{
  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,       点击要隐藏的元素
  }
}

示例

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();

版本

v1.1.0
1. 完全重构插件，重新设计插件的使用方式与场景

v1.0.2
1. 完善文档

v1.1.0
1. 完成了核心功能

反馈

如果您在使用中遇到问题，请通过以下方式联系我。
email: [email protected]