@adecrown/whoosh 中文文档教程

Question

Whoosh

Project setup

npm install @adecrown/whoosh

or

yarn add @adecrown/whoosh

Basic Usage

在你的 main.js 文件中

import Whoosh from "@adecrown/whoosh";
Vue.use(Whoosh);

然后在你的 App.vue 文件中使用 Whoosh 像这样 Whoosh

<Whoosh/>

然后可以像这样在任何地方调用

this.$whoosh({
  status: "error",
  title: "Something went wrong",
  message: "We could not find the id"
});

API

this.$whoosh({
  // (optional) Notification status 'success,warn,error'
  // custom status can also be passed here
  status: "success",

  // (optional) Notification title
  title: "I am the title",

  // (optional) Notification message
  message: "I am the message",

  // (optional) This will override the default duration and the provided prop duration
  duration: 5,

  // (optional) This will override the default size and the provided prop size
  size: {
    width: 400,
    height: 250
  },

  // (optional) Provide a callback function that gets called when the notification closes
  onClose: () =>{},

  // (optional) allows the notification to reveal extra data
  expandable:{
    data:"New Data" | Login // (required) string or a registered component,
    height:600, //(optional) will expand to this height
    isComponent:false, //(optional) but required and should be set to true if expandable is to display a component
    noBackground: boolean // (optional);
    buttonColor: string // (optional);
    hideHeader: boolean // (optional);
    headerStyle: object // (optional);
  },

});

Props Table

下面的所有道具都是可选的。

Name	Type	Default	Description
duration	Number	5	how long you want the notification to stay on for (5 equals 5 seconds)
fill	Boolean	false	fill the whole card with the status color
closeOnClick	Boolean	false	notification will only close when it's clicked on
textColor	String	black	set the text color to what you prefer
progressColor	String	#dcd9d9	set the progress color to what you prefer
size	Object	{width:500,height:210}	use it to set your prefered width and height
messageStyle	Object		give a custom style to the message section
titleStyle	Object		give a custom style to the title section
display	left or right	right	controls which side the notification should come out from
mobileDisplay	top or bottom	top	controls which position the notification should be displayed on mobile
isResponsive	Boolean	true	handles responsiveness of notifications. Set it to false if you don't want the mobile view.
skin	default or launch	default	set the notification skin type to use
queue	Boolean	false	wait for existing notification to close before showing a new one

Custom Status

如果默认状态（成功、错误、警告）不够或不符合您的口味，您可以创建自己的自定义状态，这是一个对象状态数组，每个对象都需要一个名称和颜色。

在您的 main.js 文件中添加如下选项参数。

import Whoosh from "@adecrown/whoosh";
Vue.use(Whoosh, {
  statuses: [
    {
      name: "Testing",
      color: "red"
    },
    {
      name: "Testing 3",
      color: "green"
    }
  ]
});

像往常一样使用 Whoosh 来调用您的自定义状态

this.$whoosh({
  status: "Testing",
  title: "This is my custom status",
  message: "Hello Testing"
});

默认状态仍然与您的自定义状态一起可用，但您也可以通过将其添加到状态数组来覆盖默认状态的颜色

  {
    name: 'error',
    color: 'black'
  }

launch skin notification (usage)

使用启动通知只需要一个道具，只是向 whoosh 添加一个 skin 道具并指定 'launch' 作为字符串。 它的持续时间固定为 5 秒。

  <Whoosh skin="launch"/>

this.$whoosh({
  status: "success",
  message: "My launch message"
});