vue v-nav指令属性列表

￡神魔★判官ぃ 2022-05-15 03:44 184阅读 0赞

v-nav指令属性列表

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>属性描述</th> 
   <th>类型</th> 
   <th>必选</th> 
   <th>默认</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>title</td> 
   <td>导航栏标题</td> 
   <td>String</td> 
   <td>No</td> 
   <td>空字符串</td> 
  </tr> 
  <tr> 
   <td>showBackButton</td> 
   <td>是否显示（左边的）返回按钮</td> 
   <td>Boolean</td> 
   <td>No</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>onBackButtonClick</td> 
   <td>返回按钮点击回调函数 默认调用history.go(-1)</td> 
   <td>Function</td> 
   <td>No</td> 
   <td>undefind</td> 
  </tr> 
  <tr> 
   <td>showMenuButton</td> 
   <td>是否显示（右边的）菜单按钮</td> 
   <td>Boolean</td> 
   <td>No</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>onMenuButtonClick</td> 
   <td>菜单按钮点击回调函数</td> 
   <td>Function</td> 
   <td>No</td> 
   <td>undefind</td> 
  </tr> 
  <tr> 
   <td>backButtonText</td> 
   <td>返回按钮文字（图标）</td> 
   <td>String</td> 
   <td>No</td> 
   <td>见备注</td> 
  </tr> 
  <tr> 
   <td>menuButtonText</td> 
   <td>菜单按钮文字（图标）</td> 
   <td>String</td> 
   <td>No</td> 
   <td>见备注</td> 
  </tr> 
 </tbody> 
</table>

html页面

js中需要写两个方法: onBackButtonClick 和 onMenuButtonClick , 分别对应返回按钮和菜单按钮两个事件,这里我用的是vue框架

var model={
            template: '#tem',
            data: function(){
                return data;
            },
            methods: { 
    　　　　　　  onMenuButtonClick:function(){
                   
                },
                onBackButtonClick:function(){
                   
                }
    　　　　}
    }

效果: 返回键和菜单键都是可以点的

![1217818-20180816192635822-1436427913.png][]

[1217818-20180816192635822-1436427913.png]: /images/20220515/ed135b17e9aa4c73bd99a8dbb0959020.png