README
效果图
目录
安装
1、使用npm安装
npm i jj-messagebox --save
2、手动安装，下载该项目，将项目jj-messagebox文件夹（路径：src/jj-messagebox）拷贝到项目中， 引用jj-messagebox文件夹下的index.js文件
引用
1、在main.js文件全局全部引入
/*
1、手动安装，需要指定文件
import messagebox from './jj-messagebox/index.js'
*/
//2、通过npm安装
import messagebox from "jj-messagebox"
//注册全部插件（alert,dialog,popup,loading,toast）
Vue.use(messagebox)
2、在main.js文件全局部分引入
//注意：部分导入的插件名字不能有错，它们分别是：jjAlert,jjLoading,jjToast,jjDialog,jjPopup
//下面是指定安装加载提示框插件
/*
1、手动安装，需要指定文件
import {jjLoading} from './jj-messagebox/index.js'
*/
//2、通过npm安装
import {jjLoading} from "jj-messagebox"
//注册某个插件，如加载提示框
Vue.use(jjLoading)
3、非全局安装，在某个组件中引入（只支持jjDialog和jjPopup）
/*
1、手动安装，需要指定文件
import {jjDialog} from './jj-messagebox/index.js'
*/
//2、通过npm安装
import {jjDialog} from "jj-messagebox"
export default {
name: 'App',
components: {
jjDialog
}
}
alert使用
1、使用默认alert
/*
一共有三个参数，三个参数都是字符串String类型
第一参数是title标题，第二个参数是message内容
第三个参数是按钮的标题
第三个参数如果没有传值，默认是‘确定’
如果只传一个参数，那么显示的内容就是参数内容，按钮文本取默认值：‘确定’
*/
this.$jj_alert('时间就像海绵里的水,\n只要愿挤总还是有的。')
或
this.$jj_alert('提示', '时间就像海绵里的水,\n只要愿挤总还是有的。', '知道了')
2、自定义alert，需要传入一个Objec对象
this.$jj_alert({
type: "alert", //弹窗的类型有alert和sheet
width: '70%', //设置弹窗的宽度
padding: '20px 30px', //设置内容的上下左右偏移
maskColor: "rgba(0, 0, 0, 0.6)", //遮罩层的背景颜色
touchClose: true, //点击背景图层，是否关闭弹框
showClose: true, //是否显示右上角的关闭按钮
title: '提示', //标题
titleStyle: {
'color': '#fb2408',
'font-size': '20px'
}, //标题的样式
message: '事实上确实是当我们失去的时候，才知道自己曾经拥有；但有没有注意到当有些东西来临的时候，我们已错过。', //内容
messageStyle: {
"justify-content": 'left',
"display": "flex",
"color": '#8a8a8a',
'text-align': 'left'
}, //内容的样式
btns:[{
title: "Cancel", //按钮文本
activeBackground: '#2A8AFF', //按钮激活背景色
activeColor: "#fff", //按钮激活的字体颜色
click: () => {
console.log("点击Cancel")
}
}]
})
3、关闭alert
//有两种方式关闭
//1、使用全局方法关闭
this.$jj_alert({isClose:true})
//2、使用对象调用关闭方法
let alert = this.$jj_alert(alertData)
//关闭弹框
alert.close()
参数说明
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 有alert和sheet | String | 'alert' |
| duration | 动画时间，单位s秒 | Number | 0.25 |
| radius | 弹框的圆角 | Number | 5 |
| isClose | 是否关闭弹框 | Boolean | false |
| maskColor | 遮罩层的背景颜色 | String | 'rgba(0, 0, 0, 0.35) ' |
| background | 弹窗内容的背景 | String | '#fff' |
| touchClose | 点击遮罩层，是否关闭弹框 | Boolean | false |
| showClose | 是否显示右上角的关闭按钮 | Boolean | false |
| closeStyle | 右上方关闭按钮的样式 | Object | {} |
| width | 弹框的宽度，可以是百分比或具体像素值 | String | '80%' |
| padding | 内容上下左右偏移 | String | '20px' |
| title | 标题 | String | - |
| titleStyle | 标题的样式 | Object | {} |
| message | 内容 | String | - |
| messageStyle | 内容的样式 | Object | {} |
| btns | 按钮列表 | Array | [{title:"确认"}] |
button按钮的参数说明
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 按钮的文本 | String | - |
| activeBackground | 按钮激活的背景色 | String | - |
| activeColor | 按钮激活的字体颜色 | String | - |
| style | 按钮的文本样式 | Object | {} |
| touchClose | 点击按钮，是否自动关闭弹框 | Boolean | true |
| isDisable | 是否禁用按钮 | Boolean | false |
| click | 按钮点击事件 | Function | - |
dialog使用
<jj-dialog :visible="isShowDialog" :titleStyle="{'color':'red'}" title="提示" message="Dialog"
@close="isShowDialog=false">
<div> 自定Dialog内容</div>
<div slot="footer">
<button class="btn" style="margin-bottom: 10px;" @click="isShowDialog=true">确定</button>
</div>
</jj-dialog>
Props参数说明
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| visible | 是否显示 | Boolean | false |
| duration | 动画时间，单位s秒 | Number | 0.25 |
| radius | 弹框的圆角 | Number | 5 |
| maskColor | 遮罩层的背景颜色 | String | 'rgba(0, 0, 0, 0.35) ' |
| background | 弹窗内容的背景 | String | '#fff' |
| touchClose | 点击遮罩层，是否关闭弹框 | Boolean | false |
| showClose | 是否显示右上角的关闭按钮 | Boolean | true |
| closeStyle | 右上方关闭按钮的样式 | Object | {} |
| width | 弹框的宽度，可以是百分比或具体像素值 | String | '80%' |
| padding | 内容上下左右偏移 | String | '20px' |
| title | 标题 | String | - |
| titleStyle | 标题的样式 | Object | {} |
| message | 内容 | String | - |
| messageStyle | 内容的样式 | Object | {} |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| close | 右上角的关闭按钮事件 | - |
popup使用
<jj-popup :visible="isShowPopup" :background="background" @close="isShowPopup=false" :showClose="true"
title="请选择" :touchClose="true">
<div> 今天天气不错</div>
</jj-popup>
Props参数说明
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| visible | 是否显示 | Boolean | false |
| duration | 动画时间，单位s秒 | Number | 0.25 |
| radius | 弹框的圆角 | Number | 5 |
| maskColor | 遮罩层的背景颜色 | String | 'rgba(0, 0, 0, 0.35) ' |
| background | 弹窗内容的背景 | String | '#fff' |
| touchClose | 点击遮罩层，是否关闭弹框 | Boolean | false |
| showClose | 是否显示右上角的关闭按钮 | Boolean | true |
| closeStyle | 右上方关闭按钮的样式 | Object | {} |
| height | 弹框的高度，可以是百分比或具体像素值 | String | '60%' |
| padding | 内容上下左右偏移 | String | '20px' |
| title | 标题 | String | - |
| titleStyle | 标题的样式 | Object | {} |
| message | 内容 | String | - |
| messageStyle | 内容的样式 | Object | {} |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| close | 右上角的关闭按钮事件 | - |
loading使用
1、使用默认的loading
this.$jj_loading('加载中...')
let that = this
setTimeout(function() {
//关闭弹框
that.$jj_loading_close()
}, 2000)
2、自定义loading
const loadingData = {imageSize: {width: '32px',height: '32px'}, //设置图片的大小
userInteractionEnabled: true, //是否启用用户交互，默认是false,启用后，遮罩层下的图层事件允许点击
type: 'round', //设置加载框的类型，有default、round、taichi三种
//imageUrl:require('../assets/loading_custom.png'),//图片链接,如果设置图片链接，type类型失效
background:'#f24', //设置弹框内容的背景色
message:"自定义..."
}
let loading = this.$jj_loading(loadingData)
setTimeout(() => {
//关闭弹框
loading.close()
}, 2000)
3、关闭loading
//有两种方式关闭
//1、使用全局方法关闭
this.$jj_loading({isClose:true})
//2、使用对象调用关闭方法
let loading = this.$jj_loading(loadingData)
//关闭弹框
loading.close()
参数说明
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 有default、round、taichi | String | 'default' |
| duration | 图片旋转一周动画时间，单位s秒 | Number | 1.5 |
| radius | 弹框的圆角 | Number | 5 |
| isClose | 是否关闭弹框 | Boolean | false |
| maskColor | 遮罩层的背景颜色 | String | 'transparent' |
| background | 弹窗内容的背景 | String | 'rgba(0, 0, 0, 0.8)' |
| userInteractionEnabled | 遮罩层下的事件是否可以交互 | Boolean | false |
| width | 弹框的宽度，可以是百分比或具体像素值 | String | '85px' |
| padding | 内容上下左右偏移 | String | '15px 10px 10px 10px' |
| imageUrl | 图片的链接地址 | String | - |
| imageSize | 图片的大小 | Object | {width: '32px',height: '32px'} |
| message | 内容 | String | - |
| messageStyle | 内容的样式 | Object | {} |
toast使用
1、使用默认的toast
/*
一共有三个参数 第一参数是提示信息，
第二个参数是提示的类型（success，fail，warn），
第三个参数是显示的时长
*/
//只显示文本
this.$jj_toast("请求成功")
//显示文本和提示的类型
this.$jj_toast("成功",'success')
//显示文本和设置显示的时长
this.$jj_toast("提交成功",'',3)
2、自定义toast
const toastData = {message: "哈哈哈哈哈哈哈哈。。。",
duration: 3,
radius: 2,
background:'#f24',
maxWidth:'60%',
messageStyle:{'color': '#fe2',
'text-align': 'center'
}
}
this.$jj_toast(toastData)
3、关闭toast
this.$jj_toast({isClose:true})
参数说明
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 提示的类型（success，fail，warn） | String | - |
| duration | 显示的时长，单位s秒, 小于0时，不消失，需要手动关闭 | Number | 2.5 |
| radius | 弹框的圆角 | Number | 5 |
| isClose | 是否关闭弹框 | Boolean | false |
| maskColor | 遮罩层的背景颜色 | String | 'transparent' |
| background | 弹窗内容的背景 | String | 'rgba(0, 0, 0, 0.8)' |
| maxWidth | 弹框的最大宽度，可以是百分比或具体像素值 | String | '80%' |
| minWidth | 弹框的最小宽度，可以是百分比或具体像素值 | String | '85px' |
| padding | 内容上下左右偏移 | String | '12px' |
| imageUrl | 图片的链接地址 | String | - |
| imageSize | 图片的大小 | Object | {width: '32px',height: '32px'} |
| message | 内容 | String | - |
| messageStyle | 内容的样式 | Object | {} |