# plugin

> vue 插件

# 使用方法

>方法1,把本项目的/src/plugin文件夹考到你的本地  

```js
// 在main.js文件中
import plugin from './plugin'
Vue.use(plugin)
```

>2,npm install 包名还没想好
```js
// 在main.js文件中
import plugin from 'xxxxxx'
Vue.use(plugin)
```

# 目前拥有的插件
- Modal
- Toast
- Loading

## 每个插件介绍
### Modal的用法
- 全局Modal之alert
```js
  this.$modal.alert({
    title: '标题',
    content: "您已报名",
    autoClose: false,
    maskClosable: false,
    closeShow: true,
    // 本插件暴漏了各种样式，下面是根据UI设计的默认样式，如有需要可以随意修改
    // contentFontSize: "17px",
    // contentMargin: "20px 15px",
    // btnFontSize: "17px",
    // btnColor: "#EE6D0F",
    // titleSize: '16px',
    // titlePaddingTop: '15px',
    // titlePaddingBottom: '0px',
    // btnPaddingTop: "16px",
  });
```

|参数|说明|类型|可选值|默认值|
| ------ | ------ | ------ |------ | ------ |
|autoClose|3秒自动关闭|Boolean|true，false|true|
|maskClosable|点击遮罩关闭|Boolean|true，false|true|
|closeShow|显示叉叉|Boolean|true，false|false|
|title|标题|string|自定义|-|
|titleSize|标题字号|string|自定义|16px|
|titlePaddingTop|标题padding-top|string|自定义|15px|
|titlePaddingBottom|标题padding-bottom|string|自定义|0px|
|content|内容|string|自定义|-|
|contentFontSize|内容的字号|string|自定义|17px|
|contentMargin|内容margin|string|自定义|20px 15px|
|btnFontSize|按钮字号|string|自定义|17px|
|btnColor|按钮颜色|string|自定义|#EE6D0F|
|btnPaddingTop|按钮padding-top|string|自定义|16px|


- 全局Modal之confirm
```js
  this.$modal.confirm({
    title: "提示",
    content: "你想怎么样呢？",
    okCallBack() {
      console.log("点击了确定✅");
    },
    cancelCallBack() {
      console.log("点击了取消");
    },
    // 本插件暴漏了各种样式，下面是根据UI设计的默认样式，如有需要可以随意修改
    // closeShow: false,
    // btnColor: "#EE6D0F",
    // contentFontSize: "17px",
    // contentMargin: "20px 15px",
    // btnFontSize: "17px",
    // btnPaddingTop: "16px",
    // titleSize: '16px',
    // titlePaddingTop: '15px',
    // titlePaddingBottom: '0px',
  });
```

|参数|说明|类型|可选值|默认值|
| ------ | ------ | ------ |------ | ------ |
|autoClose|3秒自动关闭|Boolean|true，false|true|
|maskClosable|点击遮罩关闭|Boolean|true，false|true|
|closeShow|显示叉叉|Boolean|true，false|false|
|title|标题|string|自定义|-|
|titleSize|标题字号|string|自定义|16px|
|titlePaddingTop|标题padding-top|string|自定义|15px|
|titlePaddingBottom|标题padding-bottom|string|自定义|0px|
|content|内容|string|自定义|-|
|contentFontSize|内容的字号|string|自定义|17px|
|contentMargin|内容margin|string|自定义|20px 15px|
|btnFontSize|按钮字号|string|自定义|17px|
|btnColor|按钮颜色|string|自定义|#EE6D0F|
|btnPaddingTop|按钮padding-top|string|自定义|16px|
|okCallBack|点击确认的回调|Function|自定义|-|
|cancelCallBack|点击取消的回调|Function|自定义|-|

### Toast的用法
全局Toast
```js
  this.$toast.txt({
    content: "复制成功",
    direction: "bottom",
    mask: true,
    autoClose: true
  });
```
|参数|说明|类型|可选值|默认值|
| ------ | ------ | ------ |------ | ------ |
|content|内容|string|自定义|-|
|direction|位置|string|top，bottom|中间|
|mask|显示遮罩|Boolean|true，false|false|
|autoClose|3秒自动关闭|Boolean|true，false|true|

### Loading的用法
全局loading
>loading的使用和前面的plugin不同，因为loading需要暴露出全局的显示和隐藏方法，没有和之前的plugin一起install，需要在main.js中单独引入并install  

> //main.js中  
> import loading from 'plugin/globalLoading'  
> Vue.use(loading)

```js
  // 在需要的地方显示
  this.$loading()
  // 在需要的地方关闭，这里模拟三秒后关闭
  setTimeout(()=> {
    this.$loading.end()
  },6000)

```