jj-messagebox v1.0.4

效果图

目录

• 安装
• 引用
• alert使用
• dialog使用
• popup使用
• loading使用
• toast使用

安装

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()

参数说明

button按钮的参数说明

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参数说明

Events

popup使用

<jj-popup :visible="isShowPopup" :background="background" @close="isShowPopup=false" :showClose="true"
			title="请选择" :touchClose="true">
 <div> 今天天气不错</div>
</jj-popup>

Props参数说明

Events

loading使用

1、使用默认的loading

this.$jj_loading('加载中...')
let that = this
setTimeout(function() {
//关闭弹框
that.$jj_loading({isClose:true})
}, 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()

参数说明

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})

参数说明