![](\"https://raw.githubusercontent.com/keydone/vue-kdialog/master/screenshot/small.gif\")
\r\n\r\n## Usage (使用)\r\n\r\n1, import kdialog component (导入 kdialog 组件);\r\n\r\n2, vue.use(kdialog) (调用vue.use(kdialog)方法);\r\n\r\n3, congratulations! (好了，可以尽情使用了！)\r\n\r\n```javascript\r\nimport Vue from 'vue';\r\nimport kdialog from 'vue-kdialog';\r\n\r\nVue.use(kdialog);\r\n```\r\n\r\n## Suport (功能)\r\n\r\n> There are many types u can use (内置了多种功能供你使用):\r\n\r\n1, $loading, need to close manually (需要手动调用关闭方法，否则不会消失):\r\n```javascript\r\nconst loading = this.$loading();\r\n// close it when u need:\r\nloading.close();\r\n```\r\n\r\n2, $toast, it will disappear after default 2500ms, change it like this (无需手动调用关闭方法，在参数timer时间后自动消失，默认为2500ms):\r\n```javascript\r\nthis.$toast({\r\n\tmsg: 'This is a test for toast',\r\n\ttimer: 3000\r\n});\r\n```\r\n\r\n3, $alert, there is only one button (只有1个确定按钮):\r\n```javascript\r\nthis.$alert({\r\n\twidth: 300,\r\n\ttitle:'Alert',\r\n\tcontent:'This is a test for Alert
',\r\n\tokText:'Yes'\r\n});\r\n```\r\n\r\n4, $confirm, there a 2 buttons (有2个按钮):\r\n```javascript\r\nthis.$confirm({\r\n\twidth: 500,\r\n\tcontent:'This is a test for Alert
',\r\n\tokText:'Yes'\r\n});\r\n```\r\n\r\n5, component, 自定义组件\r\n```javascript\r\nimport a from 'a'\r\nthis.$confirm({\r\n\twidth: 500,\r\n\tcomponent: a,\r\n\tok(kdialog){\r\n\t\tkdialog.disabled = true;\r\n\t},\r\n\tcancel(kdialog){\r\n\t\tkdialog.close();\r\n\t}\r\n});\r\n```\r\n\r\n参数列表：\r\n\r\nparams | type | description (参数解释) |\r\n--------- | -------- | -------- |\r\n_body_ | reserved words(不要覆盖) | control the position of the dialog (弹窗唤起位置class) |\r\n_rollfrom_ | String ('center'/'top'/'bottom' default : 'center') | control the position of the dialog (弹窗唤起位置class) |\r\ntitle | String | title of dialog (弹窗标题) |\r\nshow | Boolen | show or remove the dialog dom (显示或移除弹窗dom节点) |\r\ncustomClass | String | custom className for dialog (弹窗自定义className) |\r\n_type | reserved words(不要覆盖) | don't override it (内部组件使用，请勿覆盖)|\r\n_runtime | reserved words (default : 'pc' 不要覆盖) | kdialog.setRunTime('m'); (用于判断运行环境进行样式自定义，例如pc/m)|\r\ntitle | String| title of dialog (弹窗标题) |\r\nwidth | Number/String (width unit) | width of dialog (弹窗宽度) |\r\ncontent | String | content of dialog (弹窗内容) |\r\nok | function | callback for ok botton/toast (确定按钮/toast回调) |\r\ncancel | function | callback for cancel button (取消按钮回调) |\r\ncomponent | Object | custom component object (自定义组件对象) |\r\nokEvent | Object | custom ok event bus name (自定义确定 event bus 名称) |\r\ncancelEvent | Object | custom cancel event bus name (自定义取消 event bus 名称) |\r\ndisabled | Boolen | disable click the confirm (禁用确认按钮点击事件) |\r\nsubmiting | Boolen | submiting style for confirm button (确认按钮正在提交样式) |\r\nshadowClose | Boolen (default : true) | click shadow to close dialog (点击背景遮罩关闭弹窗) |\r\nokText | String | confirm button text for alert (alert确认按钮文案) |\r\nconfirmText | String | confirm button text for confirm (confirm确认按钮文案) |\r\ncancelText | String | cancel button text (取消按钮文案) |\r\ntimer | Number | show toast time (显示toast时长) |\r\nmsg | Number | show toast msg (显示toast消息) |\r\nstopBodyScroll | Boolen(default: true) | stop Body Scroll, support pc & m (禁止body跟随弹窗内容区域滚动而滚动的默认行为, 同样支持移动端) |\r\n\r\n> By the way:\r\n\r\nu can use it like this (你可以这样引入):\r\n\r\n1) no css\r\n```javascript\r\nimport Vue from 'vue';\r\nimport kdialog from 'vue-kdialog';\r\nVue.use(kdialog);\r\n```\r\n\r\n2) with postcss\r\n```javascript\r\nimport Vue from 'vue';\r\nimport kdialog from 'vue-kdialog';\r\nimport kdialog from 'vue-kdialog/src/keydialog_pc.css';\r\nVue.use(kdialog);\r\n```\r\n\r\n3) event bus & callback (内置了 event bus 和回调函数)\r\nThere 2 ways to handle confirm & cancel button:\r\n\r\n① event bus:\r\n```javascript\r\nimport Vue from 'vue';\r\nimport kdialog from 'vue-kdialog'\r\nVue.use(kdialog);\r\nkdialog.eventbus();\r\n// init the eventbus, the bus will be mounted to Vue prototype (全局使用eventbus事件，并挂载到vue原型上)\r\n\r\n// when u need:\r\nconst this = vm;\r\nvm.$bus.$off('changeAct'); // !!!!off event first!!!! of u will get more emit\r\nvm.$confirm({\r\n\ttitle: '