open-index/open-npm huggingface dataset:
npm package: @fekit/mc-animate
Description: 动画库
Author: xiaojunbo
Latest version: 1.0.8

# MC-ANIMATE

```text
.
├── am-hide-aa.scss
├── am-hide-ab.scss
├── am-hide-ac.scss
├── am-hide-ad.scss
├── am-hide-ae.scss
├── am-hide-af.scss
├── am-hide-ag.scss
├── am-hide-ah.scss
├── am-hide-ai.scss
├── am-hide-aj.scss
├── am-hide-ak.scss
├── am-hide-al.scss
├── am-hide-am.scss
├── am-hide-an.scss
├── am-layer-aa.scss
├── am-layer-ab.scss
├── am-layer-ac.scss
├── am-layer-ad.scss
├── am-layer-ae.scss
├── am-layer-af.scss
├── am-layer-ag.scss
├── am-layer-ah.scss
├── am-layer-ai.scss
├── am-layer-aj.scss
├── am-layer-ak.scss
├── am-layer-al.scss
├── am-layer-an.scss
├── am-show-aa.scss
├── am-show-ab.scss
├── am-show-ac.scss
├── am-show-ad.scss
├── am-show-ae.scss
├── am-show-af.scss
├── am-show-ag.scss
├── am-show-ah.scss
├── am-show-ai.scss
├── am-show-aj.scss
├── am-show-ak.scss
├── am-show-al.scss
├── am-show-am.scss
├── am-show-an.scss
└── am-side-b.scss
```
npm package: @fekit/mc-banner
Description: banner
Author: xiaojunbo
Latest version: 1.0.3

# MC-Banner
```$xslt
超轻量的简易版焦点图, 仅4K
```

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


#### 演示
[https://junbo.name/plugins/mc-banner](https://junbo.name/plugins/mc-banner/)


#### 开始

下载项目: 

```npm
npm i mc-fixtab
```

#### 参数
```$xslt
param               {Object}    入参为一个对象

param.auto          {Boolen}   是否自动播放
param.step          {String}   播放间隔时间
param.dots          {Object}   是否显示圆点
param.btns          {Object}   是否显示前进后退按钮
param.time          {Object}   切换动画时间
param.on            {Object}   回调事件合集
```

#### 示例

```javascript
// 引入插件
import McBanner from 'mc-banner';

new McBanner(document.getElementById('banner'), {
  auto: true,
  step: 5000,
  dots: true,
  btns: true,
  time: 500
});
```

#### 版本
```$xslt
v1.0.0 [Latest version]
1. 核心功能完成。
```

#### 反馈
```$xslt
如果您在使用中遇到问题，请通过以下方式联系我。
QQ: 860065202
EMAIL: xiaojunbo@126.com
```
npm package: @fekit/mc-cookie
Description: 一个操作cookie的常用方法。可以对cookie进行增删改查工作，并且可以单条或者批量操作。
Author: xiaojunbo
Latest version: 2.1.5

# MC-COOKIE

一个操作 cookie 的常用方法。可以对 cookie 进行增删改查工作，并且可以单条或者批量操作。

#### 索引

- [演示](#演示)
- [开始](#开始)
- [传参](#传参)
- [示例](#示例)
- [版本](#版本)

#### 演示

[http://fekit.cn/plugins/mc-cookie/](http://fekit.cn/plugins/mc-cookie/)

#### 开始

NPM:

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

CDN:

```html
<script type="text/javascript" src="https://cdn.fekit.cn/@fekit/mc-cookie/mc-cookie.umd.min.js"></script>
<script>
  cookie.set({ key: 'aaa', val: 111 });
</script>
```

#### 传参

    {
        key   : 'aaa',                           // 属性名
        val   : 'this is aaa; ',                 // 属性值
        domain: '',                              // 域名（默认不设为当前页面域名，一般不用设置）
        path  : '',                              // 域名下子路经（默认不设，一般不用设置）
        time  : '+{1y1m11d1h1n1s}'               // + 在现在开始算起的y年m月d日h时n分s秒后失效, 可以仅设置其中一个，比如1d=1天后失效
                '2022-12-12 10:0:0'              // 以字符串形式传入指定时间
                1665367200000                    // 转入时间戳
                new Date('2022-12-22 10:0:0')    // 直接传时间对象
    }

## 示例

设置一个属性:

```javascript
// 引入插件文件,后面的示例略过
import cookie from '@fekit/mc-cookie';
cookie.set({
  key: 'aaa',
  val: 'aaa_111$222#333@444%555*666',
});
```

设置多个属性:

```javascript
cookie.set([
  {
    key: 'bbb',
    val: 'bbb_abc+123+中文+〜！#¥%……&*（）',
    time: '+{1d}', // 1天后失效
  },
  {
    key: 'ccc',
    val: 'ccc_abc+123+中文+〜！#¥%……&*（）',
    time: '+{2d5h30m}', // 2天5小时30分钟后失效
  },
  {
    key: 'ddd',
    val: 'ddd_abc+123+中文+〜！#¥%……&*（）',
    time: '2022-12-12', // 在2022年12月12日0点0分0秒失败
  },
]);
```

获取一个属性:

```javascript
let aaa = cookie.get('aaa');
console.log(aaa);
```

以数组形式获取多个属性:

```javascript
let aList = cookie.get(['aaa', 'bbb', 'ccc']);
console.log(aList);
```

以对象形式获取多个属性:

```javascript
let oList = cookie.get({ a: 'aaa', keyName: 'bbb', abc: 'ccc' });
console.log(oList);
```

获取全部属性并返回数组:

```javascript
let all = cookie.all();
console.log(all);
```

另外一种方便灵活的用法:

```javascript
let all = cookie.all();

// 我想获取aaa
console.log(all.aaa);
// 还需获取ccc
console.log(all.ccc);
```

删除一个属性:

```javascript
cookie.del('aaa');
```

删除多个属性:

```javascript
cookie.del(['aaa', 'bbb', 'ccc']);
```

删除全部属性:

```javascript
cookie.del('*');
```

判断是否有某个属性:

```javascript
let hasAAA = cookie.has('aaa');
console.log(hasAAA);
```

#### 版本

```$xslt
v2.1.1 [Latest version]
1. 优化time设置失效时间的入参,添加多种入参方式
```

```$xslt
v2.0.9
1. 修复package.json配置错误
```

```$xslt
v2.0.8
1. 修改了打包工具
2. 提供了esm和umd两种方式
```

#### 反馈

```$xslt
如果您在使用中遇到问题，请通过以下方式联系我。
QQ: 860065202
EMAIL: xiaojunbo@126.com
```
npm package: @fekit/mc-editor
Description: scroll to id or pos
Author: xiaojunbo
Latest version: 1.0.2

# MC-URL
```$xslt
一款URL网址传参操作插件，可以单个或批量的对网址hash或search参数进行增删改查操作。亮点是容错能力强，可批量操作，可以开启错误或无效参数自动过滤。
```

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


#### 演示
[http://www.junbo.name/plugins/mc-url](http://www.junbo.name/plugins/mc-url)


#### 开始

下载项目: 

```npm
npm i mc-url
```

#### 参数
```$xslt
  // 新建实例的参数
  let myUrl = new McURL({
    type  : '#' | '?',       {String}  必填，填写'#'则新建一个操作hash值的实例，填写'?'则新建一个操作search值的实例
    filter: true | false,    {Boolean} 选填，为true则开启无效参数纠错与过滤
  })
  
  // 操作网址时的参数
  myUrl.set(
    opt,                     {*} 可以是字符，也可以是数组也可以是对象
    urlString                {String} 指定网址，对当前页面的网址进行操作时不要填写此项
  )
       
```

#### 示例

```javascript
import McURL from './mc-url';

// 新建一个hash值实例
let hash = new McURL({
    type : '#'
});

// 设置一条
hash.set({
  key: 'aaa',
  val: 111
});

// 设置多条
hash.set([
  {
    key: 'bbb',
    val: 222
  },
  {
    key: 'ccc',
    val: 333
  }
]);

// 删除一条
hash.del('aaa');

// 删除多条
hash.del(['bbb','ccc']);

// 删除全部
hash.del('*');

// 获取一条
hash.get('aaa');

// 获取多条并以数组格式返回
hash.get(['bbb','ccc']);

// 获取多条并以对象格式返回
hash.get({
  a:'aaa',
  bbb:'bbb'
});

// 获取全部
hash.all();

// 是否有某一条？
hash.has('ddd');


// 操作search
let myUrl = new McURL({
  type: '?',
  filter: true
});

// 增，删，改，查跟上面hash一模一样，省略...

// 操作不是当前页面的网址
let oldUrl = 'https://junbo.name?aaa=111&bbb=222&ccc=333';
// 获取一个网址中的一个参数属性值
let aaa = myUrl.get('aaa',oldUrl);
console.log(aaa) // -> 111

let newUrl = myUrl.set([
  {
    key:'ddd',
    val:444
  },
  {
    key:'eee',
    val:555
  }
],oldUrl);

console.log(newUrl) // -> https://junbo.name?aaa=111&bbb=222&ccc=333&ddd=444&eee=555

```

#### 版本
```$xslt
v2.0.1 [Latest version]
1. 使用UMD方式。
```

```$xslt
v2.0.0
1. 重构成构造函数，可以new多个实例并设置为不同的主题同时使用。
2. 优化了新提示冲掉上一条提示时的性能与稳定性问题并让冲掉过程动画更平滑
3. 新增了一款主题mc-editor-ac
4. 文字内容入参名称msg改为text
5. 修复了一个当icon未设置时仍然生成了icon图标占位的小BUG
```

```$xslt
v1.0.3
1. 废除回调函数then的用法并新增了on事件群。on里面有show及hide回调
```

```$xslt
v1.0.2 
1. 此版本除了模块化使用本插件，还将方法挂载在了window下的fekit对象下，除了模块化引用还可以直接用fekit.mcToast方法。
```
```$xslt
v1.0.1
1. 此版本精简了代码，取消了onshow和onhide，回调合并为一个then，可以通赤then回调的传参来判断是显示还是消失及其它一些操作。
```

#### 反馈
```$xslt
如果您在使用中遇到问题，请通过以下方式联系我。
QQ: 860065202
EMAIL: xiaojunbo@126.com
```
npm package: @fekit/mc-fixed
Description: 指定元素滚动到窗口指定位置时固定在指定位置
Author: xiaojunbo
Latest version: 1.2.5

## MC-FIXED

```$xslt
指定元素滚动到窗口指定位置时固定在指定位置。
```

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


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


#### 开始
在线引用:
```html
<script src="https://cdn.fekit.cn/mc-fixed/1.1.2/mc-fixed.min.js"></script>
```

下载项目: 
```npm
npm i @fekit/mc-fixed
```

#### 参数
```$xslt
  @param  param              {Object}    * 入参
  @param  param.el           {Element}   * 需要监听的DOM节点
  @param  param.area         {Element}     作用范围区域 (选填，默认为body)
  @param  param.wrap         {Element}     动态参考元素 (选填，如不填写则为其父元素)
  @param  param.top          {String}      偏移量值 (选填，默认为0)
  @param  param.fixedStyle   {String}      固定时的样式
  @param  param.fixedClass   {String}      固定时的CLASS
  @param  param.on           {Object}      回调集
  @param  param.fixed        {Function}    固定时
  @param  param.reduced      {Function}    还原时
```

#### 示例

前置条件
```html
// 使用此插件，必须在需要固定的元素外面包一层容器，且此容器尺寸与位置必须和固定元素一样大小或不设置任何尺寸与位置属性。
<div>
  <div id="el"></div>
</div>
```

```javascript
// 楼层埋点插件
import McFixed from '@fekit/mc-fixed';

// 新建一个在ID为f3的区域范围内滚动到顶部60px时固定的实例。
new McFixed({
  el: document.getElementById('f3_tab'),
  area: document.getElementById('f3'),
  zIndex: 999,
  top: 60
});

// 设置一个不设定作用范围的实例,默认为整个body区域，顶部为0时固定的实例，并且设置层级为1001,固定时触发一个回调。
new McFixed({
  el: document.getElementById('f1_tab'),
  fixedClass:'f1_fixed', // 在这个设置的class下写固定后的样式
  on:{
    fixed(){
      console.log(_this);
    }
  }
});
```

#### 版本
```$xslt 
v1.1.2 [Latest version]
1. 优化插件对外部使用环境的容错能力
```

```$xslt 
v1.1.0
1. 优化当导航尺寸发生变化时的自适应功能
```

```$xslt 
v1.0.8
1. 优化当窗口发生变化时的自适应功能
```

```$xslt 
v1.0.7
1. 优化当窗口发生变化时的自适应功能
```

```$xslt 
v1.0.6
1. 还是那个className的bug
```

```$xslt 
v1.0.5
1. 修复一个处理className的bug
```

```$xslt 
v1.0.4
1. 原fixedCss入参属性名改为fixedStyle。用法未变。
2. 新增一个fixedClass入参，当固定时设置一个class，这个class可以预先写好固定时的样式。当设有fixedClass时fixedStyle仅设置top，其它样式需要在class中写样式。
3. 固定或还原状态切换时仅触发一次事件。原来是只要滚动就不停的触发固定或还原事件。
```

```$xslt
v1.0.3
1. 非核心优化
```

```$xslt
v1.0.2
1. 非核心优化
```

```$xslt
v1.0.1
1. 修复安卓兼容性问题
2. 优化指定区域内显示的元素在区域滚动到底部时元素跟随区域底部渐渐滚出可视区外。
```

```$xslt
v1.0.0
1. 此版本完成了核心功能。
```
#### 反馈
```$xslt
如果您在使用中遇到问题，请通过以下方式联系我。
QQ: 860065202
EMAIL: xiaojunbo@126.com
```
npm package: @fekit/mc-fixtab
Description: 根据楼层自动生成楼层相关联的导航。
Author: xiaojunbo
Latest version: 1.0.1

# MC-FIXTAB
```$xslt
根据楼层自动生成楼层相关联的导航。
```

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


#### 演示
[https://junbo.name/plugins/mc-fixtab](https://junbo.name/plugins/mc-fixtab/)


#### 开始

下载项目: 

```npm
npm i mc-fixtab
```

#### 参数
```$xslt
param               {Object}    入参为一个对象

param.floors        {Array | NodeList}   DOM节点选择器，可以是id,class,name,data自定义属性等等
param.navArea       {String}             导航容器
param.floorInfo     {Object}             参考mc-floor插件的入参，详情请见https://gitlab.com/fekits/mc-floor
param.fixedInfo     {Object}             参考mc-fixed插件的入参，详情请见https://gitlab.com/fekits/mc-fixed
param.scrollToInfo  {Object}             参考mc-scrollto插件的入参，详情请见https://gitlab.com/fekits/mc-fixed
param.on            {Object}             回调事件集
```

#### 示例

```javascript
// 引入插件
import McFixtab from 'mc-fixtab';

// 示例用的跟楼层关联的导航
let eFloors = document.querySelectorAll('.track_floor');

import McFixTab from 'mc-fixtab';

let myTab = new McFixTab({
  floors: eFloors,
  navArea: document.getElementById('floor_nav'),
  fixedClass: 'is-fixed',
  on: {
    fixed(_this) {
      console.log(_this);
    }
  }
});
```

#### 版本
```$xslt
v1.1.9
1. 重构插件提高性能与可靠性
```

```$xslt
v1.1.8
1. 为展开收缩按钮添加一个回调事件on.expand
```

```$xslt
v1.1.7
1. 更新了mc-fixed插件
```

```$xslt
v1.1.5
1. 新增导航展开按钮 navsInfo: {expand: true, expandDefaultStatus: 0} expand:是否开启展开按钮？ expandDefaultStatus：默认展开或收起
```

```$xslt
v1.0.8
1. 优化可靠性。
```

```$xslt
v1.0.7
1. add,del新增回调函数。
```

```$xslt
v1.0.0
1. 核心功能完成。
```

#### 反馈
```$xslt
如果您在使用中遇到问题，请通过以下方式联系我。
QQ: 860065202
EMAIL: xiaojunbo@126.com
```
npm package: @fekit/mc-jsonp
Description: jsonp
Author: xiaojunbo
Latest version: 1.0.2

# MC-JSONP

```$xslt
一个轻量的JSONP接口请求插件，用法和属性名和jquery的ajax请求jsonp差不多。
```

#### 索引

- [演示](#演示)
- [参数](#参数)
- [示例](#示例)
- [版本](#版本)
- [反馈](#反馈)

#### 演示

[https://fekit.asnowsoft.com/plugins/mc-jsonp](https://fekit.asnowsoft.com/plugins/mc-jsonp/)

#### 开始

下载项目:

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

#### 参数

```$xslt
param                  {Object}        参数
param.url              {String}        接口网址
param.data             {Object}        接口请求参数
param.jsonpCallback    {String}        接口回调函数名   name 固定的函数名  name{n}函数名后跟递增数字  name{t}函数名后跟时间戳 {N和T大小写均可}
param.timeout          {Number}        接口请求超时时间
```

#### 示例

```javascript

import mcJsonp from './mc-jsonp';

let myData = mcJsonp({
  url: 'http://baike.baidu.com/api/openapi/BaikeLemmaCardApi',
  jsonpCallback: 'JSONP{N}',
  data: {
      scope: '103',
      format: 'json',
      appid: '379020',
      bk_key: bk_key,
      bk_length: 100
  }
});
myData.then(function(res){
  console.log(res)
})


// 多个请求
let aaa = mcJsonp({
  url: 'http://baike.baidu.com/api/openapi/BaikeLemmaCardApi',
  jsonpCallback: 'JSONP{N}',
  data: {
    scope: '103',
    format: 'json',
    appid: '379020',
    bk_key: '前端',
    bk_length: 100
  }
});

let bbb = mcJsonp({
  url: 'http://baike.baidu.com/api/openapi/BaikeLemmaCardApi?scope=103&format=json&appid=379020&bk_length=100',
  jsonpCallback: 'JSONP{N}',
  data: {
    bk_key: '开发'
  }
});

Promise.all([aaa, bbb]).then(function ([aaa, bbb]) {
  console.log(aaa, bbb);
});
```

#### 版本
```$xslt
v1.0.2 [Latest version]
1. 修复一些文档编写错识
```

```$xslt
v1.0.1
1. 修复一个无任何入参时拼接参数出错的BUG
```

```$xslt
v1.0.0
1. 核心功能完成。
```

#### 反馈

```$xslt
如果您在使用中遇到问题，请通过以下方式联系我。
QQ: 860065202
EMAIL: xiaojunbo@126.com
```
npm package: @fekit/mc-lazyload
Description: 滚动到可视区域时播放动画
Author: xiaojunbo
Latest version: 1.0.4

# MC-INVIEW
```$xslt
页面滚动时监听指定元素滚动到可视区域时播放动画
```

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


#### 演示
[http://www.junbo.name/plugins/mc-inview](http://www.junbo.name/plugins/mc-inview)


#### 开始

下载项目: 

```npm
npm i mc-inview
```

#### 参数
```$xslt
el      {String}   选择器
theme   {String}   插件配套的动画主题
offset  {Number}   元素触发动画时的偏移量 0-1
once    {Number}   是否仅播放一次动画
on:{
    view  {Function}  显示时触发
    none  {Function}  隐去时触发
}
```

#### 示例

```javascript
import McInview from './mc-inview';

// 楼层埋点
new McInview({
  el: '.floor',
  on: {
    view(dom) {
      console.log(dom, '这个元素滚动到可视区了');
    }
  }
});
```

#### 版本
```$xslt
v1.0.4 
1. 给懒加载的图片父级元素添加一个标误符用于控制在一些与图片平级元素的状态。
```

```$xslt
v1.0.2 
1. 重构核心代码，优化性能
```
```$xslt
v1.0.1
1. 此版本精简了代码，取消了onshow和onhide，回调合并为一个then，可以通赤then回调的传参来判断是显示还是消失及其它一些操作。
```

#### 反馈
```$xslt
如果您在使用中遇到问题，请通过以下方式联系我。
QQ: 860065202
EMAIL: xiaojunbo@126.com
```
npm package: @fekit/mc-react-view
Description: REACT组件视图控制器
Author: xiaojunbo
Latest version: 1.0.6

# MC-REACT-VIEW
```$xslt

视图控制器

目的：为了使组件保持干净并专注于内容本身，将组件显示隐藏等操作从组件文件中抽象出来。从而减少每个组件的冗余代码与操作。

1、组件载入时"created"，为组件添加视图控制器方法，此方法将自动为组件挂载视图显示、隐藏与监听状态变化的回调事件。流程请看以下示例：

   A组件载入
   ↓
   为A组件添加视图控制器
   ↓
   A.show()  A.hide()  A.event() ...   视图控制器为组件挂载了显示隐藏与组件内的事件回调等方法
   ↓
   将A组件挂载到全局事件总线this.$events
   ↓
   在全局任意地方可以使用全局事件总线访问A组件及其属性与方法
   ↓
   例如：
   this.$events.A.show() 显示A组件
   ↓
   例如：
   this.$events.A.hide() 隐藏A组件
   ↓
   并且在组件的显示或隐藏事件中都可以访问到组件的事件回调
   ↓
   例如：
   React.$Bus.A.show({
     on:{
       show($this){
         // 当A组件显示时做些事情...
         // 并且可以访问到A组件本身_this
       },
       hide($this){
         // 当A组件隐藏时做些事情...
       },
       event(name){
         // A组件内暴露的一些事件...

         // 比如执行A组件内名字为login的事件
         if(name==='login'){
           // 去登录...
         }
       }
     }
   })

1、词汇说明：

   状态码：

   状态码有哪些？
   状态码"status"目前有0=删除，1=隐藏，2=显示

   状态码为什么可以控制组件显示？
   在组件的总容器标签上写上 v-if="status" 和view="status"，当"status"=0时相当于v-if=，0就是false，此时组件就删除了。而当status大于0时，v-if相法于为true,就是显示状态；
   而view=1时。组件有配套的CSS中写了当[view="1"]时开始播放一个隐藏的animation动画，同样的当[view="2"]时播放一个显示动画

   显示
   显示包含了一个从隐藏到显示的过程动画，当view=2时，触发一个显示出来的动画直到动画结束保持最后的显示状态

   隐藏
   隐藏包含了一个从显示到隐藏的过程动画和最后的隐藏状态，此时组件DOM还存在于文档中。

   删除
   如果组件直接从DOM删除，则无法播放隐藏动画，所以，在隐藏动画结束时，再将组件的DOM节点从文档中删除

```

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


#### 演示
*


#### 开始

下载项目: 
```npm
npm i mc-react-view
```

#### 参数
```$xslt
*
```

#### 示例

```javascript
// 为级件添加事件总线和视图控制器
constructor(props) {
    ...
    // 事件总线+视图控制器
    React.Bus.Load = React.view(this);
    ...
}

// 在项目的任意组件中使用
React.Bus.Load.show();

// 一个复杂的示例
React.Bus.Load.show({
  // 在显示前顺便传入一些数据
  state:{
    aaa:'this is aaa',
    bbb:'this is bbb'
  },
  // 顺便发一个埋点
  track:{
    id: 'xxx',
    param: 'xxx'
  },
  // 顺便监听一堆回调
  on:{
    show(){
      // 组件显示后执行  
    },
    hide(){
      // 组件隐藏后执行  
    },
    none(){
      // 组件移除后执行  
    },
    xxx(){
      // 其它组件内爆露的  
    }   
  }
});


React.Bus.Load.hide();
React.Bus.Load.none();
React.Bus.Load.when({
  event1(){
    console.log('组件内向外发送的事件之一');
  }
});
```

#### 版本

```$xslt
v1.0.5 [Last Version]
1. 绑定监听动画事件的DOM不再需要手工写入ref='anim';而是在mc-react-view中从React内部属_reactInternalFiber.alternate.child.stateNode找到真实节点。我不确定这是否可靠，但是我仍想试试。
```

```$xslt
v1.0.3 [Last Version]
1. 添加一个when用于监听与接收组件内向外发送的事件
```

```$xslt
v1.0.0
1. 核心功能完成。
```

#### 反馈
```$xslt
如果您在使用中遇到问题，请通过以下方式联系我。
QQ: 860065202
EMAIL: xiaojunbo@126.com
```
npm package: @fekit/mc-scale
Description: scale内核的自适应解决方案，这个方案在一些特殊场景下使用。在大多数场景下建议使用https://www.npmjs.com/package/@fekit/mc-ratio
Author: xiaojunbo
Latest version: 1.0.6

# MC-SCALE

scale 内核的自适应解决方案，这个方案在一些特殊场景下使用。在大多数场景下建议使用 [https://www.npmjs.com/package/@fekit/mc-ratio](https://www.npmjs.com/package/@fekit/mc-ratio)

## 索引

- [演示](#演示)
- [安装](#安装)
- [参数](#参数)
- [示例](#示例)
- [版本](#版本)

## 演示

- 电脑：[https://fekit.cn/plugins/mc-scale/](https://fekit.cn/devices/#page=home&phone=2&browser=0&group=0&guide=0&url=https%3A%2F%2Ffekit.cn%2Fplugins%2Fmc-scale%2F)
- 手机：[https://fekit.cn/plugins/mc-scale/](https://fekit.cn/plugins/mc-scale/)

## 安装

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

## 参数

```
    {
        el   : 'id',               {DomObject}   要缩放的DOM对象
        size : [750, 1334],        {Number}      设计稿的尺寸
        full : true | false,       {Boolean}     是否开启全屏模式？如果开启开屏模式则对宽度和高度双向自适应 *
        fixed: 2                   {Number}      设置字号精度为小数点后2，一般建议为2位
        max  : 750                 {Number}      最大尺寸，超过这个尺寸不再放大
        min  : 320                 {Number}      最小尺寸，超过这个尺寸不再缩小
        then : function () {}      {Function}    自适应字号改变时的回调
    }
```

## 示例

基础自适应：

```javascript
scale({
  el: document.getElementId('area'),
  size: [750, 1334] // 设计稿的尺寸
});
```

双向自适应：

```javascript
scale({
  el: document.getElementId('area'),
  size: [750, 1334], // 设计稿的尺寸
  full: true, // 开启全屏模式，将对宽度和高度双向自适应缩放，这种模式一般用于无滚动条的全屏页面。
  fixed: 2 // 设置字号精度为小数点后2位
});
```

限制最大尺寸：

```javascript
scale({
  el: document.getElementId('area'),
  size: [750, 1334], // 设计稿的尺寸
  full: true, // 开启全屏模式，将对宽度和高度双向自适应缩放，这种模式一般用于无滚动条的全屏页面。
  max: 750 // 超过750的尺寸不再放大
});
```

局部自适应

```javascript
// 以下示例仅对指定ID为area的元素做自适应，需要注意的是，如果你仅对网页中的部分区域做自适应，请勿开启dpr功能，该功能将影响全局网页
scale({
  el: document.getElementId('area'), // 为ID为area的标签设置自适应字号，当字号不是设置在HTML根标签时，只能在区域内用em方案自适应
  size: [750, 1334], // 设计稿的尺寸
  fixed: 2
});
```

## 版本

```
v1.0.5 [Latest version]
1、非功能性升级
```

```
v1.0.4
1、非功能性升级
```

```
v1.0.3
1、添加min和max属性,大于或小于某个值后不再缩放
```

```
v1.0.0
1、由@fekit/mc-ratio修改而成。继承了@fekit/mc-ratio的所有入参及功能
```
npm package: @fekit/mc-toast
Description: 一个“TOAST”插件，可扩展各种主题样式，目前已有三款主题可用，欢迎使用或开发更多主题。
Author: xiaojunbo
Latest version: 2.0.8

# MC-RATIO

一个“TOAST”插件，可扩展各种主题样式，目前已有三款主题可用，欢迎使用或开发更多主题。此NPM包最新版使用ts重构并从@fekit/mc-toast移到@fekit/toast

## 索引

- [演示](#演示)
- [安装](#安装)
- [参数](#参数)
- [示例](#示例)
- [版本](#版本)

## 演示

[https://fekit.cn/plugins/mc-toast/](https://fekit.cn/plugins/mc-toast/)

## 安装

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

## 参数

```
    {
        time  : 3000,                       //  {数字}选填，显示时间,默认为2000
        icon  : type,                       //  {字符}选填，状态类型并显示状态图片有成功success,失败error,警告warning,网络network,加载中loading五种
        text  : '提示文案',                  //  {字符}必填，提示文案 *
        theme : theme,                      //  {字符}必填，主题
        on  : {                             //  {函数}选填，显示和消失时的回调传参中的status可以判断是显示或是消失，code可以对显示出的代码进一步操作.
            show() {
                console.log('出来了〜');
            },
            hide() {
                console.log('消失了〜');
            }
        }
    }

```

## 示例

```javascript
import McToast from './mc-toast';

let toast = new McToast({
  theme: 'ac', // 在这里设置的只是这个实例公共的，在使用时仍然可以在show函数的入参中设置并覆盖掉这里的公共设置
  time: 3000
});

let oBtn2 = document.getElementById('btn2');
oBtn2.onclick = function () {
  // 显示提示消息
  toast.show({
    icon: 'success',
    text: '一第操作成功的提示消息',
    on: {
      show() {
        console.log('提示消息出来了〜');
      },
      hide() {
        console.log('提示消息消失了〜');
      }
    }
  });
};

// 如果实例公共属性中或show中传入了time则无需手动调用hide方法。但是有时候不能设置时间自动关闭，则不要入参time或time为空，这时我们就需要在合适的时机隐藏它。方法如下：
toast.show({
  time: '',
  icon: 'loading',
  text: '等我请求了一个接口并获得数据后再关闭我吧！'
});
// 手动关闭它
toast.hide({
  on: {
    hide() {
      console.log('提示消息消失了〜');
    }
  }
});
```

## 版本
```
v2.0.7 [Latest version]
1. NPM包从mc-toast移到@fekit/mc-toast
```

```
v2.0.1
1. 使用UMD方式。
```

```
v2.0.0
1. 重构成构造函数，可以new多个实例并设置为不同的主题同时使用。
2. 优化了新提示冲掉上一条提示时的性能与稳定性问题并让冲掉过程动画更平滑
3. 新增了一款主题mc-toast-ac
4. 文字内容入参名称msg改为text
5. 修复了一个当icon未设置时仍然生成了icon图标占位的小BUG
```

```
v1.0.3
1. 废除回调函数then的用法并新增了on事件群。on里面有show及hide回调
```

```
v1.0.2
1. 此版本除了模块化使用本插件，还将方法挂载在了window下的fekit对象下，除了模块化引用还可以直接用fekit.mcToast方法。
```

```
v1.0.1
1. 此版本精简了代码，取消了onshow和onhide，回调合并为一个then，可以通赤then回调的传参来判断是显示还是消失及其它一些操作。
```
npm package: @fekit/mc-url
Description: url
Author: xiaojunbo
Latest version: 1.0.2

#MC-URL

一款URL网址传参操作插件，可以单个或批量的对网址hash或search参数进行增删改查操作。亮点是容错能力强，可批量操作，可以开启错误或无效参数自动过滤。


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


## 演示
[http://www.junbo.name/plugins/mc-url](http://www.junbo.name/plugins/mc-url)


## 开始

下载项目: 

```
npm i mc-url

```

## 参数
```
  // 新建实例的参数
  let myUrl = new McURL({
    type  : '#' | '?',       {String}  必填，填写'#'则新建一个操作hash值的实例，填写'?'则新建一个操作search值的实例
    filter: true | false,    {Boolean} 选填，为true则开启无效参数纠错与过滤
  })
  
  // 操作网址时的参数
  myUrl.set(
    opt,                     {*} 可以是字符，也可以是数组也可以是对象
    urlString                {String} 指定网址，对当前页面的网址进行操作时不要填写此项
  )
       
```

## 示例

```javascript
import McURL from './mc-url';

// 新建一个hash值实例
let hash = new McURL({
    type : '#'
});

// 设置一条
hash.set({
  key: 'aaa',
  val: 111
});

// 设置多条
hash.set([
  {
    key: 'bbb',
    val: 222
  },
  {
    key: 'ccc',
    val: 333
  }
]);

// 删除一条
hash.del('aaa');

// 删除多条
hash.del(['bbb','ccc']);

// 删除全部
hash.del('*');

// 获取一条
hash.get('aaa');

// 获取多条并以数组格式返回
hash.get(['bbb','ccc']);

// 获取多条并以对象格式返回
hash.get({
  a:'aaa',
  bbb:'bbb'
});

// 获取全部
hash.all();

// 是否有某一条？
hash.has('ddd');


// 操作search
let myUrl = new McURL({
  type: '?',
  filter: true
});

// 增，删，改，查跟上面hash一模一样，省略...

// 操作不是当前页面的网址
let oldUrl = 'https://junbo.name?aaa=111&bbb=222&ccc=333';
// 获取一个网址中的一个参数属性值
let aaa = myUrl.get('aaa',oldUrl);
console.log(aaa) // -> 111

let newUrl = myUrl.set([
  {
    key:'ddd',
    val:444
  },
  {
    key:'eee',
    val:555
  }
],oldUrl);

console.log(newUrl) // -> https://junbo.name?aaa=111&bbb=222&ccc=333&ddd=444&eee=555

```

## 版本
```

v1.0.1 [Latest version]
1. 兼容IE8，新增CMD方式使用。

```

```
新 mc-url 转到 @fekit/mc-url
v1.0.0
NPM包 mc-url 转到 @fekit/mc-url，版本重新开始!
```

```
v2.0.1 [Latest version]
1. 使用UMD方式。
```

```
v2.0.0
1. 重构成构造函数，可以new多个实例并设置为不同的主题同时使用。
2. 优化了新提示冲掉上一条提示时的性能与稳定性问题并让冲掉过程动画更平滑
3. 新增了一款主题mc-toast-ac
4. 文字内容入参名称msg改为text
5. 修复了一个当icon未设置时仍然生成了icon图标占位的小BUG
```

```
v1.0.3
1. 废除回调函数then的用法并新增了on事件群。on里面有show及hide回调
```

```
v1.0.2 
1. 此版本除了模块化使用本插件，还将方法挂载在了window下的fekit对象下，除了模块化引用还可以直接用fekit.mcToast方法。
```
```
v1.0.1
1. 此版本精简了代码，取消了onshow和onhide，回调合并为一个then，可以通赤then回调的传参来判断是显示还是消失及其它一些操作。
```
npm package: @fekit/mc-view
Description: 原生JS视图控制器
Author: xiaojunbo
Latest version: 1.1.2

# @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
```
npm package: @fekit/mc-vue-view
Description: VUE视图控制器
Author: xiaojunbo
Latest version: 1.1.2


 视图控制器

 目的：为了使组件保持干净并专注于内容本身，将组件显示隐藏等操作从组件文件中抽象出来。从而减少每个组件的冗余代码与操作。

 1、组件载入时"created"，为组件添加视图控制器方法，此方法将自动为组件挂载视图显示、隐藏与监听状态变化的回调事件。流程请看以下示例：

    A组件载入
    ↓
    为A组件添加视图控制器
    ↓
    A.show()  A.hide()  A.event() ...   视图控制器为组件挂载了显示隐藏与组件内的事件回调等方法
    ↓
    将A组件挂载到全局事件总线this.$bus
    ↓
    在全局任意地方可以使用全局事件总线访问A组件及其属性与方法
    ↓
    例如：
    this.$bus.A.show() 显示A组件
    ↓
    例如：
    this.$bus.A.hide() 隐藏A组件
    ↓
    并且在组件的显示或隐藏事件中都可以访问到组件的事件回调
    ↓
    例如：
    this.$bus.A.show({
      on:{
        show(_this){
          // 当A组件显示时做些事情...
          // 并且可以访问到A组件本身_this
        },
        hide(_this){
          // 当A组件隐藏时做些事情...
        },
        event(name){
          // A组件内暴露的一些事件...

          // 比如执行A组件内名字为login的事件
          if(name==='login'){
            // 去登录...
          }
        }
      }
    })

 1、词汇说明：

    状态码：

    状态码有哪些？
    状态码"status"目前有0=删除，1=隐藏，2=显示

    状态码为什么可以控制组件显示？
    在组件的总容器标签上写上 v-if="status" 和view="status"，当"status"=0时相当于v-if=，0就是false，此时组件就删除了。而当status大于0时，v-if相法于为true,就是显示状态；
    而view=1时。组件有配套的CSS中写了当[view="1"]时开始播放一个隐藏的animation动画，同样的当[view="2"]时播放一个显示动画

    显示
    显示包含了一个从隐藏到显示的过程动画，当view=2时，触发一个显示出来的动画直到动画结束保持最后的显示状态

    隐藏
    隐藏包含了一个从显示到隐藏的过程动画和最后的隐藏状态，此时组件DOM还存在于文档中。

    删除
    如果组件直接从DOM删除，则无法播放隐藏动画，所以，在隐藏动画结束时，再将组件的DOM节点从文档中删除


使用：
```javascript
created() {
  // 将方法传给事件总线
  this.$bus.Rule = this.view(this);
}
```
npm package: @fekit/mc-watch
Description: scroll to id or pos
Author: xiaojunbo
Latest version: 1.0.3

# @FEKIT/MC-WATCH
```$xslt
一个数据双向绑定的小功能插件
```

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


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


#### 开始

下载项目: 

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

#### 参数
```$xslt
{
  data:                         需要监听数据的对象
  item:                         监听对象中的一个属性名
  from:                         数据修改的来源，一般为一个input标签，但是也可以是其它标签；也可以不填，直接操作数据对象
  updated(newValue,oldValue):   数据变化时的回调,回调可以取得两个参数，一个是更新的值，一个是原来的值
}
```

#### 示例

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

  let data = {
    title:'这是一个标题'
  }

  // 实例代码1
  watch({
    data: data,
    item: 'title',
    from: document.getElementById('input'),
    updated(newValue,oldValue) {
      console.log('原来的数据是' + oldValue);
      console.log('更新的数据是' + newValue);
      document.getElementById('title').innerText = newValue;
    }
  });

```

#### 版本
```$xslt [last vension]
v1.0.3
1. 修复一个更新数据后执行两次的BUG
```

```$xslt
v1.0.0
1. 完成基础功能
```

#### 反馈
```$xslt
如果您在使用中遇到问题，请通过以下方式联系我。
email: xiaojunbo@126.com
```
npm package: @fekit/react-iscroll
Description: iscroll 封装成 react 插件
Author: xiaojunbo
Latest version: 0.6.0

# @fekit/react-iscroll

iscroll 封装成 react 插件

```typescript
import React, { useEffect, useLayoutEffect } from 'react';
// 引入插件
import Scroll from '@fekit/react-iscroll';

function Home() {
  return (
    <div className="home">
      <Scroll
        // id=""  ID 选填
        // className="" Class 选填
        options={
          {
            // iScroll 配置入参项 选填
          }
        }
        on={
          {
            // iScroll 回调事件 选填
          }
        }
        style={
          {
            // iScroll 容器样式 选填
          }
        }
      >
        <div>
          <p
            onClick={() => {
              alert(39);
            }}
          >
            this is home page
          </p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
        </div>
      </Scroll>
    </div>
  );
}

export default Home;
```
npm package: @fekit/react-usestate-callback
Description: iscroll 封装成 react 插件
Author: xiaojunbo
Latest version: 0.1.0

# @fekit/react-iscroll

iscroll 封装成 react 插件

```typescript
import React, { useEffect, useLayoutEffect } from 'react';
// 引入插件
import Scroll from '@fekit/react-iscroll';

function Home() {
  return (
    <div className="home">
      <Scroll
        // id=""  ID 选填
        // className="" Class 选填
        options={
          {
            // iScroll 配置入参项 选填
          }
        }
        on={
          {
            // iScroll 回调事件 选填
          }
        }
        style={
          {
            // iScroll 容器样式 选填
          }
        }
      >
        <div>
          <p
            onClick={() => {
              alert(39);
            }}
          >
            this is home page
          </p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
          <p>this is home page</p>
        </div>
      </Scroll>
    </div>
  );
}

export default Home;
```
npm package: @fekit/scrollto
Description: ```$xslt 一个设置滚动条缓动滚动到指定位置或指定ID标签位置的原生JS插件。 ```
Author: xiaojunbo
Latest version: 3.0.3

# MC-SCROLL

```$xslt
一个设置滚动条缓动滚动到指定位置或指定ID标签位置的原生JS插件。
```

#### 索引

- [演示](#演示)
- [参数](#参数)
- [示例](#示例)
- [版本](#版本)
- [反馈](#反馈)

#### 演示
![demo](https://plugins.fekit.cn/@fekit/scrollto/demo.gif)

[https://plugins.fekit.cn/@fekit/scrollto/](https://plugins.fekit.cn/@fekit/scrollto/)

#### 开始

下载项目:

```npm
npm i mc-scrollto
```

#### 参数

```
/**
 * 入参说明
 *
 * param.el                  {*}          指定滚动条所在的容器(可以是字符串类型的选择器比如"#idname",也可以是DOM节点document.getElementById('name'),默认不填写则为窗口滚动条。)
 * param.to                  {Obejct}     指定需要滚动的位置
 * param.animationDistance   {Number}     指定最后需要动画滚动的距离
 * param.to.x                {*}          指定需要滚动的位置（可以是数字比如100，也可以是需要滚动到的DOM元素位置比如"#f1"，DOM元素可以入参为选择器也可以直接入参DOM节点比如document.getElementById('f2')）
 * param.to.y                {*}          指定需要滚动的位置（可以是数字比如100，也可以是需要滚动到的DOM元素位置比如"#f1"，DOM元素可以入参为选择器也可以直接入参DOM节点比如document.getElementById('f2')）
 * param.offset              {Obejct}     偏移量对象
 * param.offset.x            {*}          偏移量 可以是数字(如:20),可以是正的也可以是负的
 * param.offset.y            {*}          偏移量 可以是数字(如:20),可以是正的也可以是负的
 * param.time                {Number}     指定滚动过程的时间
 * param.then                {Function}   滚动到指定位置时回调
 *
 * */
```

#### 示例

滚动到指定位置

```javascript
// 引入模块
import mcScrollTo from './mc-scrollto';

// 纵横双向滚动，并且横向位置滚动到一个指定元素的位置。纵向指定固定的数字。
mcScrollTo({
  el: '#header-title', // 滚动条容器指定为ID为header-title的元素，这里也可以写document.getElementById('header-title')
  to: {
    x: '#to_span', // 横向滚动到指定ID为to_span的标签的位置
    y: 200, // 纵向滚动到200px
  },
  offset: {
    x: 0, // 横向偏移0,可以不写
    y: 50, // 纵向偏移50px,就是200+50=250，也可以为负数
  },
  time: 600, // 滚动动画时间
});

// 滚动到指定位置,不设定el则默认为窗口的滚动条
mcScrollTo({
  to: {
    y: 630,
  },
  time: 300,
});

// 不设定el则默认为窗口的滚动条,滚动到一个class为scroll-to-f5的元素。执行一个回调并返回滚动条的目标位置
mcScrollTo({
  to: {
    y: '.scroll-to-f5',
  },
  then: function(pos) {
    alert(JSON.stringify(pos));
  },
});
```

#### 版本

```$xslt
v3.0.0 [Latest version]
1. TS 重构
2. @fekit/mc-scrollto 更名为 @fekit/scrollto
```

```$xslt
v2.1.5
1. 优化animationDistance快启慢停
```

```$xslt
v2.1.4
1. 新增speed属性从1-16，数字越小中间瞬移越快。两头动画缓动，设置为1时，基本是一启动就已到目的地。慢启-瞬移-慢停,中间瞬移自然无缝.
```

```$xslt
v2.1.0
1. 新增attrStatus状态标识，当正在滚动时，会在html标答添加一个data-scrolling="1"的标识，这个标识可用于暂停与禁止全页动画或其任务，等滚动完成后再继续.
```

```$xslt
v2.0.9
1. 新增animationDistance属性，这个属性默认为false不开启，如果开启则直接填写数字。数字是从开始位置一瞬间跳到距离目标位置还有animationDistance设定置的位置然后动画缓动滚到目标位置
```

```$xslt
v2.0.7
1. 这一版本变化较大，几乎重构了所有入参属性。
2. 移除了入参id,请使用el代替id
3. 此版本新增了可设置操作指定元素的滚动条，之前仅能操作窗口的滚动条。el属性可以入参为节点元素比如document.getElementById('xxx')，也可以是类型为字字符串的选择器比如'.xxx',也可以不写默认为窗口的滚动条。
4. 此版本新增了可操作横向滚动，之前仅支持纵向滚动。并且支持入参为固定数字，滚动到的元素位置（又可以直接写入元素document.getElementById('xxx')，也可以直接写选择器'#xxx'）
5. 优化了复杂多层定位场景下的定位准确性。
```

```$xslt
v2.0.6
1、新增功能offset偏移量，可以在指定的位置或标签ID的基础上进行正负偏移。比如滚动到ID为"F1"的标答位置但负偏移10PX或负5%；
```

```$xslt
v2.0.5
1、完成核心功能：滚动到指定ID标签的位置或滚动到指定位置-稳定版
```
npm package: @fekit/storage
Description: 一个操作 本地存储 ( localStorage ) 的常用方法。可以对 localStorage 进行增删改查工作，并且可以单条或者批量操作。
Author: xiaojunbo
Latest version: 0.1.4

# @fekit/storage

一个操作 本地存储 ( localStorage ) 的常用方法。可以对 localStorage 进行增删改查工作，并且可以单条或者批量操作。

## 索引

- [演示](#演示)
- [安装](#安装)
- [示例](#示例)
- [版本](#版本)

## 演示

[https://fekit.cn/plugins/js/storage/](https://fekit.cn/plugins/js/storage/)

## 安装

```
npm i @fekit/storage
```

## 示例

```javascript
import storage from '@fekit/storage';

// 储存一个数据
storage.set({
  key: 'aaa',
  val: 1,
});
// 设置多个数据
storage.set([
  {
    key: 'aaa',
    val: 1,
  },
  {
    key: 'bbb',
    val: 2,
  },
]);

// 获取指定数据
const aaa = storage.get('aaa');
// 获取多个数据
const { a = '', b = '' } = storage.get({ a: 'aaa', b: 'bbb' });
// 以数组形式获取多个数据
const [aaa, bbb] = storage.get(['aaa', 'bbb']);

// 是否有某个数据
if (storage.has('aaa')) {
  // 有 aaa
} else {
  // 无 aaa
}

// 删除指定数据
storage.del('aaa');
// 删除全部数据
storage.del('*');

// 获取所有数据
const { aaa = '', bbb = '' } = storage.all();
```

## 版本

```
v0.1.0 [Latest version]
1. 实现核心功能
```

更多版本信息请移步 https://www.npmjs.com/package/@fekit/storage
npm package: @fekit/svg2pdf
Description: Convert SVG to PDF using jsPDF
Author: xiaojunbo
Latest version: 1.0.1

# @fekit/svg2pdf

Convert SVG to PDF using jsPDF

## 安装

```bash
npm install @fekit/svg2pdf jspdf
```

或

```bash
yarn add @fekit/svg2pdf jspdf
```

## 使用

### 基础用法

```typescript
import { jsPDF } from 'jspdf';
import { svg2pdf } from '@fekit/svg2pdf';

// 获取 SVG 元素
const svgElement = document.getElementById('mySvg');

// 创建 PDF 实例
const pdf = new jsPDF();

// 将 SVG 转换为 PDF
await svg2pdf(svgElement, pdf);

// 保存 PDF
pdf.save('output.pdf');
```

### 使用 jsPDF 扩展方法

```typescript
import { jsPDF } from 'jspdf';
import '@fekit/svg2pdf'; // 导入后会自动扩展 jsPDF

const svgElement = document.getElementById('mySvg');
const pdf = new jsPDF();

// 使用扩展的 svg 方法
await pdf.svg(svgElement);

pdf.save('output.pdf');
```

### 配置选项

```typescript
import { jsPDF } from 'jspdf';
import { svg2pdf } from '@fekit/svg2pdf';

const svgElement = document.getElementById('mySvg');
const pdf = new jsPDF();

await svg2pdf(svgElement, pdf, {
  x: 10,           // X 偏移量（默认：0）
  y: 10,           // Y 偏移量（默认：0）
  loadExternalStyleSheets: true  // 是否加载外部样式表（默认：false）
});

pdf.save('output.pdf');
```

## API

### svg2pdf(element, pdf, options?)

将 SVG 元素转换为 PDF。

**参数：**

- `element: SVGElement | Element | string` - SVG 元素或选择器
- `pdf: jsPDF` - jsPDF 实例
- `options?: Svg2PdfOptions` - 可选配置

**返回值：**

- `Promise<jsPDF>` - 返回 jsPDF 实例的 Promise

### Svg2PdfOptions

- `x?: number` - X 偏移量（默认：0）
- `y?: number` - Y 偏移量（默认：0）
- `loadExternalStyleSheets?: boolean` - 是否加载外部样式表（默认：false）

## TypeScript 支持

包含完整的 TypeScript 类型定义，可直接在 TypeScript 项目中使用。

## License

MIT
npm package: @fekit/tinypng-webpack-plugin
Description: a webpack plugin use tinyPNG
Author: Jilong Yu
Latest version: 5.0.1

# @fekit/tinypng-webpack-plugin

a img compress plugin use with tinyPNG for webpack.

## Get TinyPNG key

[link](https://tinypng.com/developers)

## Installation
```shell
# for webpack >= 4
$ npm install @fekit/tinypng-webpack-plugin --save-dev

# for webpack 3 & 2 & 1
$ npm install tinypng-webpack-plugin@1.0.2 --save-dev
```

## Example Webpack Config

```javascript
var tinyPngWebpackPlugin = require('tinypng-webpack-plugin');

    //in your webpack plugins array
    module.exports = {
      plugins: [
          new tinyPngWebpackPlugin({
              key:"your tinyPNG key"
          })
      ]
    }
```
## Usage
```javascript
new tinyPngWebpackPlugin({
    key:"your tinyPNG key",//can be Array, eg:['your key 1','your key 2'....]
    ext: ['png', 'jpeg', 'jpg'],//img ext name
    proxy:'http://user:pass@192.168.0.1:8080'//http proxy,eg:如果你来自中国，同时拥有shadowsocks，翻墙默认配置为 http:127.0.0.1:1080 即可。（注，该参数因为需要超时断开连接的原因，导致最后会延迟执行一会webpack。但相对于国内网络环境，用此参数还是非常划算的，测试原有两张图片，无此参数耗时2000ms+，有此参数耗时1000ms+节约近半。）
})
```
### Options Description
* key: Required, tinyPNG key
* ext: not Required, to be compress img ext name.
* proxy：not Required, a http proxy to improve the network environment.eg:http://127.0.0.1:1080

### Defaults Options
```javascript
    {
        key:'',
        ext: ['png', 'jpeg', 'jpg'],
        proxy:''
    }
```

## License
http://www.opensource.org/licenses/mit-license.php
npm package: @fekit/url
Description: 一款 URL 网址传参操作插件，可以单个或批量的对网址 hash 或 search 参数进行增删改查操作。亮点是容错能力强，可批量操作，可以开启错误或无效参数自动过滤。
Author: xiaojunbo
Latest version: 2.0.1

# @fekit/url

一款 URL 网址传参操作插件，可以单个或批量的对网址 hash 或 search 参数进行增删改查操作。亮点是容错能力强，可批量操作，可以开启错误或无效参数自动过滤。

## 索引

- [演示](#演示)
- [参数](#参数)
- [示例](#示例)
- [版本](#版本)

## 演示

[https://plugins.fekit.cn/@fekit/url/](https://plugins.fekit.cn/@fekit/url/)

## 开始

下载项目:

```
npm i @fekit/url

```

## 参数

```typescript
import UrlParam from '@fekit/url';

// 新建实例的参数
let myUrl = new UrlParam({
  type: '#' | '?', // {String}  必填，填写'#'则新建一个操作hash值的实例，填写'?'则新建一个操作search值的实例
  filter: true | false, // {Boolean} 选填，为true则开启无效参数纠错与过滤
});

// 操作网址时的参数
myUrl.set(
  opt, // {*} 可以是字符，也可以是数组也可以是对象
  urlString // {String} 指定网址，对当前页面的网址进行操作时不要填写此项
);
```

## 示例

```typescript
import { hash, search } from '@fekit/url';

// 设置一条
hash.set({
  key: 'aaa',
  val: 111,
});

// 设置多条
hash.set([
  {
    key: 'bbb',
    val: 222,
  },
  {
    key: 'ccc',
    val: 333,
  },
]);

// 删除一条
hash.del('aaa');

// 删除多条
hash.del(['bbb', 'ccc']);

// 删除全部
hash.del('*');

// 获取一条
hash.get('aaa');

// 获取多条并以数组格式返回
hash.get(['bbb', 'ccc']);

// 获取多条并以对象格式返回
hash.get({
  a: 'aaa',
  bbb: 'bbb',
});

// 获取全部
hash.all();

// 是否有某一条？
hash.has('ddd');

// 操作search
// let myUrl = new McURL({
//   type: '?',
//   filter: true,
// });

// 增，删，改，查跟上面hash一模一样，省略...

// 操作不是当前页面的网址
let oldUrl = 'https://junbo.name?aaa=111&bbb=222&ccc=333';
// 获取一个网址中的一个参数属性值
let aaa = search.get('aaa', oldUrl);
console.log(aaa); // -> 111

let newUrl = search.set(
  [
    {
      key: 'ddd',
      val: 444,
    },
    {
      key: 'eee',
      val: 555,
    },
  ],
  oldUrl
);

console.log(newUrl); // -> https://junbo.name?aaa=111&bbb=222&ccc=333&ddd=444&eee=555
```

## 版本

```
v2.0.0 [Latest version]
1. TypeScript重构
2. hash参数区分路由和参数
```

```
v1.0.1
1. 兼容IE8，新增CMD方式使用。
```

```
新 mc-url 转到 @fekit/mc-url
v1.0.0
NPM包 mc-url 转到 @fekit/mc-url，版本重新开始!
```

```
v2.0.1 [Latest version]
1. 使用UMD方式。
```

```
v2.0.0
1. 重构成构造函数，可以new多个实例并设置为不同的主题同时使用。
2. 优化了新提示冲掉上一条提示时的性能与稳定性问题并让冲掉过程动画更平滑
3. 新增了一款主题mc-toast-ac
4. 文字内容入参名称msg改为text
5. 修复了一个当icon未设置时仍然生成了icon图标占位的小BUG
```

```
v1.0.3
1. 废除回调函数then的用法并新增了on事件群。on里面有show及hide回调
```

```
v1.0.2
1. 此版本除了模块化使用本插件，还将方法挂载在了window下的fekit对象下，除了模块化引用还可以直接用fekit.mcToast方法。
```

```
v1.0.1
1. 此版本精简了代码，取消了onshow和onhide，回调合并为一个then，可以通赤then回调的传参来判断是显示还是消失及其它一些操作。
```
npm package: @fekit/utils
Description: 前端常用方法
Author: xiaojunbo
Latest version: 5.0.0

# @fekit/utils

前端常用方法

## 安装

```
yarn add @fekit/utils
```

或

```
npm i @fekit/utils
```

## 引入

```typescript
import { isString, isNumber, isBoolean, isObject, isArray, isNull, isUndefined, isEmpty, isDate, isDateString, isFunction, isElement } from '@fekit/utils';
```

## 使用

```typescript
// 类型判断
import { isString, isNumber, isBoolean, isObject, isArray, isNull, isUndefined, isEmpty, isDate, isDateString, isFunction, isElement } from '@fekit/utils';

// 获取指定对象的类型
getType();

// 判断是否是function
isFunction();

// 判断是否是Object
isObject();

// 判断是否是array
isArray();

// 判断是否是undefined
isUndefined();

// 判断是否是null
isNull();

// 判断是否是字符串
isString();

// 判断是否是布尔类型
isBoolean();

// 判断是否是一个数字
isNumber();

// 判断是否是一个日期
isDate();

// 判断是否是一个日期字符串
isDateString();

// 判断是否是一个DOM节点
isElement();

// 判断是否是一个DOM节点列表
isNodeList();

// 判断是否为空
isEmpty(0); // false
isEmpty(''); // true

// 判断是否为Base64字符串
isBase64();

// 判断是否为Blob对象
isBlob('');

// 判断是不是JSON字符串
isJsonString('{}'); // true

// 判断是不是数组字符串
isArrayString('[1]'); // true
isArrayString('[1}'); // true

// 判断是不是对象字符串
isObjectString('{}'); // true
isObjectString('xxx'); // false

// 日期处理

// 数据对比
```

## 版本

```

```
npm package: @fekit/vis
Description: 监听当前页面是否可见状态，可用于客户端转入后台又转回后触发事件
Author: xiaojunbo
Latest version: 0.1.0

# @FEKIT/VIS

监听当前页面是否可见状态，可用于客户端转入后台又转回后触发事件

## 索引

- [演示](#演示)
- [安装](#安装)
- [示例](#示例)
- [版本](#版本)

## 演示

[https://mcui.fekit.cn/#route=plugins/js/vis](https://mcui.fekit.cn/#route=plugins/js/vis/)

## 安装

```
npm i @fekit/vis
```

## 示例

```javascript
import McToast from './mc-toast';

useLayoutEffect(() => {
  // 监听页面可见性变化
  vis.listen({
    active() {
      alert('页面当前可见');
    },
    hidden() {
      alert('页面当前隐藏');
    },
  });
  return () => {
    // 清除监听听
    vis.remove();
  };
}, [home]);
```

## 版本

```
v0.1.0 [Latest version]
1. 使用ts重构
```
npm package: @felab/vue-city-selector
Description: 基于 Vue 的城市选择器
Author: 咖啡猫
Latest version: 1.1.3

# Vue-City-Selector

### 概述

> 城市选择器，基于`elementUI`二次开发此组件，所有的样式`class`都是使用 `elementUI` 原样式，基本可无副作用的引入项目使用，仅实现了基本需求，不过应该满足使用。有任何问题欢迎发布 `issue` ，我会在看到第一时间回复大家。


### 安装

```shell
npm install @felab/vue-city-selector
```

###  使用

```js
// main.js
import VCitySelector from "@felab/vue-city-selector"

Vue.use(Element)
Vue.use(VCitySelector)
```

### Attributes

| 参数               | 说明       | 类型    | 可选值            | 默认值 |
| ----------------- | ---------- | ------- | ----------------- | ------ |
| v-model(value)    | 绑定值（单选number，多选array）     | Number/Array   | --                | --     |
| placeholder       | 占位文本   | String  | --                | 请选择 |
| size              | 尺寸       | String  | medium/small/mini | --     |
| disabled          | 禁用       | Boolean | True/false        | false  |
| clearable         | 是否可以清空选项 | Boolean | True/false        | true  |
| multiple          | 是否多选 | Boolean | True/false        | false  |
| multiple-limit    | 最多选择上限 | Number |         | 0  |

### 事件

| 事件名称 | 说明             | 回调参数                                    |
| -------- | ---------------- | ------------------------------------------- |
| change   | 绑定值发生变化时 | 当前选中值cityId                               |
| blur     | 失去焦点         | --                                          |
| focus    | 获得焦点         | --                                          |

### 使用

```html
<!-- *.vue -->
<template>
  <el-form label-width="80px" ref="form" :model="form" :rules="rules" label-position="left">
    <el-form-item label="城市" prop="cityId">
      <v-city-selector
        v-model="form.cityId"
        @change="handleCitySelector"
        placeholder="请选择城市"/>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      options: [],
      rules: {
        cityId: [
          {
            required: true,
            messgae: '请选择城市',
            trigger: 'change'
          }
        ]
      },
      form: {
        cityId: null
      }
    };
  },
  methods: {
    handleCitySelector(id, name) {
    }
  }
};
</script>
```

### 依赖

```
- [Vue](https://cn.vuejs.org/)
- [ElementUI 2.x](https://element.eleme.io/)
- [vue-click-outside](https://www.npmjs.com/package/vue-click-outside)
```
npm package: @felab/vue-multi-select
Description: ## Project setup ``` yarn install ```
Latest version: 1.0.1

# vue-multi-select

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn run serve
```

### Compiles and minifies for production
```
yarn run build
```

### Run your tests
```
yarn run test
```

### Lints and fixes files
```
yarn run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
npm package: @felangel/react-bloc
Description: React Components that make it easy to implement the BLoC (Business Logic Component) design pattern. Built to be used with the bloc.js state management package.
Author: Felix Angelov
Latest version: 0.3.0

<p align="center">
<img src="https://raw.githubusercontent.com/felangel/bloc/master/docs/assets/bloc_logo_full.png" height="100" alt="Bloc" />
</p>

<p align="center">
<a href="https://github.com/felangel/bloc.js/actions"><img src="https://github.com/felangel/bloc.js/workflows/react-bloc/badge.svg" alt="build"></a>
<a href="https://codecov.io/gh/felangel/bloc.js"><img src="https://codecov.io/gh/felangel/bloc.js/branch/master/graph/badge.svg" alt="codecov"></a>
<a href="https://badge.fury.io/js/%40felangel%2Freact-bloc"><img src="https://badge.fury.io/js/%40felangel%2Freact-bloc.svg" alt="npm version"></a>
<a href="https://github.com/felangel/bloc.js"><img src="https://img.shields.io/github/stars/felangel/bloc.js.svg?style=flat&logo=github&colorB=deeppink&label=stars" alt="Star on Github"></a>
<a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/license-MIT-purple.svg" alt="License: MIT"></a>
<a href="https://discord.gg/Hc5KD3g"><img src="https://img.shields.io/discord/649708778631200778.svg?logo=discord&color=blue" alt="Discord"></a>
<a href="https://github.com/felangel/bloc"><img src="https://tinyurl.com/bloc-library" alt="Bloc Library"></a>
</p>

---

[Bloc](https://github.com/felangel/bloc) for React

This package is built to work with [bloc](https://www.npmjs.com/package/@felangel/bloc).

## Bloc Components

**BlocBuilder** is a React component which requires a `Bloc` and a `builder` function. `BlocBuilder` handles building the component in response to new states. The `builder` function will potentially be called many times and should be a [pure function](https://en.wikipedia.org/wiki/Pure_function) that returns a component in response to the state.

```tsx
<BlocBuilder
  bloc={bloc}
  builder={count => {
    return <p>{count}</p>
  }}
/>
```

If you want fine-grained control over when the builder function is called you can provide an optional `condition` to `BlocBuilder`. The `condition` takes the previous bloc state and current bloc state and returns a boolean. If `condition` returns true, `builder` will be called with `currentState` and the widget will rebuild. If `condition` returns false, `builder` will not be called with `currentState` and no rebuild will occur.

```tsx
<BlocBuilder
  bloc={bloc}
  condition={(previousState, currentState) => {
    return (previousState + currentState) % 3 === 0
  }}
  builder={count => {
    return <p>{count}</p>
  }}
/>
```

### Maintainers

- [Felix Angelov](https://github.com/felangel)
- [Erick Torres](https://github.com/erickjtorres)