zcfan / vue-ladda

vue wrapper for https://github.com/hakimel/Ladda

vue-ladda

A vue wrapper for https://github.com/hakimel/Ladda .

Demo

Demo source code

Installation

Direct Download / CDN

https://unpkg.com/vue-ladda/dist/vue-ladda.js

<script src="https://unpkg.com/vue-ladda"></script>

Then you can use it in this way:

<vue-ladda ...>...</vue-ladda>

NPM

npm install vue-ladda

import VueLadda from 'vue-ladda'

// or import the vue single file component, if you set vue-loader, sass-loader and babel properly.
import VueLadda from 'vue-ladda/src/vue-ladda.vue'

// then register it globally
Vue.component('vue-ladda', VueLadda)

// or locally
var Child = {
  template: '<vue-ladda>Click Me!</vue-ladda>'
}
new Vue({
  // ...
  components: {
    // <my-component> will only be available in parent's template
    'vue-ladda': VueLadda
  }
})

How to use

• Use default slot to give button label: (Default label is "Submit")

  <vue-ladda>Confirm</vue-ladda>

• Use buttonClass prop to specify your own CSS classes: (Default is "ladda-class") ie. you can use Bootstrap button classes

  <vue-ladda button-class="btn btn-primary">Yes!</vue-ladda>

• Use data-style prop to specify animation:

  <vue-ladda data-style="expand-left|contract|zoom-in|slide-left">
    ...
  </vue-ladda>

  Visit http://lab.hakim.se/ladda/ to get a full options of data-style.

• Use loading prop to control button status:

  <vue-ladda loading="true|false">...</vue-ladda>

• Use progress prop to control the ladda built-in progress bar. (0 to 1)

  <vue-ladda :progress="0-1">...</vue-ladda>

vue-ladda's Issues

@click event not available?

Just wondering why @click event does nothing. Isn't this event available for ladda-btn?

<ladda-btn
      type="button"
      :loading="saving"
      data-style="zoom-out"
      class="btn btn-primary"
      @click="save()">Guardar
</ladda-btn>

Received malformed response from registry for undefined

Happens when I run yarn add vue-ladda and it shows the error below

The registry may be down. info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

:disabled not working on loading

Hi!

I'm facing an issue when loading the page, the :disabled attribute doesnt take the value of the computed property I'm passing it.

Any idea how to fix it?

Thanks!

Failed to mount component: template or render function not defined.

Getting this when using inside a simple template

Disable button after loading does not work

We have a problem where a state change will not be correctly reflected after a state change.
https://jsfiddle.net/gvc3ryo1/7/

Changing the loading property overrides changes on the disabled property.
I am not aware of a workaround

I suspect calling the stop method clashes with the property change
https://github.com/hakimel/Ladda/blob/1f4586f7a1f2043b3d027c8bf471d39d489da1b8/js/ladda.js#L103