# plug

**Repository Path**: aykf/plug

## Basic Information

- **Project Name**: plug
- **Description**: JS面向对象编程组件库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-07-12
- **Last Updated**: 2026-01-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 介绍

##### 自己开发的插件

##### 浏览器请求

```javascript
let ayreq = new Ayreq({
 //全局的请求头配置
     responseType:"json",
     headers:{
         contentType:"json",
     },
});
//此实例的全局异常错误处理  这里 callback(err)会将错误直接返回为结果 
//onSuccess和onError的用法相同
ayreq.onError = function(err,callback){callback(err)}
ayreq.get({
     url:"",
     data:{},
     responseType:"json",//局部的请求头配置
     headers:{//局部的请求头配置
         contentType:"json",
     },
     //此次调用请求的异常处理
     //这里的局部异常会覆蓋全局的异常处理
     onError:function(err){
   
     }
});
```

##### 弹窗组件
```html
<div class="ay-popup">
  <div class="ay-popup-body  p-3">
    <input type="text" placeholder="用户名">
    <div class="d-flex justify-content-center justify-content-evenly" style="text-align: right;">
      <button class="ay-btn active">取消</button>
      <button>保存</button>
    </div>
  </div>
</div>
```

```javascript
let screenWidth = document.documentElement.clientWidth;
let screenHeight = document.documentElement.clientHeight;
let width = (screenWidth * 0.3) + "px";
let position = "center";
let height = "45%";
if (parseInt(width) < 500) {
  width = 500 + "px";
}
if (screenWidth < 600) {
  width = "100%";
  position = "bottom";
  height = "80%"
}
const addModel = new AyPopup({
  "position": position,
  "width": width,
  "height": height,
  "closeable": true,
  "title": "新增管理员"
});
addModel.open();
```

##### 底部切换导航组件

##### 左右banner图组件

##### 导航组件

```javascript
let array = [
    {
      name: "公司介绍",
      path: "index.html",
    }, {
      name: "公司介绍",
      path: "index.html",
    },
  ];
let nb = new NavBar({
  array: array,
  titleKey: "name",
  ele: ".navbar",
  size: "1.25rem",
  activeSize: "1.25rem",
  fixedTop: false,
  fixedSticky: true,
  activeColor: "#333333",
  activeBackground: "linear-gradient(to bottom, rgb(84, 39, 240,0.3), rgb(84, 39, 240,0.05))",
  lineBg: "transparent",
  navHeight: "10rem",//"4.4rem",
  navBackground: "#fff",
  lineWidth: "3.75rem",
  navLeft: "<div class='d-flex flex-fill justify-content-start'><img class='logo w-40  pt-1 pb-1' src='./images/logo.png'/></div>",
  navLeftWidth: "40%",
  scroll: false,
  id: "全局",
});
nb.outClick(index => {
  console.log("点击的是", index);
});
new MobileNav({
  ele: ".navbar-mobile",
  array: that.config.navBarArray,
  leftSrc: "./images/logo.png",
});

```

##### picker下拉选择

##### 提示用的

##### 折叠用

##### 监听用

```javascript
new AyWatch(Obj, "name").getNewValue = function (oldValue,newValue) {
      //console.log("变化后的新值 是",newValue);
};
```

##### 进度

##### 给未来元素绑定事件

```javascript
var ayon = new AyOn("click",".progress",".ay-btn",function(e){
  //this是元素本身
  console.log(e,this);
})
ayon.removeEventListener();//移除此次绑定的事件
```

##### 底部按扭组件

##### 选择本地照片

```javascript
new AyChooseImage(fileBase64=>{
 //console.log(fileBase64);
});
```

#### 压缩图

#### 竖形菜单

#### 滑动到页面最下面的

```javascript
new AySliBottom({
      ele:"window",
},function(dir){
  if(dir=="down"){
  
  }
});
```

#### 分页

```javascript
let obj = {
  ele: ".page",
  pageNum: 100,
  currentPage: 1,
}
that.pg = new PageBtn(obj);
console.log(that.pg);
that.pg.outClick(pn => {
  console.log(pn);
})
```

#### 归并排序

```javascript
new AySort({
 array:[{a:2},{a:4}],
 key:"a"  
},function(result){
 // 结果 result
});
```

#### 弹窗提示

```javascript
var dialog = new AyDialog({
	title:"标题",
	content:"提示内容",
	backgroundColor:"#ffffff",
	width:"80%",
	height:"20%",
	isConfirm:true,//是否有确认
	isCancel:true,//是否有取消
	animate:false,//是否有动效
}})
dialog.confirm = function(){
	console.log("确认事件")
}
dialog.cancel = function(){
	console.log("取消事件")
}
```

#### 继承

```javascript
/**
* parent 父类
* child 子类
* this 必传
*/
new AyExtends(Parent, child, this);
```

### base64

```javascript

var base64 = new _AyBase64();
//加密
base64.encode("芝加哥夲");
//解密
base64.decode("kljlkjasldf");
```

### 横的进度条

```javascript
let vproArray = [
  {
    name: "信息确认",
  },
  {
    name: "电子签名",
  },
  {
    name: "支付",
  },
  {
    name: "投保成功",
  }
]
new VProcess({
  ele: "body",
  key: "name",
  active: active || 1,
  array: vproArray
});
```