\n\t\t\n\t\t\t![]()
\n\t\t\t\n\n\t\t\t \n\t\t\t \n\t\t\n\t\t\t![]()
\n\t\t\t \n\t
\n\n\n\n\n\n\n"
},
{
"path": "src/jj-messagebox/alert/index.js",
"content": "import Vue from 'vue';\r\nimport alert from './jj-alert.vue';\r\nlet jjAlert = Vue.extend(alert); //创建vm实例的构造函数\nlet jj_alert_instance = null\nlet jj_alert_close = function(){\n\tlet alertElement = document.getElementById('jj-alert-id')\n\tif (alertElement) {\n\t\t//移除已有的alert框\n\t\talertElement.remove()\n\t} \n}\n\nlet jj_alert = function(alertData,message,btnTitle) {\n\tconst data = getData(alertData,message,btnTitle)\n\tif(!(alertData === undefined || alertData === null) && alertData.constructor === Object){\n\t\tif(data.isClose === true && jj_alert_instance!==null){\n\t\t\t//调用该方法，有动画消失的效果\n\t\t\tjj_alert_instance.close()\n\t\t\treturn jj_alert_instance\n\t\t}\n\t}\n\t//移除已有的弹框\n\tjj_alert_close()\n\tlet instance = new jjAlert({\n\t\tdata\n\t})\n\t/*\n\t定义一个installed变量，该变量为true，再将alert进行挂载，因为第一次触发该install函数，\n\t是Vue.prototype.$jj_alert = JJAlert.install赋值就触发，这个赋值操作不需要显示弹窗，所以installed变量来控制\n\t注意⚠️：每次调用this.$jj_alert都会触发该方法\n\t*/\n\tif (jjAlert.installed) {\n\t\tinstance.$mount()\n\t\tdocument.body.appendChild(instance.$el)\n\t}\n\tjj_alert_instance = instance\n\tjjAlert.installed = true\n\treturn instance\n\t\n}\n\nexport let getData = function(alertData,message,btnTitle){\n\tlet data = {}\n\tconst isAlertDataNull = (alertData === undefined || alertData === null)\n\tconst isMessageNull = (message === undefined || message === null)\n\tconst isBtnTitileNull = (btnTitle === undefined || btnTitle === null)\n\tif(isAlertDataNull&&isMessageNull&&isBtnTitileNull){\n\t\treturn {}\n\t}else{\n\t\tif (!isAlertDataNull){\n\t\t\tif (alertData.constructor === Object) {\n\t\t\t\tdata = {\n\t\t\t\t\t...alertData\n\t\t\t\t}\n\t\t\t\treturn data\n\t\t\t}else{\n\t\t\t\tdata['title'] = alertData+''\n\t\t\t}\n\t\t}\n\t\t\n\t\tif(!isMessageNull){\n\t\t\tdata['message'] = message + ''\n\t\t}\n\t\tif(!isBtnTitileNull){\n\t\t\tdata['btns'] = [{\n\t\t\t\t'title':btnTitle\n\t\t\t}] \n\t\t}\n\t\t\n\t}\n\treturn data\n}\n\r\njjAlert.install = function(data) {\r\n return jj_alert(data)\r\n}\r\nVue.prototype.$jj_alert = jj_alert\r\nexport default jjAlert\r\n\n"
},
{
"path": "src/jj-messagebox/alert/jj-alert.vue",
"content": "\n\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\n\t\t
\n\t\t\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\n\t\t 自定Dialog内容
\n\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t 今天天气不错
\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\n\t
\n\n\n\n\n\n\n"
},
{
"path": "src/jj-messagebox/dialog/index.js",
"content": "import dialog from \"./jj-dialog.vue\"\n\ndialog.install = function(Vue){\n\tVue.component(dialog.name,dialog)\n}\nexport default dialog"
},
{
"path": "src/jj-messagebox/dialog/jj-dialog.vue",
"content": "\r\n\t\r\n\t\t\r\n\t
\r\n\r\n\r\n\r\n\r\n\r\n\n"
},
{
"path": "src/jj-messagebox/index.js",
"content": "import jjDialog from \"./dialog/index.js\"\r\nimport jjAlert from \"./alert/index.js\"\nimport jjLoading from './loading/index.js'\nimport jjToast from './toast/index.js'\nimport jjPopup from './popup/index.js'\n\r\n\r\n// 组件集合，用于遍历\r\nconst components = [jjDialog,jjPopup];\r\n\r\n// console.log({\r\n// \tcomponents\r\n// });\r\nlet messagebox = {}\r\n// install 方法\r\nmessagebox.install = function(Vue) {\r\n\tif (messagebox.install.installed) return;\r\n\tmessagebox.install.installed = true\r\n\t//使用JJAlert插件\r\n\tVue.use(jjAlert)\n\tVue.use(jjLoading)\n\tVue.use(jjToast)\r\n\t// console.log('------------')\r\n\t// 遍历注册全局组件\r\n\tcomponents.map((component) => Vue.component(component.name, component));\r\n};\r\n\r\n// 判断是否是直接引入文件\r\nif (typeof window !== \"undefined\" && window.Vue) {\r\n\tmessagebox.install(window.Vue);\r\n}\r\n\r\nexport {\r\n\tjjAlert,\n\tjjLoading,\n\tjjToast,\r\n\tjjDialog,\n\tjjPopup,\r\n};\r\n\r\nexport default messagebox\n"
},
{
"path": "src/jj-messagebox/jj-fadelog.css",
"content": "\n/*弹层动画（从上往下）*/\n\n/* .fadeIn {\n -webkit-animation: fadeInDown .3s;\n animation: fadeInDown .3s;\n}\n\n@keyframes fadeInDown {\n 0% {\n transform: translate3d(0, -20%, 0);\n opacity: 0;\n }\n 100% {\n transform: none;\n opacity: 1;\n }\n}\n\n@-webkit-keyframes fadeInDown {\n 0% {\n -webkit-transform: translate3d(0, -20%, 0);\n opacity: 0;\n }\n 100% {\n -webkit-transform: none;\n opacity: 1;\n }\n} */\n\n/*弹层动画（从下往上出现）*/\n\n.fadelogIn {\n -webkit-animation: fadelogIn .25s;\n animation: fadelogIn .25s;\n}\n\n@keyframes fadelogIn {\n 0% {\n transform: translate3d(0, 100%, 0);\n }\n 100% {\n transform: none;\n }\n}\n\n@-webkit-keyframes fadelogIn {\n 0% {\n -webkit-transform: translate3d(0, 100%, 0);\n }\n 100% {\n -webkit-transform: none;\n }\n}\n\n\n/*弹层动画（从上往下消失）*/\n\n.fadelogOut {\n -webkit-animation: fadelogOut .25s;\n animation: fadelogOut .25s;\n\t/* 保留动画结束后的样子 */\n\tanimation-fill-mode: forwards;\n}\n\n@keyframes fadelogOut {\n 0% {\n transform: none;\n }\n 100% {\n\t\ttransform: translate3d(0, 100%, 0);\n }\n}\n\n@-webkit-keyframes fadelogOut {\n 0% {\n\t\t-webkit-transform: none;\n }\n 100% {\n -webkit-transform: translate3d(0, 100%, 0);\n }\n}"
},
{
"path": "src/jj-messagebox/jj-messagebox.css",
"content": ".messagebox-shade {\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tposition: fixed;\r\n\tbottom: 0;\r\n\tright: 0;\r\n\tbackground-color: rgba(0, 0, 0, 0.5);\r\n\tz-index: 999;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n}\r\n\r\n.messagebox-main {\n\tdisplay: flex;\n\tflex-direction: column;\n\tposition: relative;\r\n\tbackground: white;\r\n\twidth: 80%;\r\n\tborder-radius: 5px;\r\n\toverflow: hidden;\r\n\tbox-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.04);\r\n\tbox-sizing: border-box;\n\tbackground-repeat: no-repeat;\n\tbackground-size: cover;\n\tbackground-attachment: fixed;\r\n}\n\n.background-content {\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tposition: absolute;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\ttop: 0;\r\n\tleft: 0;\r\n}\r\n\r\n.messagebox-content {\r\n\tbox-sizing: border-box;\r\n\twidth: 100%;\r\n\tpadding: 20px;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tposition: relative;\n\twhite-space: pre-wrap;\r\n}\r\n\r\n.rightTopClose {\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\twidth: 32px;\r\n\theight: 32px;\r\n\tposition: absolute;\r\n\ttop: 3px;\r\n\tright: 5px;\r\n}\r\n\n.closeImage {\r\n\theight: 15px;\r\n\twidth: 15px;\n\tbackground: url(./static/jj_close_icon.png);\r\n\tbackground-repeat: no-repeat;\r\n\tbackground-size: contain;\r\n}\n\n.fadelogOutOpcity{\n\t\t-webkit-transition: all 1.5s;\n\t\t-moz-transition: all 1.5s;\n\t\t-ms-transition: all 1.5s;\n\t\t-o-transition: all 1.5s;\n\t\ttransition: all 1.5s;\n\t\topacity: 0;\n}"
},
{
"path": "src/jj-messagebox/jj-pop.css",
"content": "/*弹层动画（放大）*/\n.popIn {\n -webkit-animation: popIn .25s;\n animation: popIn .25s;\n}\n\n@-webkit-keyframes popIn {\n 0% {\n -webkit-transform: scale3d(0, 0, 0);\n opacity: 0;\n }\n 50% {\n -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);\n }\n 100% {\n -webkit-transform: scale3d(1, 1, 1);\n -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n opacity: 1;\n }\n}\n\n@keyframes popIn {\n 0% {\n transform: scale3d(0.2, 0.2, 0.2);\n opacity: 0;\n }\n 50% {\n animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);\n }\n 100% {\n transform: scale3d(1, 1, 1);\n animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n opacity: 1;\n }\n}\n\n/*弹层动画（缩小）*/\n.popOut {\n -webkit-animation: popOut .25s;\n animation: popOut .25s;\n\t/* 保留动画结束后的样子 */\n\tanimation-fill-mode: forwards;\n}\n\n@-webkit-keyframes popOut {\n 0% {\n -webkit-transform: scale3d(1, 1, 1);\n opacity: 1;\n }\n 50% {\n -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);\n }\n 100% {\n -webkit-transform: scale3d(0, 0, 0);\n opacity: 0;\n }\n}\n\n@keyframes popOut {\n 0% {\n transform: scale3d(1, 1, 1);\n opacity: 1;\n }\n 50% {\n animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);\n }\n 100% {\n transform: scale3d(0, 0, 0);;\n opacity: 0;\n }\n}"
},
{
"path": "src/jj-messagebox/loading/index.js",
"content": "import Vue from 'vue';\r\nimport loading from './jj-loading.vue';\r\nlet jjLoading = Vue.extend(loading); //创建vm实例的构造函数\r\n\r\nlet jj_loading_close = function() {\r\n\tlet loadingElement = document.getElementById('jj-loading-id')\r\n\tif (loadingElement) {\r\n\t\t//移除已有的加载框\r\n\t\tloadingElement.remove()\r\n\t}\r\n}\r\n\r\nexport let getData = function(loadingData) {\r\n\tlet data = {}\n\tlet isLoadingData = loadingData === undefined || loadingData === null\r\n\tif (!isLoadingData){\r\n\t\tif (loadingData.constructor === Object) {\r\n\t\t\tif (loadingData.isClose === true) {\r\n\t\t\t\treturn null\r\n\t\t\t}\r\n\t\t\tdata = {\r\n\t\t\t\t...loadingData\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\tdata = {\r\n\t\t\t\t\"message\": loadingData + '',\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\treturn data\r\n}\r\n\r\nlet jj_loading = function(loadingData) {\r\n\tlet data = getData(loadingData)\r\n\tif (data === null) {\r\n\t\t//移除已有的弹框\r\n\t\tjj_loading_close()\r\n\t\treturn\r\n\t}\r\n\t//移除已有的弹框\r\n\tjj_loading_close()\r\n\r\n\tlet instance = new jjLoading({\r\n\t\tdata\r\n\t})\r\n\t/*\r\n\t定义一个installed变量，该变量为true，再将alert进行挂载，因为第一次触发该install函数，\r\n\t是Vue.prototype.$jj_loading = jjLoading.install赋值就触发，这个赋值操作不需要显示弹窗，所以installed变量来控制\r\n\t注意⚠️：每次调用this.$jj_loading都会触发该方法\r\n\t*/\r\n\tif (jjLoading.installed) {\r\n\t\tinstance.$mount()\r\n\t\tdocument.body.appendChild(instance.$el)\r\n\t}\r\n\tjjLoading.installed = true\r\n\treturn instance\r\n}\r\n\r\njjLoading.install = function(data) {\r\n\treturn jj_loading(data)\r\n}\r\nVue.prototype.$jj_loading = jj_loading\r\nexport default jjLoading\n"
},
{
"path": "src/jj-messagebox/loading/jj-loading.vue",
"content": "\r\n\t\r\n\t\t
\r\n\r\n\r\n\r\n\r\n\n"
},
{
"path": "src/jj-messagebox/popup/index.js",
"content": "import popup from \"./jj-popup.vue\"\n\npopup.install = function(Vue){\n\tVue.component(popup.name,popup)\n}\nexport default popup"
},
{
"path": "src/jj-messagebox/popup/jj-popup.vue",
"content": "\r\n\t\r\n\t\t\t
\r\n\t 0\" class=\"messagebox-content\" :style=\"{'padding':padding}\">\r\n\t\t\t\t
\r\n\t\t\t\n\t\t\t\t\t![]()
\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\n\t\t\t\t![]()
\r\n\t\t\t
\r\n\t\t\r\n\t\t\r\n\t
\r\n\r\n\r\n\r\n\r\n\r\n\n"
},
{
"path": "src/jj-messagebox/toast/index.js",
"content": "import Vue from 'vue';\r\nimport toast from './jj-toast.vue';\r\nlet jjToast = Vue.extend(toast); //创建vm实例的构造函数\r\n\nlet getData = function(toastData,type,duration){\n\tlet data = {}\n\tconst isToastDataNull = (toastData === undefined || toastData === null)\n\tconst isTypeNull = (type === undefined || type === null)\n\tconst isDurationNull = (duration === undefined || duration === null)\n\tif(isToastDataNull&&isTypeNull&&isDurationNull){\n\t\treturn {}\n\t}else{\n\t\tif (!isToastDataNull){\n\t\t\tif (toastData.constructor === Object) {\n\t\t\t\tdata = {\n\t\t\t\t\t...toastData\n\t\t\t\t}\n\t\t\t\treturn data\n\t\t\t}else{\n\t\t\t\tdata['message'] = toastData+''\n\t\t\t}\n\t\t}\n\t\t\n\t\tif(!isTypeNull){\n\t\t\tdata['type'] = type + ''\n\t\t}\n\t\tif(!isDurationNull){\n\t\t\tif (duration.constructor === Number){\n\t\t\t\tdata[\"duration\"] = duration\n\t\t\t}\n\t\t}\n\t}\n\treturn data\n}\n\nlet jj_toast_close = function(){\n\tlet toastElement = document.getElementById('jj-toast-id')\n\tif (toastElement) {\n\t\tif (jjToast.jj_time) {\n\t\t\tclearTimeout(jjToast.jj_time)\n\t\t}\n\t\t//移除已有的加载框\n\t\ttoastElement.remove()\n\t}\n}\n\r\nlet jj_toast = function(toastData,type,duration) {\r\n \r\n\tlet data = getData(toastData,type,duration)\n //移除已有的加载框\r\n\tjj_toast_close()\r\n\tlet instance = new jjToast({\r\n\t\tdata\r\n\t})\r\n\t/*\r\n\t定义一个installed变量，该变量为true，再将alert进行挂载，因为第一次触发该install函数，\r\n\t是Vue.prototype.$jj_toast = jjToast.install赋值就触发，这个赋值操作不需要显示弹窗，所以installed变量来控制\r\n\t注意⚠️：每次调用this.$jj_toast都会触发该方法\r\n\t*/\r\n\tif (jjToast.installed) {\n\t\tif (data.isClose === true || data.duration === 0){\n\t\t\t//移除已有的加载框\n\t\t\tjj_toast_close()\n\t\t\treturn instance\n\t\t}\r\n\t\tinstance.$mount()\r\n\t\tdocument.body.appendChild(instance.$el)\n\t\tif (data.duration > 0){\n\t\t\tjjToast.jj_time = setTimeout(function() {\n\t\t\t\tjjToast.jj_time = null\n\t\t\t\tinstance.close()\n\t\t\t}, data.duration * 1000)\n\t\t}\r\n\t}\r\n\tjjToast.installed = true\r\n\treturn instance\r\n}\r\njjToast.install = function(data) {\r\n\treturn jj_toast(data)\r\n}\r\n\r\n\r\n\r\nVue.prototype.$jj_toast = jj_toast\r\nexport default jjToast\n"
},
{
"path": "src/jj-messagebox/toast/jj-toast.vue",
"content": "\r\n\t\r\n\t\t
\r\n\r\n\r\n\r\n\r\n\n"
},
{
"path": "src/main.js",
"content": "import Vue from 'vue'\nimport App from './App.vue'\n\nimport jj_messagebox from './jj-messagebox/index.js'\n\nVue.use(jj_messagebox)\n\nVue.config.productionTip = false\n\nnew Vue({\n render: h => h(App),\n}).$mount('#app')\n"
}
]\r\n\t\t\t
\r\n\t\r\n\t\t\t\t
\r\n\t\t 0\" class=\"flexContentCenter\">\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t![]()
\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\r\n\t\t\t