{"id":18024012,"url":"https://github.com/lete114/msg-alert","last_synced_at":"2025-07-14T13:10:35.678Z","repository":{"id":37456052,"uuid":"505484147","full_name":"Lete114/msg-alert","owner":"Lete114","description":"仿 Element-ui 的 Message 组件 | Message component imitating Element-ui","archived":false,"fork":false,"pushed_at":"2022-12-16T09:16:38.000Z","size":212,"stargazers_count":14,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-27T07:04:31.665Z","etag":null,"topics":["alert","element","element-ui","message","msg"],"latest_commit_sha":null,"homepage":"https://Lete114.github.io/msg-alert/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Lete114.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-20T14:51:41.000Z","updated_at":"2025-03-12T00:58:13.000Z","dependencies_parsed_at":"2022-08-19T19:40:36.554Z","dependency_job_id":null,"html_url":"https://github.com/Lete114/msg-alert","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Lete114/msg-alert","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lete114%2Fmsg-alert","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lete114%2Fmsg-alert/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lete114%2Fmsg-alert/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lete114%2Fmsg-alert/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lete114","download_url":"https://codeload.github.com/Lete114/msg-alert/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lete114%2Fmsg-alert/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265297048,"owners_count":23742585,"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":["alert","element","element-ui","message","msg"],"created_at":"2024-10-30T07:11:39.925Z","updated_at":"2025-07-14T13:10:35.648Z","avatar_url":"https://github.com/Lete114.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Msg-Alert\n\n\u003ca href=\"https://github.com/Lete114/msg-alert/releases/\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/msg-alert?logo=npm\" alt=\"Version\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/Lete114/msg-alert/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/msg-alert?color=FF5531\" alt=\"MIT License\"\u003e\u003c/a\u003e\n\n一个简单的气泡消息提示库，仅 3kb\n\n仿 [Element-ui Message](https://element-plus.gitee.io/zh-CN/component/message.html) 组件，由于我特别喜欢这个组件，但奈何它只能应用于 Vue.js，于是就用原生 js 仿造了一个，不敢说 100% 一样，但起码得有 90% 的相似度，如果有优化空间，欢迎 PR👍😁\n\n## 安装\n\n使用 npm:\n\n```bash\nnpm install msg-alert --save\n```\n\n使用 CDN:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/msg-alert\"\u003e\u003c/script\u003e\n```\n\n## 使用方法\n\n\u003e 可参考仓库中的 [public/index.html](./public/index.html)\n\nESModule 模块\n\n```js\nimport message from 'msg-alert'\n// 使用方法如下浏览器使用示例\n```\n\nCommonJS 模块\n\n```js\nconst message = require('msg-alert')\n// 使用方法如下浏览器使用示例\n```\n\n在浏览器中使用\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/msg-alert\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  // 默认 等价 message({type:'info',text:'这是一个段落'})\n  message('这是一个段落')\n  message.info('这是一个段落')\n  // 成功 等价 message({type:'success',text:'success'})\n  message.success('success')\n  // 警告 等价 message({type:'warn',text:'warn'})\n  message.warn('warn')\n  // 错误 等价 message({type:'error',text:'error'})\n  message.error('error')\n\u003c/script\u003e\n```\n\n## 选项 API\n\n### message.zIndex\n\n类型: `Number`\n\n默认值: `1`\n\nMessage 的显示层级（全局）\n\n### message.destroyAll\n\n类型: `Function`\n\n销毁所有的 Message\n\n### type\n\n类型: `String`\n\n默认值: `info`\n\nMessage 显示类型\n\n### text\n\n类型: `String`\n\n默认值: `''`\n\nMessage 显示内容\n\n### zIndex\n\n类型: `Number`\n\n默认值: `1`\n\nMessage 的显示层级（当前弹出）\n\n### offset\n\n类型: `Number`\n\n默认值: `20`\n\nMessage 距离窗口顶部的偏移量\n\n### duration\n\n类型: `Number`\n\n默认值: `3000`\n\nMessage 显示的持续时间,设置为 0 表示永不关闭 **(单位毫秒)**\n\n### customClass\n\n类型: `String`\n\n默认值: `''`\n\n自定义 Message 的类名\n\n### html\n\n类型: `Boolean`\n\n默认值: `false`\n\n是否将 `text` 属性作为 HTML 片段处理 **(请提前做好仿 [xss](https://en.wikipedia.org/wiki/Cross-site_scripting) 的处理)**\n\n### showClose\n\n类型: `Boolean`\n\n默认值: `false`\n\n是否显示关闭按钮\n\n### onClose\n\n类型: `Function`\n\n默认值: `-`\n\nMessage 关闭前的回调函数\n\n### appendTo\n\n类型: `String | HTMLElement`\n\n默认值: `document.body`\n\n设置组件的根元素\n链接\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flete114%2Fmsg-alert","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flete114%2Fmsg-alert","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flete114%2Fmsg-alert/lists"}