小型可自定义的咆哮风格通知插件– vue-notice

小型可自定义的咆哮风格通知插件– vue-notice
插件名称 vue-notice
发布时间 2020年11月15日
插件作者 tahq69

这是一个用于Vue.js应用程序的小型可自定义的咆哮风格通知插件。

安装和下载:

# NPM
$ npm install crip-vue-notice --save

用法:

导入并安装通知插件。

import Vue from 'vue'
import CripNotice from 'crip-vue-notice'
Vue.use(CripNotice)

创建通知。

<template>
  <button class="btn btn-default" @click="notice('open')">Normal</button>
  <button class="btn btn-default" @click="notice('error')">Error</button>
  <button class="btn btn-default" @click="notice('info')">Info</button>
  <button class="btn btn-default" @click="notice('success')">Success</button>
  <button class="btn btn-default" @click="notice('warning')">Warning</button>
</template>

<script>
export default {
  methods: {
    notice (type) {
      this.$notice[type]({
        title: `Notice of ${type} type`,
        description: `Notice of ${type} type was clicked and it popped up!`
      })
    },
  },
}
</script>

默认 props 。

{
  type: {
    type: String,
    required: true,
    validator: value => types.indexOf(value) > -1,
  },
  title: { type: String, required: true },
  name: { type: String, required: true },
  description: { type: String },
  icons: {
    type: Object,
    default: () => ({
      info: "fa fa-info-circle",
      success: "fa fa-check-circle",
      warning: "fa fa-exclamation-circle",
      error: "fa fa-times-circle",
      close: "fa fa-times",
    }),
  },
  duration: { type: Number, default: () => 1.5 },
  styles: { type: Object, default: () => ({}) },
  closable: { type: Boolean, default: () => false },
  className: { type: String },
  onClose: { type: Function },
},