vue-infinite-loading icon indicating copy to clipboard operation
vue-infinite-loading copied to clipboard

[Feature] Specify component state by using a prop instead of a callback

Open SirAuron opened this issue 6 years ago • 1 comments

Hi @PeachScript !

First of all, thanks for this project! I've toyed with it for some time and it's a really nice component.

On to business. I've seen in this answer you provided here that there is already a programmatic way to invoke methods to reset the component or telling it that some event has been triggered.

My proposal is to also provide a prop on the component itself whose purpose is to provide the same functionalities as those shown in the the linked comment.

For example:

<infinite-loading :state='myState'></infinite-loading>

where myState must be a string whose permitted values are: loaded${loadId}, complete, reset, error.
The ${loadId} is used to allow multiple consecutive calls to loaded callbacks.

Inside the InfiniteLoading component, there will be a watcher on the prop:

prop: {
  state: {
    default: 'loaded',
    type: String,
  }
},
...
watch: {
  'state': function(newValue) {
    let val = newValue.indexOf('loaded') >= 0 ? 'loaded' : newValue ;
    switch(val) {
      'loaded':
        this.loaded();
        break;
      // other methods
      default:
        throw 'State not recognized!'
        break;
    }
  }
}

Tell me what you think about this proposal and keep up the good work.

SirAuron avatar Aug 19 '19 11:08 SirAuron

This is exactly what I need.

middle21 avatar Feb 03 '20 08:02 middle21