I'm using this loader screen with vuejs as component, and i would like to put my own spinner.
I have tried to change it from source code but nothing happened. Anyone can help ?
Thank you.
This is the link :
vue-loading-overlay
What tried :
In : node_modules\vue-loading-overlay\src\loaders\dots.vue
<template>
<a><img src="spinner.png"></a>
</template>
But still dots show up instead of my spinner.png.
You SHOULD NEVER modify node_modules, because subsequent instals will erase your edits. I have found from the docs that this component accepts loader icon through default slot. Reference.
default : Replace the animated icon with yours
So just pass your image through default slot in your template.
<loading><img src="spinner.png"></loading>
Notice: provide valid path to your image.
Related
I am looking for a solution to disable the labels in the input components so that they never render.
The label attribute of the TextInput component can take either a string or a boolean value: label={false}.
In the component this is SelectInput, this also works, but there will be an error in the console, therefore, you can do this: label=""
I have a popup in a leaflet map that can be closed by clicking on the 'x' in its upper right corner. How do I make the click event not propagate to the map itself?
I've tried using preventPropagate() in many places and forms, but none of them seem to work.
My latest code looks like that:
<div class="actions" #click="stopPropagation($event)">
(...)
stopPropagation(e) {
e.stopPropagation()
}
The above div (.actions) is the popup's main div.
I have also tried calling the function at a click in the popup's component tag in the parent component, but the result was the same, meaning clicking the 'x' closes the popup as expected but also results in a click event in the map that lies behind.
I use Vue and vue2-leaflet.
I appreciate any insight from you guys. Thanks!
UPDATE: actually, doesn't matter where in the popup the click happens, it always gets propagated to the map behind.
So, for reference, here's my solution:
<div class="actions" #click="someMethod($event)">
(...)
someMethod(e) {
(... some code)
return false
}
The command 'return false' is what solved my problem.
I tried using '#click.stop', but it gives me the '$event.stopPropagation() is not a function' error. The same happens if I run 'e.stopPropagation()' from inside the function.
The accepted answer didn't work for me so I wrapped my l-map in a div and applied the click.stop to that.
<div #click.stop.prevent.self="">
<l-map...>
</div>
It seems to me that the actual click event is parsed by the leaflet library rather than the Vue-compatible vue-2-leaflet, so the event that is received by the function doesn't have stopPropagation or preventDefault methods on the object. Thus, when Vue calls them with .stop or .prevent, the JS engine throws an error.
This is what I figured out for my issue dealing with event handling and stopping the propagation.
e.g.
someReference.on("click", (evt: L.LeafletEvent) => {
// You don't try to reference the event (evt) that is passed in
L.DomEvent.stopPropagation; // Just call this and it kills the propagation
// or you can call
// L.DomEvent.preventDefault(evt);
...
})
Could try an event modifier
Perhaps the stop modifier:
<div class="actions" #click.stop="closePopup">
I'm using one of Vuetify's material template for learning. Its navigation-drawer has an image on the background like so:
I've looked at the code and the navigation-drawer has a v-imgcomponent that gives it the image:
<template>
<v-navigation-drawer
id="app-drawer"
v-model="inputValue"
app
dark
floating
persistent
mobile-break-point="991"
width="260">
<v-img :src="image" height="100%">
However what I cannot understand is that the src property is binded to an image attribute which I was expecting to find in the data function but its not there. The only other reference image is being applied is in the computed properties like so:
computed: {
...mapState("app", ["image", "color"]),
How is the image being applied or where the actual source for the image is located?
This is the vuetify material dashboard example app. You will find the image in teh vuex store.
More specifically - src/store/modules/app/state.js
How to setup a slider at the bottom-right corner in Prestashop like the picture? This slider consists of different picture. When I click an image, relative information will be shown on the right corner.
Simple you need to build a custom module. Please ref to prestashop.com document how you build custom module.
On that module hook the theme file yourmodulefile.tpl at FOOTER
Then make a wrap Div, set a class "footer_slide_wrap"
On your module CSS mark that class as bellow
.footer_slide_wrap{
display :fixed;
bottom : 0;
right :0;
width : 30px;
height:auto;
}
Now your DIV with class footer_slide_wrap will be place on that place.
now insert an UL and put your all button under li in this UL.
You can make the div .footer_slide_wrap mouse over slidable. For that you need to make a default div with class .opener and make the wrap hide.
need to create a javascript function to hide / show the DIV on mouse over.
you need to register a custom hook inside your slider module's php file, eg: "footerslider" then add the hook to your fooeter.tpl file which is located at "themes/yourthemes/footer.tpl" by placing this code {hook h="fooerslider"}
Basically, you should create small module that have hook.
Prestashop has many hooks related with your layout but if they are not suitable for you, you can create your own hook.
If you want to call your custom hook, simply put this code where you want to show.
{hook h="displayYourHookName"}
You need to install your custom hook in your install() function of your custom module.
// use this code in your install() function
$this->registerHook('displayYourHookName');
// your custom hook
public function hookDisplayYourHookName()
{
// code ...
// your html template that you want to show
return $this->display(__FILE__, 'yourTemplate.tpl');
}
if you are using default hook, prestashop will call automatically.
I hope this will help, cheers :)
I'm having trouble understanding how data-binding works now.
On my index page I've got an object (obtained as JSON from a RESTful service), which works just fine when applied to a custom element like:
<main-menu class="tiles-container ofvertical flex layout horizontal start"
menuitems="{{menuitems}}">
</main-menu>
var maintemplate = document.querySelector('#fulltemplate');
maintemplate.menuitems = JSON.parse(data.GetDesktopResult);
This works as expected, and when I load my page with different users, main-menu changes as it should to show each user's desktop configuration. (This menuitems object reflects position and size of each desktop module for each user).
Now, users used to be able to change their configuration on the go, and on Polymer 0.5 I had no problem with that, just changed my maintemplate.menuitems object and that was that, it was reflected on the template instantly.
As I migrated to Polymer 1.0, I realized changes on an object wouldn't change anything visible, it's much more complicated than this, but just doing this doesn't work:
<paper-icon-button id="iconback" icon="favorite" onClick="testing()"></paper-icon-button>
function testing(){
debugger;
maintemplate = document.querySelector('#fulltemplate');
maintemplate.menuitems[0][0].ModuleSize = 'smamodule';
}
The object changes but nothing happens on the screen until I save it to DB and reload the page.
Am I missing something /Do I need to do something else on Polymer 1.0 to have elements update when I change an object passed as a property?
Before you ask, I've got those properties setted as notify: true, it was the inly thing I found different, but still doesn't work
Thanks for reading!
EDIT:
this is the code menuitems is used in:
<template is="dom-repeat" items="{{menuitems}}" as="poscol">
<div class="positioncolum horizontal layout wrap flex">
<template is="dom-repeat" items="{{poscol}}" as="mitem" index-as="j">
<main-menu-item class$="{{setitemclass(mitem)}}"
mitem="{{mitem}}"
index="{{mitem.TotalOrder}}"
on-click="itemclick"
id$="{{setitemid(index, j)}}">
</main-menu-item>
</template>
</div>
</template>
main-menu-item is just set of divs which changes size and color based on this object properties
You need to use the mutation helper functions if you want to modify elements inside an object or array otherwise dom-repeat won't be notified about the changes (check the docs):
function testing(){
debugger;
maintemplate = document.querySelector('#fulltemplate');
this.set('maintemplate.0.0.ModuleSize', 'smamodule');
}