用于 Vue 3 的 Easy Toast 和 Snackbar 库 - vue3-snackbar

用于 Vue 3 的 Easy Toast 和 Snackbar 库 - vue3-snackbar
插件名称 vue3-snackbar
发布时间 2022年1月16日
插件作者 craigrileyuk

用于 Vue 3 应用程序的简单但可定制的吐司和小吃店库。

与合成 API 和选项 API 完全兼容。

安装和下载:

# Yarn
$ yarn add vue3-snackbar

# NPM
$ npm i vue3-snackbar

使用

1. 导入并注册库。

import { createApp } from "vue";
import { SnackbarService, Vue3Snackbar } from "vue3-snackbar";
// 样式表
import "vue3-snackbar/dist/style.css";
import App from "./App.vue";
const app = createApp(App);
app.use(SnackbarService);
app.component("vue3-snackbar", Vue3Snackbar);
app.mount("#app");

2.将vue3-snackbar组件添加到app.vue中。

 <vue3-snackbar bottom right :duration="5000">
 </vue3-snackbar>
// 选项 API
export default {
  methods: {
    successMessage() {
      this.$snackbar.add({
        type: 'success',
        text: 'This is a success message'
      })
    }
  }
}
// 组合 API
import { useSnackbar } from "vue3-snackbar";
const snackbar = useSnackbar();
snackbar.add({
    type: 'success',
    text: 'This is a success message'
})

3.所有默认道具。

/**
 * 在屏幕顶部渲染小吃栏
 */
top: {
  type: Boolean,
  default: false,
},
/**
 * 在屏幕底部渲染小吃栏
 */
bottom: {
  type: Boolean,
  default: false,
},
/**
 * 渲染屏幕左侧的snackbar 
 */
left: {
  type: Boolean,
  default: false,
},
/**
 * 渲染屏幕右侧的snackbar 
 */
right: {
  type: Boolean,
  default: false,
},
/* ******************************************
 * 颜色道具
 ****************************************** */
success: {
  type: String,
  default: "#4caf50",
},
error: {
  type: String,
  default: "#ff5252",
},
warning: {
  type: String,
  default: "#fb8c00",
},
info: {
  type: String,
  default: "#2196f3",
},
/* ******************************************
 * 其他道具
 ****************************************** */
/**
 * 消息在屏幕上停留的默认时间,以毫秒为单位
 */
duration: {
  type: Number,
  default: null,
},
/**
 * 要添加到每条消息的类字符串
 */
messageClass: {
  type: String,
},
/**
 * 小吃店容器的 z-index 值
 */
zindex: {
  type: Number,
  default: 10000,
},
/**
 * 减少snackbar消息在y轴上的填充
 */
dense: {
  type: Boolean,
  default: false,
},
/**
 * 反转snackbar消息的显示顺序
 */
reverse: {
  type: Boolean,
  default: false,
},
/**
 * 使用带有相同组键的消息的快餐栏组
 */
groups: {
  type: Boolean,
  default: false,
},

4. 该add方法的所有可能参数。

snackbar.add({

  // success, error, warning, info
  type: 'success',

  // 标题
  title: 'message title',
  
  // 消息
  text: 'message',

  // 背景颜色
  background: '#ccc',

  // 可关闭或不可关闭
  dismissible: true,

  // vue3-icon props
  // https://www.npmjs.com/package/vue3-icon
  icon: {},

  //消息组密钥
  groupKey: ''

})

5. 清除所有可用消息。

snackbar.clear();