yujinjin / mobile-message

git clone https://github.com/yujinjin/mobile-message.git
cd mobile-message
npm install

npm run demo

npm run compile

npm install mobile-message

import Vue from 'vue'
import MobileMessage from 'mobile-message'
import 'mobile-message/dist/message.css'

// VUE use
Vue.use(MobileMessage);
// or with options
Vue.use(MobileMessage, {
    initCallback: null, // 初始化后的弹窗的回调函数（会传入当前弹窗的$body参数）
	isShowMask: false, // 是否显示弹层的遮罩层
	icon: "", // 内容消息的icon，默认提供：message-info,message-success,message-warning,message-error
	autoHide: true, // 点击遮罩层是否自动隐藏
	className: null, // 弹层的样式名称
	contents: null, // 弹窗的内容（支持HTML），如果为null或者''就不会展示
	title: null, // 弹窗的头部标题，如果为null或者''就不会展示
	height: 'inherit', // 弹层高度（默认'inherit'）
	buttons: [], //弹层的底部按钮列表[{className|label|callback}]，如果为null或者数组长度为0就不会展示
	scrollerData: {
		selectorScrollable: null // 指定标记的滚动元素，如果为null就指定默认元素，指定子元素或父元素皆可
	} // scroller事件对象数据，如果是false或null表示不绑定事件
});

import MobileMessage from 'mobile-message'
import 'mobile-message/dist/message.css'

let message = MobileMessage.get({});
message(...);
message.success(...);
...

this.$message('messages')
// or other use
// this.$message.info("messages", callBackFun, {delay: 3000,...}); callBackFun: 可选,表示弹窗关闭时的回调函数，options：弹窗的配置选项
// or other use
// this.$message({
//	 type: "info",
//	 contents: "messages"
// });

this.$message("世界上最幸福的爱，就是爱你的人，用你所希望的方式爱你，爱你所希望他爱你的优点，这个世界上有多少人互相爱是爱了，却爱得不是地方，爱得全不得当！");

this.$message.success("messages", callBackFun, {delay: 3000,...}); // callBackFun: 可选,表示弹窗关闭时的回调函数，options：弹窗的配置选项
// or other use
// this.$message({
//	 type: "success",
//	 contents: "messages"
// });

this.$message.success("人生就象弈棋， 一步失误， 全盘皆输，这是令人悲哀之事；而且人生还不如弈棋，不可能再来一局，也不能悔棋。");

this.$message.warning("messages", callBackFun, {delay: 3000,...}); // callBackFun: 可选,表示弹窗关闭时的回调函数，options：弹窗的配置选项
// or other use
// this.$message({
//	 type: "warning",
//	 contents: "messages"
// });

this.$message.warning("人生就象弈棋， 一步失误， 全盘皆输，这是令人悲哀之事；而且人生还不如弈棋，不可能再来一局，也不能悔棋。");

this.$message.error("messages", callBackFun, {delay: 3000,...}); // callBackFun: 可选,表示弹窗关闭时的回调函数，options：弹窗的配置选项
// or other use
// this.$message({
//	 type: "error",
//	 contents: "messages"
// });

this.$message.error("谁在锅炉旁以小火煨炖着时光，沸腾的回忆随爱情蒸发后退场。");

this.$message.alert("messages", callBackFun, title, label); // callBackFun: 可选,表示点击弹窗底部按钮时的回调函数，title：可选,弹窗的标题，默认值是'提示'，label：可选,底部按钮文案

this.$message.alert("故天将降大任于斯人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。", function($body){
	console.info("您点击了确定按钮");
});

this.$message.confirm("messages", callBackFun, buttons, title); // callBackFun: 可选,表示点击弹窗底部按钮时的回调函数，buttons：弹窗底部的按钮列表，默认是[{className: "cancel", label: "取消", callback: null}, {className: "ok", label: "确认", callback: null}]，title：可选,弹窗的标题，默认值是'提示'

this.$message.confirm("夫学须志也，才须学也，非学无以广才，非志无以成学。", function(result, $body){
	console.info("您点击了" + (result ? '确定':'取消') + "按钮");
});

this.$message.multiple(contents, buttons, title, options); // contents: 消息的内容，buttons：底部按钮列表，title：可选，弹窗的标题，options：可选，弹窗配置选项

this.$message.multiple("我认识的一个女生嫁去日本了，以为再也见不到她了，直到有一天我下载了一个种子", [{
	label: "现在升级",
	callback: function($body){
		console.info("您点击了‘现在升级’按钮, 本按钮点击返回值是false就不自动关闭弹窗");
		// 如果返回值是false就不自动关闭弹窗
		return false;
	}
}, {
	label: "下次再说",
	callback: function($body){
		console.info("您点击了‘下次再说’按钮！");
	}
}, {
	label: "不再提醒",
	callback: function($body){
		console.info("您点击了‘不再提醒’按钮！");
	}
}]);

this.$message.vertical(contents, buttons, title, options); // contents: 消息的内容，buttons：底部按钮列表，title：可选，弹窗的标题，options：可选，弹窗配置选项

this.$message.vertical("开例会时候放了巨响的连环屁，然后大家都笑了，然后男领导也笑的崩屁了，接着就是女领导，，，，，最终食堂师傅被炒鱿鱼了", [{
	label: "现在升级",
	callback: function($body){
		console.info("您点击了‘现在升级’按钮, 本按钮点击返回值是false就不自动关闭弹窗");
		// 如果返回值是false就不自动关闭弹窗
		return false;
	}
}, {
	label: "下次再说",
	callback: function($body){
		console.info("您点击了‘下次再说’按钮！");
	}
}, {
	label: "不再提醒",
	callback: function($body){
		console.info("您点击了‘不再提醒’按钮！");
	}
}]);

this.$message.bottomSheet(contents, buttons, options); // contents: 消息的内容，buttons：底部按钮列表，options：可选，弹窗配置选项

this.$message.bottomSheet("我是一个苦b的程序员，今晚加班到快通宵了，困得快睁不开眼了，女上司很关心，问我要不要吃宵夜。我没好气地说，宵夜就算了，能让我睡一觉就行了。女上司红着脸说了句讨厌", [{
	label: "现在升级",
	callback: function($body){
		console.info("您点击了‘现在升级’按钮, 本按钮点击返回值是false就不自动关闭弹窗");
		// 如果返回值是false就不自动关闭弹窗
		return false;
	}
}, {
	label: "下次再说",
	callback: function($body){
		console.info("您点击了‘下次再说’按钮！");
	}
}, {
	label: "不再提醒",
	callback: function($body){
		console.info("您点击了‘不再提醒’按钮！");
	}
}]);

this.$message.prompt(title, callBackFun, labels, options); // title: 弹窗的头部标题，callBackFun：底部按钮点击后的回调函数，有result、value、$body3个参数，result是boolean值表示点击的取消（false）、确定(true)，value表示输入的实际值。options：可选，弹窗配置选项

this.$message.prompt("请输入您的姓名", function(result, value, $body){
	console.info("您点击了" + (result ? '确定':'取消') + "按钮， 并且输入了内容是：" + value);
});

this.$message(options); // options：弹窗配置选项

this.$message({
	className: "custome",
	isShowMask: true,
	autoHide: false,
	title: "协议须知",
	contents: "这是一个协...",
	buttons: [{
		className: "cancel",
		label: "我拒绝",
		callback: function($body){
			console.info($body)
		}
	}, {
		className: "ok",
		label: "我同意",
		callback: function($body){
			console.info($body)
		}
	}],
});