版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
财政类项目,有单据计算问题,vue中,数据模型联动满足了我们的要求,
recat没有用过,我猜测复杂化、需要类工厂生成的前端,也许用react更好,比如,动态生成类似excel表格这样的前端需求,用react,也许更好,只是我没有实践过这种做法。
考虑过bootstrap-vue、element-ui
最终选择了element-ui,这里bootstrap、bootstrap-vue有关问题记录一下,
bootstrap中,使用 .nav-tabs 类可以将导航转化为选项卡
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
tab导航三要素:
- ul class="nav nav-tabs"
- 每个<a>标签加上data-toggle="tab"
- 然后在每个选项对应的内容的上添加 .tab-pane类。
我们同事另外搞了个写法:
2个form,装一样的元素,
单位端、财政端是2个form,点击的时候,切换表单,有点另类的写法。
不过,有时候点击不了,检查代码,略作修改,不晓得有效否,如果还没有效果,则按正规课本写法重新写一道。
//document.getElementById('myform').style.display = 'inherit';
document.getElementById('myform').style.display = 'block';
bootstrap-vue中,b-nav使用 tabs
<b-nav tabs>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<b-nav-item>Another Link</b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>
bootsrap中 .collapse 类用于指定一个折叠元素 (实例中的 <div>);
<button data-toggle="collapse" data-target="#demo">折叠</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
使用 data-parent 属性来确保所有的折叠元素在指定的父元素下,这样就能实现在一个折叠选项显示时其他选项就隐藏。
未完,待续......