I have a custom component which is being used application wide. But, in some place I want to show tooltip on hover on this component, according to vuetify docs this should work but it doesn't because <custom-component /> is not a native component.
And to have this functionality for native component a .native modifier is to be used.
Example: #click.native="someMethod"
How can I do that to show v-tooltip.
I have tried wrapping <custom-component /> in a div but it isn't working.
Below is sample code to get the gist.
<v-tooltip>
<template v-slot:activator="{ on }">
<custom-component v-on="on" />
</template>
<span>Tooltip text</span>
</v-tooltip>
custom-component should forward events from an element with v-on="$listeners"
https://v2.vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
I have tried wrapping <custom-component /> in a div but it isn't working
If you do this then the events need to be bound to the div instead:
<div v-on="on">
<custom-component />
</div>
Related
Using Vue 3 I am trying to call the handleViewAuditClick method when someone clicks the span.
I have added #click="handleViewAuditClick" event to the span text but clicking the text does not call the method.
If I change it so the text is wrapped in a div instead that works. Although I have no idea why that works. Using a div is also not a good solution for me because it changes the text to be multi-lined which I don't want.
So how do I call the handleViewAuditClick when clicking the span text?
<template>
<v-alert-banner design="positive">
New audit is ready.
<span #click="handleViewAuditClick">
Click here to view.
</span>
</v-alert-banner>
</template>
<script setup>
import VAlertBanner from 'src/components/VAlertBanner.vue';
const handleViewAuditClick = () => {
console.log('clicked');
};
</script>
And this is what the child v-alert-banner component looks like:
<template>
<q-banner dense rounded :class="classValue" class="full-width">
<template #avatar>
<q-icon :name="iconNameValue" size="sm" />
</template>
<slot></slot>
</q-banner>
</template>
I want to reactively call a custom bootstrap popover component based on which svg the user is hovering over throughout the page. It is called by:
<template>
<popover v-if="node != null">
<template #content>
Reached
</template>
<template #caller>
{{node}}
</template>
</popover>
</template>
However, {{node}} is returning "[object SVGGElement]" rather than the expected html object.
If I use {{node.outerHTML}} it returns a string literal: "svg id="test"></svg"
Any suggestions to have it return as an html object? For example:
...
<template #caller>
<svg id="test"></svg>
</template>
...
The Svg is an SVGGElement. I suggest capturing the mouse mouseover event to set the Popover position.
How to change the icon and color of the v-file-input component in Vuetify ?
For v-text-field and other component, the slot approach works, but for this component I can not get it work:
<div id="app">
<v-app id="inspire">
<v-file-input show-size label="File input">
<template v-slot:prepend>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-icon v-on="on" color="yellow lighten-3">
notes
</v-icon>
</template>
</v-tooltip>
</template>
</v-file-input>
</v-app>
</div>
Codepen.
Because it doesn't have prepend slot. You can change icon with prepend-icon prop but not the color. You can go to Vuetify Github and make a feature request.
In the meanwhile, you can also use following little hack (works only because you using MDI icons with CSS/webfont)
In your css file:
.mdi-myFileIcon::before {
content: "\F39A";
color: blue;
}
<v-file-input show-size label="File input" prepend-icon="mdi-myFileIcon" />
The v-file-input doesn't utilize the same slots as the v-text-field, so unfortunately it's actually not possible at the moment, to set the icon the way you're trying.
The options you have to change the color by changing the color of the whole component. And for the icon, you can only change it by using the prepend-icon prop.
But this would be an actual feature request to post on the Github of Vuetify, would be great to actually achieve what you want for everyone.
talents. I want to create beautiful button for vue. But I have a problem. I want to pass class attribute to child from parent component easily.
Parent component is like this:
<!-- parent component -->
<template>
<custom-element class="wanted-class">
<span slot="custom-body">
Some Effects or text
</span>
</custom-element>
</template>
and "custom-element" component is
<template>
<div id="custom-element">
Some elements or text
<slot name="custom-body">
Some default text
</slot>
</div>
</template>
<script>
export defatult{ ...
I really want the root element in child ( $("#custom-element") for jQuery expression) to have "wanted-class" from parent. Is it possible? or it's too easy?
Let's say I'm developing an enhanced popper.js for Vue and I'm about to give it some additional functionality. This is how the very (child) component looks like:
<popper>
<div :is="tag" class="popper">
{{ content }}
</div>
<button class="btn btn-primary" slot="reference">
Reference Element
</button>
</popper>
As you can see, for it to work it requires defining reference element right beneath the ".popper" div with a slot="reference" attribute.
Question:
How to turn my enhanced-popper component into a re-usable entity, aka be able to pass slotted data indirectly - from
<enhanced-popper> //referenced element// </enhanced-popper> so that it has the slot="reference" attribute inside the child (popper.js-based) component?
What did not work:
Employing slots and having the attribute in a component passed in by the parent component does not yield desired results, as it does not get rendered at all.
<popper>
<div :is="tag" class="popper">
{{ content }}
</div>
<slot></slot>
</popper>
To ensure having the attribute out there I also tried to replace said button in the child component with a named slot inside a slot and go like this in my enhanced-popper:
<slot name="reference">
<slot></slot>
</slot>
That way the first slotted component has the attribute - and it almost works, but since there are two "slot-layers" (no idea how to call it), the referenced component is not the first one as a child, and popper gets mis-positioned.
Cheers,
Paco