plugin
vue 插件
使用方法
方法1,把本项目的/src/plugin文件夹考到你的本地
// 在main.js文件中
import plugin from './plugin'
Vue.use(plugin)
2,npm install 包名还没想好
// 在main.js文件中
import plugin from 'xxxxxx'
Vue.use(plugin)
目前拥有的插件
- Modal
- Toast
- Loading
每个插件介绍
Modal的用法
- 全局Modal之alert
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
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
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)
// 在需要的地方显示
this.$loading()
// 在需要的地方关闭,这里模拟三秒后关闭
setTimeout(()=> {
this.$loading.end()
},6000)