Menu

菜单组件 / Menus组件

说明

注意：menu是全局的组件，应该在App.vue中定义，而不是在业务文件中。menu组件和nav组件应该是平级，放在最外层。 该组件用于在Vue.prototype.$menu上共享方法，可以用this.$menu来访问menu组件

关于事件

Menus组件的事件是在$root中传播的, 切记

如何引入

// 引入
import { Menu } from 'vimo'
// 安装
Vue.component(Menu.name, Menu)
// 或者
export default{
  components: {
   Menu
 }
}
源码:

传入属性 / Props:

Name Type Attributes Default Description
id string 要打开menu的id，与open方法中的id对用应
side String <optional>
 left 从哪个方向打开 可选 left/right
type String <optional>
 overlay 用什么方式打开 可选 overlay/reveal

对外事件 / Fires:

用法 / Usages

<Menu id="menu" side="left" type="overlay"></Menu>

var vm = new Vue();
vm.$menu.menuIns: 当前缓存的menu实例对象
vm.$menu.currentMenuId: 当前开启的menuId
vm.$menu.open('menuId'): 打开id为menuId1的menu
vm.$menu.close(): 关闭打开的menu
vm.$menu.toggle('menuId'): 如果开启则关闭, 如果没开启的则打开id为menuId1的menu

方法 / Methods

(inner) close() → {Promise}

源码:
示例 / Example
new Vue({
   methods: {
    open: function () {
      this.$menu.close();
    }
  }
})

(inner) open(menuId) → {Promise}

源码:

如果在menu开启另一个menu, 则等到第一个的关闭promise之后再开启

示例 / Example
下面只弹出id为aaa的menu


html:
  <Menu id="aa"></Menu>
  <Menu id="bb"></Menu>
js:
new Vue({
   methods: {
    open: function () {
      this.$menu.open('aaa');
    }
  }
})
参数 / Parameters:
Name Type Description
menuId String

打开menu的id，与上面属性中的id对应

(inner) toggle(menuId)

源码:
示例 / Example
下面只对id为aaa的menu有效果

html:
  <Menu id="aa"></Menu>
  <Menu id="bb"></Menu>
js:
new Vue({
   methods: {
    open: function () {
      this.$menu.toggle('aaa');
    }
  }
})
参数 / Parameters:
Name Type Description
menuId String

打开menu的id

事件 / Events

onMenuClosed

源码:

menu关闭动画完毕,可通过$root.#on()去监听。

onMenuClosing

源码:

menu触发关闭事件,正在关闭...,可通过$root.$on()去监听。

onMenuOpen

源码:

menu开启事件, 传递menuId,可通过$root.$on()去监听。

示例 / Example
new Vue({
   methods: {
    open: function () {
      this.$menu.open('aaa');
      this.$root.$on("onMenuOpen", function () {
        //...
      })
    }
  }
})