search

ankurk91 / vue-loading-overlay

Vue.js component for full screen loading indicator :cyclone:
https://ankurk91.github.io/vue-loading-overlay/
MIT License
1.24k stars 101 forks source link

QUESTION: how can I customize the icon when using the package as plugin? #17

Closed zangab closed 6 years ago

zangab commented 6 years ago

i want to use the overlay globally and to change the default icon. i've seen in the source code that there is a slot for the icon but HOW can i inject my custom markup when i use it as a plugin?

ankurk91 commented 6 years ago

If you are Vue expert you can do it like

var loading = this.$loading.show();
loading.$slots.default = ['Your line...'];
zangab commented 6 years ago

@ankurk91 thx for the quick answer. yeah, this would be an option. but is there also an option to do this in a html-markup-ish way? :)

ankurk91 commented 6 years ago

You can easily pass your slots when you have placed the component within your template

https://github.com/ankurk91/vue-loading-overlay/blob/master/examples/components/component.vue#L7

zangab commented 6 years ago

ok, but it isn't used as a plugin in your example but more like a component. my intention was to place a container in my entry-point-component and set the icon globally like:

<div id="app">
  <vue-loading>
    <my-icon></my-icon>
  </vue-loading>
</div>

however, guess i'll just wrap it in a component and use that globally. this should do it then. ;)

ankurk91 commented 6 years ago

The plugin method show() creates a new instance of the same component and append it to document body on beforeMount event hook.

https://github.com/ankurk91/vue-loading-overlay/blob/59ae65e9b23c50d4338b882f30903564d5f94bdc/src/js/api.js#L12-L15

You can use the component whatever way you like 😄