0.2.2 • Published 2 years ago
message-snackbar
基于vuetify二次封装的snackbar组件,可实现类似于elementUI一样的样式,让vuetify的snackbar组件使用的更加方便更加优美!
使用npm引用
npm install message-snackbar
main.js文件中引用插件
import message from "message-snackbar/src/components/message-snackbar";
Vue.use(message);
插件使用实列
this.$msg({
type: "success",
message: "修改配置成功",
timeout: "5000",
vuetify: false,
icon: {
icon: "mdi-emoticon-wink-outline",
color: "#ff5252",
icolor: "#67C23A",
},
positions: ["top", "right"],
variants: ["text"],
offsetY: 50,
showClose: true,
transition: 0.1,
offsetX: 0,
dark: true,
});
message参数
参数 | 默认值 | 类型 | 说明 |
---|
type | success | string | 提示框类型有success、warning、error、info四种。 |
message | - | string | 需要显示的提示文字。 |
timeout | 3000 | number | 等待message 自动隐藏的时间 (毫秒) 。使用 “-1” 保持无限期打开 。 |
vuetify | true | boolean | 是否采用vuetify样式显示,false则选择elementui样式显示。 |
icon | - | object | message的icon图标及背景色配置。具体参数说明见下方icon参数表。 |
positions | top | array | message显示的位置,有top、bottom、left、right、centered五种,可混合使用。 |
variants | - | array | 变体,有text、outlined、shaped三种,可混合使用。具体参数说明见下方variants参数表。 |
offsetY | 0 | number | 竖直方向偏移量,正数向下偏移,负数向上偏移。 |
offsetX | 0 | number | 水平方向偏移量,正数向右偏移,负数向左偏移。 |
showClose | false | boolean | 关闭按钮,可手动关闭message提示框,默认不显示。 |
transition | 0.2 | number | vuetify参数为false,选择elementui样式时。message提示框的过渡时间(毫秒) |
dark | false | boolean | 将暗色主题变量应用到组件。你可以在 dark themes 的 Material Design 文档中找到更多有关信息。 |
icon参数
参数 | 默认值 | 类型 | 说明 |
---|
icon | type四种状态各有一个默认值,就不细说了,自己试试。 | string | icon图标, 对于所有可用图标的列表, 请访问官方的 Material Design 图标 页面。要使用任何这些图标,只需使用 mdi- 前缀,然后是图标名称 |
color | 如上 | string | message提示框的背景色。 |
icolor | 如上 | string | message的icon的颜色。 |
variants参数
参数 | 默认值 | 类型 | 说明 |
---|
text | - | string | 将定义的 color 应用于文本和同样的低透明度背景。 |
outlined | - | string | message提示框的背景色。 |
shaped | - | string | 在卡片的左上角和右下角应用较大的边框半径。 |