Vue2中的演示组件

Question

I want to display all my forms and info pages in floating sidebox. I don't want to copy and paste the floating sidebox html to all the places. So I want to create a component which acts as container to my forms or info pages. This is the sample code for form.

<div class="floating-sidebox">
  <div class="sidebox-header">
    <div class="sidebox-center">
      <h3 class="title">{{ title }}</h3>
    </div>
  </div>
  <div class="sidebox-content">
    <div class="sidebox-center">
      <!-- This is the actual content. Above container code is common for all forms. -->
      <vue-form-generator :schema="schema" :model="model" :options="{}"></vue-form-generator>
    </div>
  </div>
  <div class="floating-sidebox-close" @click="cancel"></div>
</div>
<div class="floating-sidebox-overlay"></div>

In above code, I uses vue-form-generator to generate the form. The floating-sidebox elements are common for all forms and info pages. I want to abstract it by Presentational component.

How could I do it Vue2 ?

Answer 1

Define a component that wraps all your "floating-sidebox" components. You can access the "floating-sideboxes" via this.$children and use their title etc. as navigation placeholder. Since $children is an array you can easily represent the currently visible entity with and index

...
data: function() {
   sideboxes: [],
   currentIndex: null
},
...
mounted: function() {
   this.sideboxes = this.$children;
   this.currentIndex= this.$children.length > 0 ? 0 : null;
},
...
computed: {
    current: function() {
       return this.currentIndex ? this.sideboxes[this.currentIndex] : null;
    }
}

You can then bind in the template of the wrapping view

<ul>
    <li v-for="(sidebox, index) in sideboxes" @click="currentIndex = index"><!-- bind to prop like title here --></li>
</ul>

<div>
   <!-- binding against current -->
</div>

JSfiddle with component https://jsfiddle.net/ptk5ostr/3/