menu/index.js

  1. /**
  2.  * @component Menu
  3.  * @description
  4.  *
  5.  * ## 菜单组件 / Menus组件
  6.  *
  7.  * ### 说明
  8.  *
  9.  * 注意：menu是全局的组件，应该在App.vue中定义，而不是在业务文件中。menu组件和nav组件应该是平级，放在最外层。 该组件用于在Vue.prototype.$menu上共享方法，可以用this.$menu来访问menu组件
  10.  *
  11.  * ### 关于事件
  12.  *
  13.  * Menus组件的事件是在$root中传播的, 切记
  14.  *
  15.  * ### 如何引入
  16.  * ```
  17.  * // 引入
  18.  * import { Menu } from 'vimo'
  19.  * // 安装
  20.  * Vue.component(Menu.name, Menu)
  21.  * // 或者
  22.  * export default{
  23.    *   components: {
  24.    *    Menu
  25.    *  }
  26.    * }
  27.  * ```
  28.  *
  29.  * @props  {string}  id               - 要打开menu的id，与open方法中的id对用应
  30.  * @props  {String}  [side=left]      - 从哪个方向打开  可选 left/right
  31.  * @props  {String}  [type=overlay]   - 用什么方式打开  可选 overlay/reveal
  32.  *
  33.  * @fires component:Menu#onMenuOpen
  34.  * @fires component:Menu#onMenuClosing
  35.  * @fires component:Menu#onMenuClosed
  36.  *
  37.  * @demo #/
  38.  *
  39.  * @usage
  40.  *
  41.  * <Menu id="menu" side="left" type="overlay"></Menu>
  42.  *
  43.  * var vm = new Vue();
  44.  * vm.$menu.menuIns: 当前缓存的menu实例对象
  45.  * vm.$menu.currentMenuId: 当前开启的menuId
  46.  * vm.$menu.open('menuId'): 打开id为menuId1的menu
  47.  * vm.$menu.close(): 关闭打开的menu
  48.  * vm.$menu.toggle('menuId'): 如果开启则关闭, 如果没开启的则打开id为menuId1的menu
  49.  *
  50.  *
  51.  *
  52.  *
  53.  */
  55. // 事件
  57. /**
  58.  * @event component:Menu#onMenuOpen
  59.  * @description menu开启事件, 传递menuId,可通过$root.$on()去监听。
  60.  * @example
  61.  * new Vue({
  62.    *    methods: {
  63.    *     open: function () {
  64.    *       this.$menu.open('aaa');
  65.    *       this.$events.$on("onMenuOpen", function () {
  66.    *         //...
  67.    *       })
  68.    *     }
  69.    *   }
  70.    * })
  71.  *
  72.  */
  74. /**
  75.  * @event component:Menu#onMenuClosing
  76.  * @description menu触发关闭事件,正在关闭...,可通过$root.$on()去监听。
  77.  */
  79. /**
  80.  * @event component:Menu#onMenuClosed
  81.  * @description menu关闭动画完毕,可通过$root.#on()去监听。
  82.  */
  84. /**
  85.  * menu.vue: Menu组件的模板文件, 方法只用于维护自身状态
  86.  * menu.js:  组件全局安装及实例注册, 用于在Vue.prototype.$menu上共享方法
  87.  *
  88.  *
  89.  * 页面文件这样使用:
  90.  * this.$menu.menuIns: 当前缓存的menu实例对象
  91.  * this.$menu.currentMenuId: 当前开启的menuId
  92.  * this.$menu.open('menuId1'): 打开id为menuId1的menu
  93.  * this.$menu.close(): 关闭打开的menu
  94.  * this.$menu.toggle('menuId1'): 如果开启则关闭, 如果没开启的则打开 menuId1
  95.  *
  96.  * 对于menu模板的传参, 参考props
  97.  *
  98.  * 对外事件:
  99.  * onMenuOpen: menu开启事件, 传递menuId
  100.  * onMenuClosing: menu触发关闭事件,正在关闭...
  101.  * onMenuClosed: menu关闭动画完毕
  102.  *
  103.  * */
  105. // function
  106. /**
  107.  * @function open
  108.  * @description
  109.  * 如果在menu开启另一个menu, 则等到第一个的关闭promise之后再开启
  110.  * @param {String} menuId   - 打开menu的id，与上面属性中的id对应
  111.  * @return {Promise}
  112.  * @example
  113.  * 下面只弹出id为aaa的menu
  114.  *
  115.  *
  116.  * html:
  117.  *   <Menu id="aa"></Menu>
  118.  *   <Menu id="bb"></Menu>
  119.  * js:
  120.  * new Vue({
  121.     *    methods: {
  122.     *     open: function () {
  123.     *       this.$menu.open('aaa');
  124.     *     }
  125.     *   }
  126.     * })
  127.  */
  128. /**
  129.  * @function close
  130.  * @return {Promise}
  131.  * @example
  132.  *
  133.  * new Vue({
  134.     *    methods: {
  135.     *     open: function () {
  136.     *       this.$menu.close();
  137.     *     }
  138.     *   }
  139.     * })
  140.  */
  141. /**
  142.  * @function toggle
  143.  * @param {String} menuId   - 打开menu的id
  144.  * @example
  145.  *  下面只对id为aaa的menu有效果
  146.  *
  147.  * html:
  148.  *   <Menu id="aa"></Menu>
  149.  *   <Menu id="bb"></Menu>
  150.  * js:
  151.  * new Vue({
  152. *    methods: {
  153. *     open: function () {
  154. *       this.$menu.toggle('aaa');
  155. *     }
  156. *   }
  157. * })
  158. */
  159. export { default } from './menu.vue'