手写实现vue2下拉菜单dropdown组件实例

目录

• 概述
• 最终效果（动图没显示出来，请稍定会儿，可以先看后面）
• 实现原理
• 具体实现
• 目录结构
• emitter.js
• MyDropdown.vue
• MyDropdownMenu.vue
• MyDropdownItem.vue
• 总结

概述

一般后台项目结合分页组件用到这个dropdown组件，用来做显示分页条数，其他用到这个组件的地方倒不是很多，其实现思路和select组件有那么些相似,现记录下这个组件的实现。

最终效果（动图没显示出来，请稍定会儿，可以先看后面）

实现原理

这个组件和select组件记起相似，可以参考我之前的文章【手写vue2select下拉组件】,要做这个组件，需要注意以下几点：

组件分为两部分：

• 供我们点击的文字，按钮，超链接等等（当成插槽供用户提供）
• 下拉菜单项（支持边框，禁用等）

使用该组件应当提供的事件应该是点击item项，然后将对应的item的对应value暴露出来，供用户使用。

组件菜单项的显示隐藏需要过渡动画。

默认菜单项方向向下，当下方可视区的高度不足以容纳下拉菜单的高度的时候，自动让菜单方向向上。

具体实现

目录结构

emitter.js

这个在之前的组件实现过程中介绍过这个文件，主要是为了解决跨多层级父子组件之前数据通信的，本质上实现原理为发布订阅模式。

/**
 * @Description 由于涉及到跨组件之间通信，因此我们只有自己实现发布订阅的模式，来实现组件之间通信,灵感主要来源于element-ui组件库源码中跨层级父子组件通信方案，本质上也是发布订阅和$emit和$on
 * @param { String } componentName 组件名
 * @param { String } eventName 事件名
 * @param { argument } params 参数
 **/
// 广播通知事件
function _broadcast(componentName, eventName, params) {
  // 遍历当前组件的子组件
  this.$children.forEach(function (child) {
    // 取出componentName,组件options上面可以自己配置
    var name = child.$options.componentName;
    // 如果找到了需要通知的组件名，触发组件上面的$eimit方法，触发自定义事件
    if (name === componentName) {
      child.$emit.apply(child, [eventName].concat(params));
    } else {
      // 没找到，递归往下找
      _broadcast.apply(child, [componentName, eventName].concat([params]));
    }
  });
}
const emiiter = {
  methods: {
    // 派发事件（通知父组件）
    dispatch(componentName, eventName, params) {
      var parent = this.$parent || this.$root;
      var name = parent.$options.componentName;
      // 循环往上层父组件，知道知道组件名和需要触发的组件名相同即可，然后触发对应组件的事件
      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;
        if (parent) {
          name = parent.$options.componentName;
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    },
    // 广播事件（通知子组件）
    broadcast(componentName, eventName, params) {
      _broadcast.call(this, componentName, eventName, params);
    },
  },
};
export default emiiter;

MyDropdown.vue

主要暴露给用户使用的组件

MyDropdownMenu.vue

主要暴露给用户使用的组件，菜单列表组件

MyDropdownItem.vue

主要暴露给用户使用的组件，菜单列表项组件，组件内容很简单，主要就是展示item数据和绑定点击事件。

总结

类似组件库中的这种经常出现跨多层级组件通信，需要特殊处理，一般emitter.js文件里面的封装我们在开发中一般是用不到的，我们写组件经常也就父子组件之间，很少会跨祖孙级别，但是在组件库中，这种关系就很多，因此需要单独利用发布订阅来处理，这种模式用到实际项目里面也是很管用的。

以上就是手写实现vue2下拉菜单dropdown组件实例的详细内容，更多关于vue 下拉菜单dropdown的资料请关注脚本之家其它相关文章！