{"id":13424266,"url":"https://github.com/ElemeFE/vue-msgbox","last_synced_at":"2025-03-15T18:34:30.087Z","repository":{"id":65980043,"uuid":"48184118","full_name":"ElemeFE/vue-msgbox","owner":"ElemeFE","description":"A message box (like Sweet Alert) for vue.js.","archived":false,"fork":false,"pushed_at":"2016-10-29T07:50:02.000Z","size":45,"stargazers_count":236,"open_issues_count":10,"forks_count":80,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-02-28T06:15:28.903Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ElemeFE.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-17T16:01:17.000Z","updated_at":"2025-02-28T03:02:34.000Z","dependencies_parsed_at":"2023-02-19T18:15:51.933Z","dependency_job_id":null,"html_url":"https://github.com/ElemeFE/vue-msgbox","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElemeFE%2Fvue-msgbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElemeFE%2Fvue-msgbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElemeFE%2Fvue-msgbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElemeFE%2Fvue-msgbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ElemeFE","download_url":"https://codeload.github.com/ElemeFE/vue-msgbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243775802,"owners_count":20346266,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T00:00:51.002Z","updated_at":"2025-03-15T18:34:25.065Z","avatar_url":"https://github.com/ElemeFE.png","language":"JavaScript","readme":"# Overview\n\nvue-msgbox is a message box (like Sweet Alert) for vue.js.\n\n# Install\n\nGet source from npm.\n\n```bash\n$ npm install vue-msgbox --save\n```\n\nSupported UMD library and individual CSS file.\n\n```bash\n./lib/\n├── vue-msgbox.js\n└── vue-msgbox.css\n./src/\n├── index.js\n└── msgbox.vue\n```\n\n```JavaScript\n// For ES6 module\nimport MessageBox from 'vue-msgbox';\n\n// For commonJS\nconst MessageBox = require('vue-msgbox').default;\n\n// For global variable, import from script label, then\nconst MessageBox = VueMsgbox.default;\n\n// Import from src code for debugging or self building\nimport MessageBox from 'vue-msgbox/src';\n```\n\nAnd import CSS file: \n```javascript\nrequire('vue-msgbox/lib/vue-msgbox.css');\n```\n\n# Usage\n\n## Basic usage\n\n```JavaScript\nMessageBox(\"Good job!\", \"You clicked the button!\", \"success\");// title, message, type\n```\n\nOr pass an object as options, and second parameter as callback:\n\n```JavaScript\nMessageBox({\n  title: 'I\\'m a title',\n  message: 'I\\'m a message',\n  type: 'success',\n  showCancelButton: true\n}, function(action) {\n  console.log('callback:', action);\n  MessageBox('Clicked: ' + action);\n});\n```\n\n## Promise based usage\n\n### Basic usage\n\n```JavaScript\nMessageBox({\n  title: 'I\\'m a title',\n  message: 'I\\'m a message',\n  type: 'success',\n  showCancelButton: true\n}).then(function(action) {\n  console.log('callback:', action);\n  MessageBox('Clicked: ' + action);\n});\n```\n\n### alert\n\n```JavaScript\nMessageBox.alert(message, title, options);\n```\n\n```JavaScript\nMessageBox.alert('message').then(function(action) {\n  ...\n});\n```\n\n### confirm\n\nIf user press cancel button, then this promise will be rejected.\n\n```JavaScript\nMessageBox.confirm(message, title, options);\n```\n\n```JavaScript\nMessageBox.confirm('message').then(function(action) {\n  ...\n});\n```\n\n### prompt\n\nIf user press cancel button, then this promise will be rejected.\n\n```JavaScript\nMessageBox.prompt(message, title, options);\n```\n\n```JavaScript\nMessageBox.prompt('message').then(function(value, action) {\n  ...\n});\n```\n\n# Options\n\n| Option | Description |\n| ----- | ----- |\n| title | The title of MessageBox. |\n| message | The content of MessageBox. |\n| type | The status type of MessageBox: success, warning, error |\n| showConfirmButton | Boolean(default true) visible of confirm button. |\n| showCancelButton | Boolean(default false) visible of cancel button. |\n| confirmButtonText | The text of confirm button. |\n| confirmButtonPosition | (Default:right) The position of confirm button, default is right. |\n| confirmButtonHighlight | (Default:false) Highlight confirm button if confirmButtonHighlight is true. |\n| cancelButtonText | The text of cancel button. |\n| cancelButtonHighlight | (Default:false) Highlight cancel button if cancelButtonHighlight is true. |\n| confirmButtonClass | Extra className of confirm button. |\n| cancelButtonClass | Extra className of cancel button. |\n| showInput | Boolean(default false) visible of input. |\n| inputValue | value of input. |\n| inputPlaceholder | placeholder of input. |\n| inputPattern | Regexp(default null). validation pattern of input. |\n| inputValidator | validate function of input, if validator return a string, MessageBox will use it as inputErrorMessage. |\n| inputErrorMessage | error message when inputPattern test inputValue failed. |\n\n# Develop\n\nCoding with watching and hot-reload.\n\n```bash\n$ npm run dev\n```\n\nDevelop on real remote device.\n\n```bash\n$ npm run remote-dev {{ YOUR IP ADDRESS }}\n```\n\n# License\nMIT\n","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","UI组件","Awesome Vue.js"],"sub_categories":["Libraries \u0026 Plugins"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FElemeFE%2Fvue-msgbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FElemeFE%2Fvue-msgbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FElemeFE%2Fvue-msgbox/lists"}