vue 堆叠卡_Vue.js的可堆叠通知警报

vue 堆叠卡

通知我 (vue-notify-me)

Stackable notification Alert for Vue.js.

Vue.js的可堆叠通知警报。

View demo 查看演示 Download Source 下载源

特征 (Features)

• Customizable template

  可定制的模板

• Stackable notifications

  可堆叠的通知

安装 (Installation)

npm install vue-notify-me --save

物产 (Properties)

Properties	Type	Values
event-bus	Object	Central event Bus
event-show (not required)	String	Default notify-me
event-hide (not required)	String	Default hide-notify-me
close (not required)	String	Default bulma, options: bootstrap or any other class for the closing icon
permanent (not required)	Bool	Default false
container (not required)	String	Default notification, (Class for the notification container)
status (not required)	String	Default is-success, (Class for the notification status)
width (not required)	String	Default 350px. It's mandatory to set the unit for the width. For example: rem, em, px
timeout (not required)	Number	Default 4000. Value is in miliseconds. If notification is not permanent you can set the timeout for it

物产	类型	价值观
event-bus	目的	中央活动巴士
event-show (不需要)	串	默认 notify-me
event-hide (不需要)	串	默认的 hide-notify-me
close (不需要)	串	默认 bulma ，选项：引导程序或关闭图标的其他任何类
permanent (不需要)	布尔	默认为假
container (不需要)	串	默认 notification ，(通知容器的类)
status (不是必需的)	串	默认 is-success ，(通知状态的类)
width (不需要)	串	默认值 350px 。 必须设置宽度单位 。 例如： rem ， em ， px
timeout (不需要)	数	默认值4000 价值以毫秒为单位。 如果通知不是permanent ，则可以为其设置超时

例子 (Examples)

Include the component in your .vue file.

将组件包括在您的.vue文件中。

<template>
  <notify-me
        :event-bus="bus">
      <template slot="content" scope="{data}">
          <div style="width: 100%; word-break: break-all; text-align: left">
              <h4><b>{{data.title}}</b></h4>
              <p style="margin: 0">{{data.text}}</p>
          </div>
      </template>
  </notify-me>
</template>

If you'd like to use the component in a SPA set a single template on your layout application and fire your notification through your central event bus. Set any available prop for the component like this:

如果您想在SPA中使用该组件，请在布局应用程序上设置一个模板，然后通过中央事件总线触发您的通知。 为组件设置任何可用的道具，如下所示：

<notify-me
    container="notification"
    status="alert-success"
    :width="300"
    close="bulma"
    :event-bus="bus"
>
      <template slot="content" scope="{data}">
          <div style="width: 100%; word-break: break-all; text-align: left">
              <h4><b>{{data.title}}</b></h4>
              <p style="margin: 0">{{data.text}}</p>
          </div>
      </template>
  </notify-me>

To show a notification just fire an event like this:

要显示通知，只需触发如下事件：

<script>
import Notify from 'vue-notify-me'

const bus = new Vue();

export default {
  components: {
    'notify-me': Notify
  },
  data(){
      return {
          bus
      }
  },
  mounted(){
      this.bus.$emit('notify-me', {
        data: {
            title: 'The pygmy team :)',
            text: 'this is my notification'
        }
  
      });
  }
  
}
</script>

You may also add any available prop through the event emitter:

您还可以通过事件发射器添加任何可用的道具：

this.bus.$emit('notify-me', {
    permanent: true,
    status: this.status,
    data: {
        title: 'The pygmy team :)',
        text: this.text
    }

});

翻译自: https://vuejsexamples.com/stackable-notification-alert-for-vue-js/

vue 堆叠卡