mint-ui Navbar
vue 2017-11-30 15:56:55

PS：

注意点：很多小伙伴在selected中的1给了int型，这里要注意类型，string型的

 

 

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.   <div class="page-navbar">  
  3.     <div class="page-title">Navbar</div>  
  4.     <mt-navbar class="page-part" v-model="selected">  
  5.       <mt-tab-item id="1">选项一</mt-tab-item>  
  6.       <mt-tab-item id="2">选项二</mt-tab-item>  
  7.       <mt-tab-item id="3">选项三</mt-tab-item>  
  8.     </mt-navbar>  
  9.   
  10.     <div>  
  11.       <mt-cell class="page-part" title="当前选中">{{ selected }}</mt-cell>  
  12.     </div>  
  13.   
  14.     <mt-tab-container v-model="selected">  
  15.       <mt-tab-container-item id="1">  
  16.         <mt-cell v-for="n in 10" :title="'内容 ' + n" />  
  17.       </mt-tab-container-item>  
  18.       <mt-tab-container-item id="2">  
  19.         <mt-cell v-for="n in 4" :title="'测试 ' + n" />  
  20.       </mt-tab-container-item>  
  21.       <mt-tab-container-item id="3">  
  22.         <mt-cell v-for="n in 6" :title="'选项 ' + n" />  
  23.       </mt-tab-container-item>  
  24.     </mt-tab-container>  
  25.   </div>  
  26. </template>  
  27.   
  28. <script>  
  29. export default {  
  30.   name: 'page-navbar',  
  31.   data() {  
  32.     return {  
  33.       selected: '1'  
  34.     };  
  35.   }  
  36. };  
  37. </script>  

 

API

navbar

参数 说明 类型 可选值 默认值
fixed 固定在页面顶部 Boolean   false
value 返回当前选中的 tab-item 的 id *    

tab-item

参数 说明 类型 可选值 默认值
id 选中后的返回值 *    

Slot

navbar

name 描述
- 内容

tab-item

name 描述
- 显示文字
icon icon 图标

本文来自于：http://www.yoyo88.cn/study/vue/244.html

上一篇 vue 绑定下拉框的事件
下一篇 上传图片
相关的文章
Powered by yoyo苏ICP备15045725号