mint-ui的navbar导航栏的填坑

谁践踏了优雅 2022-04-15 04:26 248阅读 0赞

* mint-ui的navbar导航栏的填坑
 * 用官方的demo直接导入到项目中有问题
 
 1、引入
 
 import { Navbar, TabItem } from 'mint-ui';  //导航栏
 
 import { TabContainer, TabContainerItem } from 'mint-ui';//Item
 
 import { Cell } from 'mint-ui';
 
 Vue.component(Navbar.name, Navbar);
 
 Vue.component(TabItem.name, TabItem);
 
 Vue.component(TabContainer.name, TabContainer);
 
 Vue.component(TabContainerItem.name, TabContainerItem);
 
 Vue.component(Cell.name, Cell);
 
 2、使用
 
 <table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> <pre style="margin-left:0cm;">&lt;!-- navbar --&gt;
 
 &lt;mt-navbar class="page-part" v-model="selected"&gt;
 
 &nbsp; &lt;mt-tab-item id="1"&gt;选项一&lt;/mt-tab-item&gt;
 
 &nbsp; &lt;mt-tab-item id="2"&gt;选项二&lt;/mt-tab-item&gt;
 
 &nbsp; &lt;mt-tab-item id="3"&gt;选项三&lt;/mt-tab-item&gt;
 
 &lt;/mt-navbar&gt;
 
 
 
 &lt;!-- tabcontainer --&gt;
 
 &lt;mt-tab-container v-model="selected"&gt;
 
 &nbsp; &lt;mt-tab-container-item id="1"&gt;
 
 &nbsp;&nbsp;&nbsp; &lt;mt-cell v-for="n in 10" :title="'内容 ' + n" /&gt;
 
 &nbsp; &lt;/mt-tab-container-item&gt;
 
 &nbsp; &lt;mt-tab-container-item id="2"&gt;
 
 &nbsp;&nbsp;&nbsp; &lt;mt-cell v-for="n in 4" :title="'测试 ' + n" /&gt;
 
 &nbsp; &lt;/mt-tab-container-item&gt;
 
 &nbsp; &lt;mt-tab-container-item id="3"&gt;
 
 &nbsp;&nbsp;&nbsp; &lt;mt-cell v-for="n in 6" :title="'选项 ' + n" /&gt;
 
 &nbsp; &lt;/mt-tab-container-item&gt;
 
 &lt;/mt-tab-container&gt;</pre> </td> 
 </tr> 
 </tbody> 
 </table>
 
  
 
  
 
 问题一：没有默认点击页面
 
 初始化参数：selected
 
 <table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> <pre style="margin-left:0cm;">data(){
 
 &nbsp; return {
 
 &nbsp;&nbsp;&nbsp; selected:'1'
 
 &nbsp; }
 
 }</pre> </td> 
 </tr> 
 </tbody> 
 </table>
 
  
 
 问题二：没有默认点击选中的导航条
 
 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMDAxMDYx_size_16_color_FFFFFF_t_70][]
 
 检查
 
 ![20181121153612208.png][]
 
 发现，多添加了margin-bottom.去掉即可
 
 <table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> <pre style="margin-left:0cm;">.is-selected
 
 &nbsp; z-index 1</pre> </td> 
 </tr> 
 </tbody> 
 </table>
 
  
 
 这个时候就可以了
 
 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMDAxMDYx_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMDAxMDYx_size_16_color_FFFFFF_t_70]: /images/20220415/0121c8ea70014c12a24e19d736450668.png
[20181121153612208.png]: /images/20220415/602484a0c9c24a57a5d77f6ae4bf1a73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMDAxMDYx_size_16_color_FFFFFF_t_70 1]: /images/20220415/a195ce847a414599a6ac36e760dcf016.png