nchutchind / vue-outside-events Goto Github PK

After installing the library and starting the bundler (Parcel in this case) I get the following error:

/Users/breadadams/dev/coolproject/node_modules/vue-outside-events/dist/vue-outside-events.min.js:
Couldn't find preset "es2015" relative to directory "/Users/breadadams/dev/coolproject/node_modules/vue-outside-events"

Running yarn add babel-preset-es2015 --dev fixes this and allows me to use this (awesome lib.), however I don't really need this preset in the project (I'm using the now preffered babel-preset-env - http://babeljs.io/env).

Maybe you could switch over to use the env preset? Or include babel-preset-es2015 in the projects dev dependencies.

e.g.

<div :v-mouseup-outside="onMouseUp(col)"></div>

my code

<div v-click-outside="onClickOutside">
       <el-button type="danger" @click="remove">Del</el-button>
</div>
------
onClickOutside (event) {
     console.log('outside');
}

When I click button , onClickOutside method work too.
Should be don't work because button is it onClickOutside

I new to Vue and have some other things going on in the code (that works fine).

I removed header, body, html and content that is not needed in this example.

<div id="app">
    <div v-click-outside="onClickOutside">hello</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="http://localhost/domain.se/assets/js/outside-events.js"></script>
<script>
var app = new Vue({
    el: '#app',
    data: {
        active: false
    },
    method: {
        onClickOutside (e, el) {
            console.log('onClickOutside');
            console.log('click heard outside element:', el);
            console.log('element clicked:', e.target);
            console.log('event:', e);
        },
    },
    computed: {
        toggle: function() {
            return {
                active: this.active
            }
        }
    }
});
</script>

Error message

ReferenceError: onClickOutside is not defined

Do you spot what is wrong with this?

The version seems to be v2.5.16 (I use CDN so it could change)

Hello, just trying this library using a little example like this

    <div id="app">
        <button v-click-outside="onClickOutside" v-mouseout-outside="onMouseOutOutside">Test</button>
    </div>


 let app = new Vue({
            el: '#app',
            data: {
                hello: '',
            },
            methods: {
                onMouseOutOutside (e, el, extras) {
                    console.log('onMouseOutOutside ->', e, el, extras);
                },
                onClickOutside (e, el, extras) {
                    console.log('onClickOutside ->', e, el, extras);
                },
            },
            mounted () {
            }
        })

This code is affecting not only on button but on whole #app element, any idea why? thanks!

Hi there, thanks for this plugin. Super useful. I'm a complete Vue noob so please bear with me:

I'm getting Uncaught TypeError: Cannot read property 'target' of undefined when importing into a webpack project, as the event seems to not be defined in the handler function. I don't have any problems with your examples where you just include the JS file.

The events are all triggering properly, but I can't access the event information at all, either through the jQuery or the regular event handlers.

Do you have any tips? Thanks!
J

Pls see pull request #3

I have a page, and inside it there's a component that uses vue-outside-events. In this page i have some q-selects (from quasar). The problem is, when i remove the vue-outside-events from the component, the selects work perfectly, but when i put them back, the selects don't open.

And when i say remove, i mean remove the "Vue.use(vue-outside-events)"

I can't send you the code because i'm not allowed but i think that if you create a quasar project and use in the same page the q-select and the vue-outside-events, maybe you can see what i'm talking about.

Thank you.

Hi.
Firstly would say what it is awesome directive and very useful!
Thank you for contribution into vue community.

But could you please slightly improve this one.

1. Could you please process several directives on one node? (unbinding work incorrectly)

2. Could you please change processing "CustomEventOutside" directive with several event names.

Thank you!

I have a modal that I'm loading a form, that form has a "Edit" mode and in edit mode you can delete the item. Here is Chrome preforming the expected action:

However, in Firefox (Firefox Developer Edition 63.0b9) the modal seems to be clicked on before the element inside it:

  div.step.flex-row.align-items-center.justify-content-between(
    v-click-outside="focusLost"
    v-focus-outside="focusLost"
  )
    // content inside was removed

It seems that the select box is losing focus because of the click on the delete button, however, somehow the modal is gaining the focus (which is outside the div).

My temporary solution was to remove the v-focus-outside="focusLost" and it worked correctly in FF.