vue-popup-component v1.0.0

vue-component-popup

install

via vue-cli

yarn add vue-component-popup --save

then , in main.js

import componentPopup from 'vue-component-popup'
Vue.use(componentPopup)

usage

basis

pop-up a component

at any javascript workspace in your project, you can invoke a component pop-up easily by using appPrompt.popUp method. for example:

<script>
  import test from '@/components/common/test.vue'

  export default {
    mounted() {
      appPrompt.popUp(test)
    }
</script>

wrokflow with promise

// at the end of this method run, these will return a promise object, and the instance of given component in arguments will be resolved while the instance being mounted.

this.$popUp(test)
  .then(vm => settimeout( () => vm.$refresh() ), 1000 ) // vm is a instance of test

cancel a pop-up

for axample:

this.$popUp.cancel(test) // destroy the instance of component--"test" with its wrapper.
this.$popUp.cancel() // if method--"cancel" doesn`t received any argument, it will destroy the lastest popped component.

wrokflow with promise

// at the end of this method run, these will return a promise object, and undefineded will be resolved while the instance being destroyed.

this.$popUp.cancel(test)
  .then( /* do something else */ )

cancel many pop-ups

for example:

this.$popUp.cancelAll(test) // destroy all the instances of component--"test" with these wrappers
this.$popUp.cancelAll() // if method--"cancel" doesn`t received any argument, it will destroy all popped components.

advanced options

the this.$popUp method accepts another object type argument for receiving options, for example:

this.$popUp(test, {
	livingTime: 3000 // indicates the component pop-up will be cancelled after 3000ms.
})

overview