# components

**Repository Path**: guokaiGit/components

## Basic Information

- **Project Name**: components
- **Description**: 非模块化基础控件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-17
- **Last Updated**: 2021-03-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 非模块化常用手机端H5基础控件

## box
* box为整合文件直接引入box即可获取全部组件(引入box则所有组件会挂载到$Box)
* 例如 ：

````html
<!-- 引入 -->
  <link rel="stylesheet" href="./box/box.css">
  <script src="./box/box.js"></script>
````
* 开启loading
````javaScript
  $Box.loading.show()
  // $loading.show() ==> $Box.loading.show()
````

## loading

````html
<!-- 引入 -->
  <link rel="stylesheet" href="./loading/loading.css">
  <script src="./loading/loading.js"></script>
````
* 开启loading
````javaScript
  $loading.show('正在加载') //可传入提示文字，默认正在加载 最多6个字
````
* 关闭loading
````javaScript
  $loading.hide()
````

## toast
````html
<!-- 引入 -->
  <link rel="stylesheet" href="./toast/toast.css">
  <script src="./toast/toast.js"></script>
````
* 开启（在规定传入时间后消失）
````javaScript
  $toast.show({
    text:'这是提示内容', // 提示文字
    time:1500 //延时时间(单位毫秒,number类型)，默认1500，传0则不消失 
  })
````
* 关闭（time传0则需要手动关闭）
````javaScript
  $toast.hide()
````

## alert

````html
<!-- 引入 -->
  <link rel="stylesheet" href="./alert/alert.css">
  <script src="./alert/alert.js"></script>
````
* 开启alert
````javaScript
  $alert.show({
    text:'这是一个弹出框', // 内容
    isCancel:true, // 是否展示取消按钮 true展示 false不展示
    confirm:function(){ //点击确认的回调函数，并且会关闭alert
      console.log('确认')
    },
    cancel:function(){ //点击取消的回调函数，并且会关闭alert
      console.log('取消')
    }
  })
````
* 关闭alert (可以调用关闭但是一般不用)
````javaScript
  $alert.hide()
````

## wxTip(微信的右上角弹窗请在浏览器打开)

````html
<!-- 引入 -->
  <link rel="stylesheet" href="./wxTip/wxTip.css">
  <script src="./wxTip/wxTip.js"></script>
````
* 开启
````javaScript
  $wxTip.show()
````
* 关闭
````javaScript
  $wxTip.hide()
````