Finestra emergent de notificacions globals senzilla, lleugera i elegant per a Vue.js

Bloc

Finestra emergent de notificacions globals senzilla, lleugera i elegant per a Vue.js

Finestra emergent de notificacions globals senzilla, lleugera i elegant per a Vue.js

VueUp: finestra emergent de notificacions globals senzilla, lleugera i elegant per a Vue.js.

La cerca a Facebook no funciona 2016

Veure el fitxer demostració .

Instal·la

npm install --save vueup

En algun lloc de la vostra aplicació:

import Vue from 'vue' import VueUp from 'vueup' Vue.use(VueUp)

Nuxt.js

Per utilitzar VueUp amb Nuxt.js desplegueu l'aplicació amb el --spa o --s marca per desactivar la representació del servidor. Per obtenir més informació, vegeu nuxtjs.org/guide/commands/ .

En cas contrari, podeu fer els passos següents:

Fitxer plugins/vueup.js:

/ r corrents mma
import Vue from 'vue' import VueUp from 'vueup' Vue.use(VueUp)

A continuació, afegiu el fitxer dins de la clau de connectors de nuxt.config.js:

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

Nota: La clau ssr s’utilitza per desactivar la representació del servidor per VueUp perquè és una biblioteca del client. Per obtenir més informació, vegeu nuxtjs.org/guide/plugins/ .

Recomanaria afegir l'element VueUp sota el element a layouts/default.vue dossier.

Ús

Afegiu el component a un punt de la vostra sol·licitud:

Per activar la notificació, utilitzeu el $popup mètode:

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

També podeu utilitzar una promesa per executar alguna cosa un cop finalitzada la notificació VueUp:

export default { ... methods: { notify () { this.$popup({ message: 'Your request is reviewed.' }) .then(() => { // ... do something }) } } }

INCENDI

this.$popup(string | Object) this.$popup('message') // or this.$popup({ message : 'message', color : '#423452', backgroundColor : 'rgba(0, 0, 0, 0.4)', delay : 4, fontSize : 60 })

Atributs

Nom tipus per defecte descripció
missatge corda - El missatge que es mostrarà a la notificació
color corda #ffffff El color del text del missatge
color de fons corda rgba (0, 0, 0, 0,8) El color de fons de la notificació
retard surar 3.5 Quant de temps (en segons, eq 3,5 segons) s'ha de mostrar la finestra emergent de notificació
mida de la font int 60 La mida del tipus de lletra del text de la notificació

Pista: Per al color i backgroundColor camps podeu aplicar la propietat de color en forma de propietat de color CSS.

Detalls de la descàrrega:

Autor: chryb

Demostració en directe: https://chryb.github.io/vueup

GitHub: https://github.com/chryb/vueup

javascript encodeuri vs encodeuricomponent

#vuejs #javascript # vue-js