biigpongsatorn / vue-element-loading

⏳ Loading inside a container or full screen for Vue.js
https://vue-element-loading.netlify.com/
MIT License
320 stars 31 forks source link

Set default config #22

Closed movepixels closed 5 years ago

movepixels commented 5 years ago

Is there a way when using as a component to set default config so you dont have to put it in every place the loader is used?

import Vue from 'vue'
import VueElementLoading from 'vue-element-loading'

const options = {
     spinner:"spinner",
     color:"#E91E63"
}

Vue.component('VueElementLoading', VueElementLoading)
biigpongsatorn commented 5 years ago

not sure, please try

Vue.component('VueElementLoading', {
  extends: VueElementLoading,
  props: {
     spinner:"spinner",
     color:"#E91E63"
  }
});
movepixels commented 5 years ago

Results in error stating:

Right-hand side of 'instanceof' is not an object
movepixels commented 5 years ago

SOLVED

Has to be in the correct format of props:

Vue.component('VueElementLoading', {
  extends: VueElementLoading,
  props: {
    size: {
      type: String,
      default: '128'
    },
    spinner: {
      type: String,
      default: 'spinner'
    },
    color: {
      type: String,
      default: '#9ea72e'
    },
    backgroundColor: {
      type: String,
      default: 'rgba(255, 255, 255, .5)'
    }
  }
})

If anyone come across this or if you want to add it to the docs. Beats having to set the same props everytime :)

Dave

biigpongsatorn commented 5 years ago

@movepixels Cool! Thank you for your suggestion. PR welcome if you want to contribute this path :)

movepixels commented 5 years ago

Hello,

Sure I will help out.

I need to take the day to look at what changed from 1.0.5 to now 1.1.1. I am using this in Nuxt app and in 1.0.5 I get no errors. Anything over 1.0.5 I get the “The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside

, or missing . Bailing hydration and performing full client-side render.” Error in console so something changed to break.

Off hand you know what major changes were made? I will go back and look all the same.

From: Pongsatorn [mailto:notifications@github.com] Sent: Sunday, July 14, 2019 12:01 PM To: biigpongsatorn/vue-element-loading vue-element-loading@noreply.github.com Cc: Dave Maharaj dave@movepixels.com; Mention mention@noreply.github.com Subject: Re: [biigpongsatorn/vue-element-loading] Set default config (#22)

@movepixels https://github.com/movepixels Cool! Thank you for your suggestion. PR welcome if you want to contribute this path :)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/biigpongsatorn/vue-element-loading/issues/22?email_source=notifications&email_token=AAOQU4KR5UNKGQFDEXWZIG3P7M2CPA5CNFSM4IC5MWB2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZ4GR6Q#issuecomment-511207674 , or mute the thread https://github.com/notifications/unsubscribe-auth/AAOQU4LRMG7OW23JXNEKZ73P7M2CPANCNFSM4IC5MWBQ . https://github.com/notifications/beacon/AAOQU4PPHZRZYGE5XLBM7KDP7M2CPA5CNFSM4IC5MWB2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZ4GR6Q.gif