Question

我想在浮动边框中显示所有表单和信息页面。我不想将浮动的sidebox html复制并粘贴到所有地方。所以我想创建一个组件，作为表单或信息页面的容器。这是表单的示例代码。

<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>

在上面的代码中，我使用vue-form-generator生成表单。 floating-sidebox元素对于所有表单和信息页面都是通用的。我想通过演示组件来抽象它。

我怎么能这样做Vue2？

Answer 1

定义一个包装所有＆＃34;浮动边框的组件＆＃34;组件。您可以访问＆＃34;浮动边框＆＃34;通过这个。$ children并使用他们的标题等作为导航占位符。由于$ children是一个数组，因此您可以轻松地使用和索引

表示当前可见的实体

...
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;
    }
}

然后，您可以在包装视图的模板中进行绑定

<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/

Vue2中的演示组件

1 个答案: