Just want to prevent one of my buefy button to be focused when i click on it :
Code of the button :
<b-button class="button-rounded" type="is-success" icon-right="film" rounded />
Not focused :
Focused :
In my use case other design i add on the button are getting cleared by the focus, i want to prevent any focus when clicking on the button. I'm using VueJS 2 with Buefy (Bulma)
Any idea ?
thanks in advance
Does
<b-button tabindex="-1" class="button-rounded" type="is-success" icon-right="film" rounded />
do the trick?
Related
I am using Vuejs 2 and the v-tooltip npm package. I would like to display the v-tooltip only when a button is disabled. When it is not disabled, I don't want to display the v-tooltip at all.
<button
v-tooltip="message"
:disabled="true">
CLICK ME!
</button>
Let say you have a variable disabled in your state, it can be a condition as well a > b, then you can conditionally render the buttons.
<button
v-if="disabled"
v-tooltip="message"
:disabled="true">
CLICK ME!
</button>
<button
v-else
>
CLICK ME!
</button>
Or you can even try this
<button
v-tooltip="disabled ? message : ''"
:disabled="true">
CLICK ME!
</button>
maybe it will work
I made modal component using v-show options live below.
<registerModal v-show="register.etcCompanyVisible" />
Thus, when register.etcCompanyVisible is true, this modal appears.
And this modal has some input like this.
<input type="text" v-model="etcCompanyName" placeholder="name" autofocus />
When this modal is opened at first time, the autofocus works well.
And then, this modal can be closed with cancel button by changing register.etcComapnyVisible to false.
<button class="btn secondary" v-on:click="etcCompanyVisibleClosed()">Cancel</button>
When I open modal again, the autofocus doesn't work. I think it needs some reset option for this modal, but I don't know how it can be done.
Could you give me some recommendation? Thank you so much for reading.
My understanding is that the autofocus attribute is only reliable on page load, so you need to handle the focus event yourself.
The easiest way to do this is to put a ref on your input.
<input ref="companyName" type="text" v-model="etcCompanyName" placeholder="name"/>
Then when you launch your modal, maybe you are using a button, call the focus on that $ref.
<template>
...
<button #click="focusInput">launch modal</button>
...
</template>
<script>
...
methods:{
foucusInput() {
this.$refs.companyName.focus();
}
}
Note that you could use the same method to dynamically focus inputs in a certain order. Here is a fiddle demonstrating that using button clicks but you could easily use this to move from one input to the next automatically after a certain condition is met.
I have a v-expansion-panel-header which contains a v-checkbox. If I click on the checkbox the checkbox does not check/uncheck. Instead the expansion panel opens/closes. How do I allow the checkbox to work and have the panel only open when the default icon that is supplied is clicked on?
I have tried using #click.stop and #click.native.stop, #click.capture, #change.stop etc on the v-checkbox, but it doesn't work.
<v-expansion-panels>
<v-expansion-panel>
<v-expansion-panel-header>
<v-checkbox v-model="checkbox" label="MyCB" #click.stop />
</v-expansion-panel-header>
<v-expansion-panel-content>
Lorem ipsum dolor.
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
The issue here is that the event is bubbling up from the checkbox to the expansion panel. What you need to do is, when the checkbox is being clicked, pass the event into a function, and cancel the event bubbling.
check: function(e) {
e.cancelBubble = true;
}
Check the working code here
Note that, in the example I had wrapped a v-flex around the v-checkbox. This is because the v-checkbox was spanning the whole width of the expansion panel and I think you still want the expansion to work when you click on places that are not close to the checkbox. You can probably find some other ways of preventing full width in CSS but this was just a quick and dirty way to demonstrate the prevent event bubbling solution.
How do I make this expansion-panel open content only on clicking icon?
Tried using readonly but it didn't help.
Thanks in advance!
https://vuetifyjs.com/en/components/expansion-panels#expansion-panel
You can put online the argument in all collapse like: expanded={!expanded}
and in the icon you put the onClick={toggle}
I was having the same problem and just found a solution for that.
You need to implement a custom button on the expansion panel, so it will accept custom events. You can achieve that using template and v-slot:
<v-expansion-panel #click.prevent="onClick()">
<v-expansion-panel-header>
...your expansion panel code here
<template v-slot:actions>
<v-btn icon #click.stop="onClick()">
<v-icon>mdi-filter-variant</v-icon>
</v-btn>
</template>
</v-expansion-panel-header>
</v-expansion-panel>
...and your onClick method would be like this:
onClick() {
/*this will toggle only by icon click. at the same time, will prevent toggle
by clicking on header. */
const curr = this.panel
this.panel = curr === undefined ? 0 : undefined
}
It may seem a little magical that the same function is toggling on icon click and preventing toggle on header click, but this happens because the custom icon button does not toggle itself, so we force that using the onClick method. On the other hand, the expansion panel header has its native property of toggling the panel. So when we click it, its value will automatically change and we need to change it back to what it was before the click.
To make the expansion-panel open only on clicking icon you can use css that disables all clicks on the header and only allows clicks on the icon:
<style>
.v-expansion-panel-header{
pointer-events: none;
}
.v-expansion-panel-header__icon{
pointer-events: All;
}
</style>
Keep in mind if you are using scoped style you have use >>>:
https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
Here is the template example, I added #click to provide btn like experience when user clicks on an icon, it's not necessary:
<template>
<v-expansion-panel>
<v-expansion-panel-header>
<template #actions>
<v-icon class="icon Icon Icon--32 icon-utility-arrows-carrot_down-32"
#click/>
</template>
</v-expansion-panel-header>
<v-expansion-panels >
<v-expansion-panel-content >
<!--content here-->
</v-expansion-panel-content>
</v-expansion-panels>
</v-expansion-panel>
</template>
test (e) {
e.preventDefault()
console.log('foo')
},
<v-expansion-panel>
<v-expansion-panel-content>
<div slot="header">
<v-btn icon flat #click="test($event)"><v-icon>add</v-icon></v-btn>
title
</div>
<contents />
</v-expansion-panel-content>
</v-expansion-panel>
This is v-expansion-panel with action button in it's header.
When I click action button, expansion panel is opened.
Can I have expansion panel doesn't open when I click the button?
By using #click.native.stop on v-btn your button click will work and your expansion panel will not open.
The simplest way is by using #click.stop=""
Sorry.
I didn't know stopPropagation method.