vue.js 弹出窗口_Vue.js的简单，轻巧和优雅的全局通知弹出窗口-CSDN博客

vue.js 弹出窗口

VueUp (VueUp)

Simple, lightweight and elegant global notification popup for Vue.js.

Vue.js的简单，轻巧和优雅的全局通知弹出窗口。

安装 (Install)

npm install --save vueup

Somewhere in your app:

应用中的某个位置：

import Vue   from 'vue'
import VueUp from 'vueup'

Vue.use(VueUp)

Nuxt.js (Nuxt.js)

To use VueUp with Nuxt.js deploy the app with the --spa or --s flag to disable server-side rendering. For more information see nuxtjs.org/guide/commands/.

要将VueUp与Nuxt.js一起使用，请使用--spa或--s标志部署应用程序以禁用服务器端呈现。有关更多信息，请参阅nuxtjs.org/guide/commands/ 。

Otherwise, you can do the following steps:

否则，您可以执行以下步骤：

File plugins/vueup.js:

文件plugins/vueup.js ：

import Vue from 'vue'
import VueUp from 'vueup'

Vue.use(VueUp)

Then, add the file inside the plugins key of nuxt.config.js:

然后，将文件添加到nuxt.config.js的plugins键中：

module.exports = {
  plugins: [
    { src: '~/plugins/vueup', ssr: false }
  ]
}

Note: The key ssr is used to disable the server-side rendering for VueUp because it's a client side library. For more information see nuxtjs.org/guide/plugins/.

注意：密钥ssr用于禁用VueUp的服务器端渲染，因为它是客户端库。有关更多信息，请参阅nuxtjs.org/guide/plugins/ 。

I would recommend to add the VueUp element <vue-up></vue-up> under the </nuxt> element in the layouts/default.vue file.

我建议在layouts/default.vue文件的</nuxt>元素下添加VueUp元素<vue-up></vue-up> 。

用法 (Usage)

Add the <vue-up> component to one point in your application:

将<vue-up>组件添加到应用程序中的一点：

<template>
  <div>
    <vue-up></vue-up>
  </div>
</template>

To trigger the notification use the $popup method:

要触发通知，请使用$popup方法：

export default {
  ...
  methods: {
    notify () {
      this.$popup({ message: 'A message' })
    }
  }
}

API (API)

this.$popup(string | Object)

this.$popup('message')

// or

this.$popup({
    message         : 'message',
    color           : '#423452',
    backgroundColor : 'rgba(0, 0, 0, 0.4)',
    delay           : 4
})