{"id":18749192,"url":"https://github.com/mengdu/m-message","last_synced_at":"2025-04-06T05:15:50.304Z","repository":{"id":32824725,"uuid":"142154445","full_name":"mengdu/m-message","owner":"mengdu","description":"A message plugin for vue.","archived":false,"fork":false,"pushed_at":"2023-02-09T02:02:52.000Z","size":1407,"stargazers_count":178,"open_issues_count":2,"forks_count":23,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-28T01:52:17.471Z","etag":null,"topics":["m-message","message","vue-message"],"latest_commit_sha":null,"homepage":"https://mengdu.github.io/m-message/index.html","language":"TypeScript","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/mengdu.png","metadata":{"files":{"readme":"README-zh.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-07-24T12:19:50.000Z","updated_at":"2025-01-18T13:02:51.000Z","dependencies_parsed_at":"2024-01-22T20:15:06.896Z","dependency_job_id":"58ff029d-0735-41d5-8b9a-2457546299f4","html_url":"https://github.com/mengdu/m-message","commit_stats":{"total_commits":83,"total_committers":4,"mean_commits":20.75,"dds":0.5903614457831325,"last_synced_commit":"83ec6985d3cabf8091d5ff0437e0604caff98ca0"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mengdu%2Fm-message","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mengdu%2Fm-message/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mengdu%2Fm-message/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mengdu%2Fm-message/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mengdu","download_url":"https://codeload.github.com/mengdu/m-message/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247436285,"owners_count":20938533,"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":["m-message","message","vue-message"],"created_at":"2024-11-07T17:06:40.237Z","updated_at":"2025-04-06T05:15:49.899Z","avatar_url":"https://github.com/mengdu.png","language":"TypeScript","funding_links":[],"categories":["UI组件","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["通知","UI Components","Notification"],"readme":"# vue-m-message\n\n基于 Vue 的信息提示插件。\n\n\u003e v4.x 版本仅支持 Vue 3；如果你使用 Vue 2 请使用 v3.x 的版本。\n\n![Preview](./preview.png)\n\n[English](README.md) | [Live Demo](https://mengdu.github.io/m-message/index.html)\n\n```bash\nnpm install vue-m-message\n\n# Vue 2\n# npm install vue-m-message@3\n```\n\n```js\nimport { createApp, h } from 'vue'\nimport Message from 'vue-m-message'\nimport 'vue-m-message/dist/style.css'\nimport App from './App.vue'\n\nconst app = createApp(App)\n\napp.use(Message)\n// or\napp.use(Message, options: { name?: string, defaultOptions?: MessageTypeOptions })\n\n// Message.info('Wellcome here !', { duration: -1, ctx: instance?.appContext })\n// Message.info(h('m-demo', 'Wellcome here !'), { duration: -1 })\nMessage.info(() =\u003e h('div', [\n  'Here is playground for ',\n  h('a', { href: 'https://github.com/mengdu/m-message' },'Vue Message'),\n  ' plugin.'\n]), {\n  title: 'Wellcome here !',\n  duration: -1,\n  iconURL: 'https://avatars.githubusercontent.com/u/11366654?s=40\u0026v=4'\n})\n// Message.info(\u003cm-demo\u003eWellcome here !\u003c/m-demo\u003e, { duration: -1 })\n// Message.info(() =\u003e \u003cm-demo\u003eWellcome here !\u003c/m-demo\u003e, { duration: -1 })\n\napp.mount('#app')\n```\n\n## Message API\n\n+ `Message(options: MessageOptions): MessageIntance` 通用提示信息\n+ `Message.info(message: string | VNode | (() =\u003e VNode), options?: MessageTypeOptions): MessageIntance` Info 提示信息\n+ `Message.success(message: string | VNode | (() =\u003e VNode), options?: MessageTypeOptions): MessageIntance` Success 成功提示信息\n+ `Message.error(message: string | VNode | (() =\u003e VNode), options?: MessageTypeOptions): MessageIntance` Error 错误提示信息\n+ `Message.warning(message: string | VNode | (() =\u003e VNode), options?: MessageTypeOptions): MessageIntance` Warning 警告提示信息\n+ `Message.loading(message: string | VNode | (() =\u003e VNode), options?: MessageTypeOptions): MessageIntance` Loading 加载提示信息\n+ `Message.closeAll(): void` 清空所有提示信息\n+ `Message.setDefault(options: MessageTypeOptions): void` 设置默认值\n\n\n```ts\ntype MessageTypeOptions = Omit\u003cMessageOptions, 'type' | 'message'\u003e\n\ninterface MessageIntance {\n  id: string\n  close: () =\u003e void\n}\n```\n\n### MessageOptions\n\n| 属性      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| type   | 消息类型图标 | string | '', 'info', 'success', 'error', 'warning', 'loading'  |   'info'   |\n| iconURL   | 使用图片替换类型图标 | string | —  |   —   |\n| title   | 消息标题 | string | —  |    ''   |\n| message   | 消息内容 | string | —  |    ''   |\n| position   | 消息展示位置 | string | 'top-left', 'top-center', 'top-right', 'center', 'bottom-left', 'bottom-center', 'bottom-right' |\n| duration   | 消息显示时长，单位ms；当 `-1` 时需要手动关闭 | number | —  |   3000   |\n| width   | 消息块宽度，默认自动宽 | string | —  |  ''  |\n| className   | 消息块类名 | string | — |  — |\n| wrapperClassName   | 包裹层类名 | string | — |  — |\n| zIndex   | 堆叠顺序 | number | —  |   1010   |\n| supportHTML   | 消息内容是否支持html（message 为字符串时才有效） | boolean | true/false | false |\n| isCollapsed   | 是否折叠内容 | boolean | true/false |   false   |\n| collapsable   | 是否可折叠 | boolean | true/false |   false   |\n| closable  | 是否可以关闭 | boolean | true/false |  false   |\n| hasMask   | 是否含有遮罩层 | boolean | true/false |  false   |\n| stopTimerOnHover   | 当鼠标移过是否重新计算显示时长 | boolean | true/false |  true   |\n| onClose   | 关闭回调 | () =\u003e void | —  |    —   |\n| onCollapsed   | 折叠切换回调 | (collapsed: boolean) =\u003e void | —  |   —   |\n\n## License\n\nLicensed as [MIT](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmengdu%2Fm-message","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmengdu%2Fm-message","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmengdu%2Fm-message/lists"}