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 | 在卡片的左上角和右下角应用较大的边框半径。 |