基于vuetify二次封装的snackbar组件,可实现类似于elementUI一样的样式,让vuetify的snackbar组件使用的更加方便更加优美!
npm install message-snackbar
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,
});
参数 |
默认值 |
类型 |
说明 |
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 |
type四种状态各有一个默认值,就不细说了,自己试试。 |
string |
icon图标, 对于所有可用图标的列表, 请访问官方的 Material Design 图标 页面。要使用任何这些图标,只需使用 mdi- 前缀,然后是图标名称 |
color |
如上 |
string |
message提示框的背景色。 |
icolor |
如上 |
string |
message的icon的颜色。 |
参数 |
默认值 |
类型 |
说明 |
text |
- |
string |
将定义的 color 应用于文本和同样的低透明度背景。 |
outlined |
- |
string |
message提示框的背景色。 |
shaped |
- |
string |
在卡片的左上角和右下角应用较大的边框半径。 |