I'm trying to create a custom directive to show a menu when an element is clicked. But you know using addEventListener directly is different from setting v-on:click on the element. Built-in directives tend to include more preprocessing.
So I want to use built-in directives in a custom directive. The documentation has no relevant usage, any ideas?
example:
<div v-menu="options" />
will equivalent to
<div v-on:click.right.self.prevent="menuFunction(options)" />
Related
The documentation is quite clear on how to create a custom directive using app.directive() the "old way", but that does not take into account the composition API way of doing things.
What I expect is something like:
import MyDirective from "#/directives/MyDirective.vue" inside a component.
Use the directive in the component's template like <div my-directive></div>.
Preferably without having to add boilerplate like registering the directive in main.ts or anything of the sort.
However, I can't find any clear example or docs page describing this. Is this at all possible? How should I do it? Please include an example of the directive's definition itself.
What part of sling adds the wrapping div and CSS classes when we do a sling include
When my component does a sling include
<sling:include path="/content/www/mysite/mycontent"/>
Translates to following in the markup
<div class="globalnavigationbar_ globalNavigationBar parbase">
<!-- start component markup -->
<nav class="globalnavbar hidden-xs hidden-sm">
<div>Component content</div>
</nav>
<!-- end component markup -->
</div>
I am interested in understanding what code in sling framework adds the wrapping div when doing a sling:include
<div class="globalnavigationbar_ globalNavigationBar parbase">
Tried to lookup[1] and follow the trail without success
[1] https://github.com/apache/sling-org-apache-sling-scripting-jsp-taglib/blob/master/src/main/java/org/apache/sling/scripting/jsp/taglib/IncludeTagHandler.java
The reason for trying to figure this out is trying to replace reference components with Apache SSI using Sling SDI.
Unfortunately, most of our current styles rely on those css classes and when using SDI the wrapping divs are missing.
Redoing our css classes is one option, trying to figure out alternatives if any
I don't think sling adds those tags. It is AEM's WCM which would do it. I do know that there is an IncludeOptions class which lets you override the decoration tag.
There are multiple ways to tell AEM to avoid decorating your components as detailed in this article. That being said, please be cautious with removing your decoration tags in author instance as you might have issues with getting your edit overlays working properly especially if you have components that have floats defined in the CSS.
In vue, I have
<button v-bind:class="['mdc-tab', {'mdc-tab--active' : index===tabs.currentTab}]"></button>
however, this binds it to the variables tabs.currentTab. However the mdc framework already switches tab classes, so I only need the above to render initially. Something like using v-once. However v-once:class doesn't work. How can I do this?
Thanks
You should know that v-once does not expect an expression: vue directives v-once
So all you need to do is:
<button v-once v-bind:class="['mdc-tab', {'mdc-tab--active' : index===tabs.currentTab}]"></button>
I am suing https://github.com/DominikSerafin/vuebar directive in my project. Now depending on some var i want to use it in html or not.
Like this
<div v-bar>
//this div contains huge html like 1200 lines of code and doing
// v-if is not option since i will have to duplicate all of its content
</div>
So to sumarize:
<div v-bar v-if="somevar"></div> // is not and option bceuse that div contains 1200 of code
Is there any way that i can say something like:
<div some_var ? v-bar:''></div>
Or to make my directive that sort of inherits that v-bar and renders?
Actually you can do one thing. Use Directive Hook Arguments.
You can put your condition based on the hook arguments inside the directive's code. And you can make sure the those hook arguments are reactive so that it could change when you want it to.
Write you logic whether to do something or not for directive inside the directive's code depending upon the binding values.
Read this, please comment if you are not clear.
No, there is no way to apply directive with some condition.
But you can try to create and destroy custom scroll bar programatically, from docs:
Public methods.
You can access them from your component context: this.$vuebar.
Alternatively you can access them from your main Vue instance:
Vue.vuebar. Every method needs to have passed Vuebar scroll container
element as the first argument. You can do that easily using $refs.
initScrollbar(DOM Element, options)
getState(DOM Element)
refreshScrollbar(DOM Element, options)
destroyScrollbar(DOM Element)
Suppose I have a custom directive that fetches an array result from certain location , How could I possibly use v-repeat alongside my directive internally rather than separately calling v-repeat externally.
In Vue, you normally use directives (http://vuejs.org/guide/index.html#Directives) to modify the behavior of an existing DOM element. The behavior you are describing is more suited to a component (http://vuejs.org/guide/index.html#Components).
You would declare a component with a template attribute that either inline or via reference to a <script> style template would have markup that would include usage of v-repeat.