Vue 3轻量级Toast通知插件– dk-toast

Vue 3轻量级Toast通知插件– dk-toast
插件名称 vue-dk-toast
版本号 v2.2.1
发布时间 2020年12月9日
插件作者 Daniel-Knights

dk-toast是一个轻量级但完全可自定义的Toast通知插件,适用于Vue 3应用程序。

下载与安装:

# NPM
$ npm i vue-dk-toast --save--save

如何使用它:

1.导入dk-toast。

import { createApp } from 'vue';
import App from './App.vue';
import DKToast from 'vue-dk-toast';
createApp(App).use(DKToast).mount('#app');

2.在应用程序上显示基本的 toast  通知。

this.$toast('Hello World!');

3.使用以下选项配置 toast  通知。

this.$toast('Hello World!', {

  // 超时时间豪米
  duration: 3000,

  // 附加样式
  styles: {
    borderRadius: '10px',
  },

  // add custom content (e.g. icons) to the toast
  slotLeft: 'left content',
  slotRight: 'right content'
  
});

4.全局设置。

createApp(App)
.use(DKToast, {
  duration: 5000,
  positionY: 'bottom', // or 'top'
  positionX: 'right', // or 'left'
  styles: {
    color: '#000',
    backgroundColor: '#fff',
  },
})
.mount('#app');

变更日志:

v2.2.1(04/10/2021)

  • 容器z-index

v2.2.0(03/21/2021)

  • 在移动视图中添加了顶部和底部位置

v2.1.0(02/19/2021)

  • 添加了链接选项和更好的A11y支持。

v2.0.0(02/17/2021)

  • 在local-options中增加了positionX和positionY,在global-options中增加了max toasts选项,在local和global选项中都增加了disableClick选项。

v1.5.0(02/11/2021)

  • 通过本地类型选项添加了默认类。

v1.3.3(02/08/2021)

  • 为positionX添加了“居中”选项

v1.2.17(02/05/2021)

  • 更新

v1.2.13(02/03/2021)

  • 添加了TypeScript支持以及新的Composition API提供/插入选项。