GregPeden / click-confirm

Convenient and elegant inline user confirmation of UI events.
https://sirlamer.github.io/click-confirm/
MIT License
27 stars 13 forks source link

How to import click-confirm? #1

Closed tychio closed 7 years ago

tychio commented 7 years ago

I just got this message "Unknown custom element: ", either I import it in vue file or index.js and use it by Vue.use.

        <click-confirm>
            <button type="button" class="close" @click="()=>{window.alert(123);}">
                <span aria-hidden="true">&times;</span>
            </button>
        </click-confirm>
GregPeden commented 7 years ago

I think this is more of a general VueJS thing than click-confirm specifically, however I'm not sure of the reason to enclose your JavaScript call in an arrow function, I think it's unnecessary. Try this (not tested):

        <click-confirm>
            <button type="button" class="close" @click="window.alert(123)">
                <span aria-hidden="true">&times;</span>
            </button>
        </click-confirm>

For anything more complex, pull the code out in to a VueJS method and then call the method with @click.

Also, avoid ES6 syntax in environments which aren't going to be compiled and poly-filled, as some browsers in use don't support it. https://kangax.github.io/compat-table/es6/

Also remember you'll need some other button content to compliment the aria-hidden, for the case where it actually is hidden, as otherwise the screen reader won't know how to describe the button. An "aria-label" property on the button element would be one way to address it.

tychio commented 7 years ago

got it, thx