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>
Related
I am using v-b-popover everywhere in my project(many pages).
I need to know whenever we click or hover on popover button on any page, then how can we know that trigger happened.
I wanted to know without writing any events on attributes of that element(popover).
Is there any way?
You can listen for events on $root, as each popover fires the same event on $root when shown.
this.$root.$on('bv::popover::show', bvEventObj => {
console.log('bvEventObj:', bvEventObj)
})
Reference: https://bootstrap-vue.org/docs/components/popover#listening-to-popover-changes-via-root-events
You can also listen for other events than bv::popover::show, like bv::popover::hide, or bv::popover::enabled.
You can see a full list here.
new Vue({
el: '#app',
created() {
// Listen for an event on the root.
this.$root.$on('bv::popover::show', () => {
console.log('Popover Opened')
})
}
})
<link href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.js"></script>
<div id="app">
<b-btn v-b-popover.hover.bottom="'Button 1'">Button 1</b-btn>
<b-btn v-b-popover.hover.bottom="'Button 2'">Button 2</b-btn>
<b-btn v-b-popover.hover.bottom="'Button 3'">Button 3</b-btn>
</div>
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>
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/
How can I disable an input box via clicking a button and toggling it using vuejs 2.0
You can bind disabled, see an example:
new Vue({
el: '#app',
data: {
isDisabled: false
}
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<input type="text" :disabled="isDisabled">
<button #click="isDisabled = !isDisabled">Click</button>
</div>
I'm trying to create a component, that can show/hide on click, similar to an accordion.
I have the following error and I don't know why:
[Vue warn]: Property or method "is_open" is not defined on the
instance but referenced during render. Make sure to declare reactive
data properties in the data option. (found in root instance)
<div id="app">
<div is="m-panel" v-show="is_open"></div>
<div is="m-panel" v-show="is_open"></div>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="comp_a.js" ></script>
<!--<script src="app.js" ></script>-->
</html>
Vue.component('m-panel', {
data: function() {
return {
is_open: true
}
},
template: '<p>Lorem Ipsum</p>'
})
new Vue({
el:'#app',
})
Your code seems a little confused, your is_open is in your component but you are trying to access it in the parent. You just need to make sure this logic is contained inside your component. The easiest way is to simply place an event on the relevant element in your component template:
<template>
<div>
<!-- Toggle when button is clicked-->
<button #click="is_open=!is_open">
Open Me!
</button>
<span v-show="is_open">
I'm Open!
</span>
</div>
</template>
Here's the JSFiddle: https://jsfiddle.net/ytw22k3w/
Because u used is_open property in '#app instance' but u didnt declare in it,u decladed in 'm-panel component' which has no relation with it.Try something like this can avoid it.
new Vue({
el:'#app',
data:{
is_open:''
}
})