vue-message-plugin
A message plugin based on Vue.js which works like ElementUI/Message.
一个基于 Vue.js 的消息插件,工作原理类似于 elementui / message。
Build Setup
# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production and view the bundle analyzer reportnpm run build --report
For a detailed explanation on how things work, check out the guide and docs for vue-loader.
How To Use / 使用
- Install / 安装
npm i vue-message-plugin
- import & install plugin before create root Vue Component/在实例化根组件前 引入 & 安装插件
import Message from 'vue-message-plugin' Vue
- Use in any component / 在任意组件中使用
// vm.$message returns instance of Message Component// vm.$message返回值是Message组件的实例let message = vm // manually close the Message instance// 可以手动关闭Message实例message
Options / 选项
attribute/参数 | Desc/说明 | type/类型 | options/可选值 | default/默认值 |
---|---|---|---|---|
message | 消息文字 | string / VNode | — | — |
type | 主题 | string | success/warning/info/error | info |
dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | — | false |
customClass | 自定义类名 | string | — | — |
duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 3000 |
showClose | 是否显示关闭按钮 | boolean | — | false |
center | 文字是否居中 | boolean | — | false |
onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | — | — |
offset | Message 距离窗口顶部的偏移量 | number | — | 20 |
Methods / 方法
调用 Message 或 this.$message 会返回当前 Message 的实例。如果需要手动关闭实例,可以调用它的 close 方法。
Calling Message or this. $ Message will return the current Message instance. If you need to manually close the instance, you can call its close method.
方法名 | 说明 |
---|---|
close | 关闭当前的 Message |