I am trying to create a Vue component that bounces when the mouse cursor hover over it. I am using the animate.css library and changing the component class with #mouseover then resetting it on #mouseout.
It is almost ok. The only issue occurs when the user stops the cursor near the border. Due to the animation behavior, the mouseover/mouseout events will be called repeatedly, causing the component to flick. I could minimize it using a timeout before resetting the class but the behavior is still uncertain sometimes.
Is there any elegant way (or Vue way) to solve it?
Here is my code:
Html:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>
<body>
<div id="app">
<h1>Hover the mouse near the border</h1>
<hr>
<button :class="classes"
#mouseover="hoverOver"
#mouseout="hoverOut"
>
IMMEDIATE
</button>
<br><br><br>
<button :class="classes"
#mouseover="hoverOver"
#mouseout="hoverOutTimeout"
>
WAIT JUST A BIT
</button>
</div>
</body>
Javascript:
new Vue({
el: "#app",
data: {
classes: []
},
methods: {
hoverOver: function() {
console.log('over');
this.classes = ['animated', 'bounceIn']
},
hoverOut: function() {
console.log('out');
this.classes = []
},
hoverOutTimeout: function() {
setTimeout(() => {
console.log('out');
this.classes = []
}, 1000);
},
}
})
https://jsfiddle.net/marcellorvalle/eywraw8t/477611/
Neat. Looks like as the button changes size during the animation, the mouse goes in and out of hover state because the edge is moving.
I added a div around each button, and attached the hover triggers to the divs instead of the buttons:
<body>
<div id="app">
<h1>Hover the mouse near the border</h1>
<hr>
<div #mouseover="hoverOver" #mouseout="hoverOut">
<button :class="classes">IMMEDIATE</button>
</div>
<br><br><br>
<div #mouseover="hoverOver" #mouseout="hoverOutTimeout">
<button :class="classes">WAIT JUST A BIT
</button>
</div>
</div>
</body>
https://jsfiddle.net/jmbldwn/kbswLpto/5/
Related
I'm using ElementUI with Vue.js.
What I want to do is to use el-date-picker and listen for the update of the input only when the picker's popper closes (so earlier updates when selecting date via mouse click / direct text edit or via keyboard arrow controls won't trigger my 'special' update) - is it easily achievable? I was thinking of using custom popper class but not sure how to listen for close event to detect it.
You can achieve what you want with the blur event : https://element.eleme.io/#/en-US/component/date-picker#events
Here is a Codepen if you want to play with it. And here is the code if you just want to run it :
var Main = {
methods: {
blur () {
console.log('hey')
}
},
data() {
return {
value1: ''
};
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
#import url("//unpkg.com/element-ui#2.8.2/lib/theme-chalk/index.css");
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui#2.8.2/lib/index.js"></script>
<div id="app">
<template>
<div class="block">
<span class="demonstration">Default</span>
<el-date-picker
v-model="value1"
type="date"
#blur="blur"
placeholder="Pick a day">
</el-date-picker>
</div>
</template>
</div>
So I have my outer default.vue layout in nuxt architecture. I'my trying to add #keyup.esc="test" to outer element of default.vue:
<template>
<div #keyup.esc="test">
<navigation></navigation>
<nuxt/>
<transition name="fade">
<overlay-modals v-if="showModalLogin || showModalRegister"></overlay-modals>
</transition>
<transition name="zoom">
<div class="modal__outer" v-if="showModalRegister || showModalLogin">
<modal-login v-if="showModalLogin"></modal-login>
<modal-register v-if="showModalRegister"></modal-register>
</div>
</transition>
</div>
</template>
methods: {
test() {
alert('come on...');
},
test method is never fired which makes me confused.
The keyup event will only be detected by the div when the div has focus, so you have to set tabindex to make it focusable, and you have to give it focus.
new Vue({
el: '#app',
methods: {
test() {
console.log("Come on");
}
},
mounted() {
this.$el.focus();
}
});
<script src="https://unpkg.com/vue#latest/dist/vue.js"></script>
<div id="app" #keyup.esc="test" tabindex="0">
Here is my div
</div>
if u look into documentation u will see that #keyup used in inputs. In your case - u are using this to div, and there is no focus on it so keyup will not possible. However u need to add some stuff to make it working. Please read this
I am using Vue-strap alert component with Vue.js. The alert box works fine, however, I am unable to auto close the alert box after specified duration. Here is the component code I am using.
<alert :show.sync="showAlert" placement="top" duration="3000" type="success" width="400px" dismissable>
<span class="icon-info-circled alert-icon-float-left"></span>
<strong>Success</strong>
<p>{{alertMessage}}</p>
</alert>
The alert box remains open and close on clicking the close (x) button. Here is a code pen that uses the alert component.
https://codepen.io/Taxali/pen/dKJpKY
Any suggestion, how to auto close the alert box after 3 seconds? Thanks.
According to source code, setTimeout(_, duration) is only set if show props is change.
So there is a workaround, you can toggle show from false to true in mounted methods, or you can use a button to toggle the alert.
Another way to setTimeout yourself in Vue component.
var vm = new Vue({
components: {
alert:VueStrap.alert,
},
el: "#app",
data: {
alertMessage:"Activity Saved Successfully.",
showAlert:false
},
mounted() {
this.showAlert = true
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-strap/1.1.40/vue-strap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div id="app">
<alert :show.sync="showAlert" placement="top" :duration="3000" type="success" width="400px" dismissable >
<span class="icon-info-circled alert-icon-float-left"></span>
<strong>Success</strong>
<p>{{alertMessage}}</p>
</alert>
</div>
My vue component like this :
<template>
<div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form>
...
<div class="modal-footer">
...
<button type="button" class="btn btn-success" #click="addPhoto">
Save
</button>
</div>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
...
methods: {
addPhoto() {
const data = { id_product: this.idProduct };
this.$store.dispatch('addImageProduct', data)
.then((response) => {
this.$parent.$options.methods.createImage(response)
});
},
}
}
</script>
If I click button addPhoto, it will call addPhoto method.
addPhoto method used to call ajax. After response of ajax, it will pass the response to createImage method in parent component
After run it, the modal not close. Should the modal close after click save button
How can I close the modal after call createImage method?
You cannot use Bootstrap and Vue together this way. Each wants to control the DOM, and they will step on each others' toes. To use them together, you need wrapper components so that Bootstrap can control the DOM inside the component and Vue can talk to the wrapper.
Fortunately, there is a project that has made wrapper components for Bootstrap widgets. It is Bootstrap-Vue. Its modal will automatically close when you press its ok button. I have turned their modal example into something that is vaguely like what you're trying to do.
new Vue({
el: '#app',
methods: {
clearName() {
this.name = '';
},
addPhoto(e) {
console.log("dispatch the request");
}
}
});
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap#next/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="//unpkg.com/babel-polyfill#latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/tether#latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div id="app">
<div>
<b-btn v-b-modal.modal1>Launch demo modal</b-btn>
<!-- Modal Component -->
<b-modal id="modal1" title="Whatever" ok-title="Save" #ok="addPhoto" #shown="clearName">
<form #submit.stop.prevent="submit">
Form stuff...
</form>
</b-modal>
</div>
</div>
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
if i understand what you want then, add this data-dismiss="modal" to whichever button you want to use for closing the modal.. suppose you have a button Upload Image on clicking which you want to upload the image as well as close the modal then add data-dismiss="modal" to the button property like i have shown above...
I use slidesJS in my homepage.Now I want to click a button to make it pause,but it seems that there is no pause option in slidesJS document.
SlidesJS document:
http://slidesjs.com/
HTML makeup
<!--slider start-->
<div id="slides">
<div class="slider">
<div class="slide"><img src="http://www.fotolovec.cz/foto/albums/Fauna/Ptaci/normal_Brhlik02.jpg" /></div>
<div class="slide"><img src="http://mw2.google.com/mw-panoramio/photos/medium/34484850.jpg" /></div>
</div>
<div id="navbar">
<a id="prev" href="#">Prev</a>
<a id="next" href="#">Next</a>
Pause
</div>
</div>
<!--slider end-->
JS:
<script type="text/javascript">
jQuery(function(){
$('#slides').slides({
preload: true,
preloadImage: 'loading.gif',
play: 2000,
pause: 2000,
hoverPause: true,
autoHeight: true,
effect:'slide',
container: 'slider'
});
});
</script>
function sliderPause(){
clearInterval($('#slides').data('interval'));
}``
In your jquery.slides.js file do a search for _this.stop(true);
It shows about 3-4 times, next & previous click.. and you will also see it showing for paginationLink.click
The problem i was having was the slider was stop sliding after click either previous, next or pagination. I needed the slider to restart.. so what i did was add a setTimeout to play()
_this.stop(true);
setTimeout(function ()
{ _this.play(true) }, 3000);