Vuetify, comment définir les accessoires par défaut

Question

J'ai commencé à utiliser Vuetify, mais je cherche un moyen de modifier les props par défaut de certains composants.

Y a-t-il un moyen de le faire ?

c'est-à-dire qu'au lieu de devoir constamment écrire :

<v-layout wrap></v-layout>

Puis-je faire en sorte que la propriété par défaut de la mise en page soit vraie ?

Answer 1

Quelque chose de ce genre, mais attention, si vous êtes novice en matière de vue.js, vous devrez faire quelques lectures :

document pertinent : vue mixin , vue s'étend

js

// some already existing component, you need to get it somehow
// most likely via `import <something-to-import>`
let theExternalComponent = {
  props: { wrap: { default: false, type: Boolean } },
  template: "<li>wrap:{{wrap}}</li>"
};
// this simulates the global registration
Vue.component("v-some-external-component", theExternalComponent);

// -- lets start --

// lets extend that component - and overwrite the default prop for wrap
let extendedExternalwithOtherDefaults = {
  extends: theExternalComponent,
  mixins: [{ props: { wrap: { default: true } } }],
};

var app = new Vue({
  el: "#app",
  components: { "v-my-customized-component": extendedExternalwithOtherDefaults }
});

html ( carlin en fait, mais cela n'a pas d'importance ici)

div(id="app")
  ul
    v-some-external-component

    v-some-external-component(wrap)

    v-my-customized-component
    // now defaults to wrap:true

    v-my-customized-component(:wrap="false") 
    // you can still set the wrap to false if required

sortie

wrap:false
wrap:true
wrap:true
wrap:false

codepen : https://codepen.io/anon/pen/MLxbEW