Vue2中的演示组件

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

<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元素对于所有表单和信息页面都很常见。我想通过Presentational组件来抽象它。我可以怎么做Vue2？

来源

2017-03-17 Fizer Khan

我的模板绑定'使用'vue-router'并将上述表单组件作为外部布局的一部分。您的页面内容将被呈现在' – Phil

同意@Phil。我写了一个名为[** takahashi **]的简单幻灯片应用程序（https://github.com/myst729/takahashi），你可以看到我是如何通过vue-router实现的。 – Leo

@Phil谢谢。但就我而言，我无法将它作为单独的路由器。它是一条路线的一部分。 –

定义包装所有“浮动sidebox”组件的组件。您可以通过这个。$子项访问“浮动边框”，并将其标题等用作导航占位符。由于$孩子是一个数组，你可以很容易地表示与当前可见的实体和索引

... 
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与组件https://jsfiddle.net/ptk5ostr/3/

来源

2017-03-17 08:11:19

你是什么意思“定义包装所有你的”浮动sidebox“组件的组件？我还没有这个组件。我很困惑。你可以请分享jsfiddle吗？ –

我的意思是我说的。我知道你没有这个组件，这就是为什么如果可能的方法我已经抽样了三个。如果您为我们提供小提琴，我们可以轻松地进行更改。我不会在我自己的 –

上创建一个完整的小提琴。我会创建小提琴并与你分享。 –

Vue2中的演示组件

回答

相关问题