32.vue 看muse源码学习笔记

// vue插件开发详解，这里主要是使用js来完成创建渲染模板的功能
// 导航右菜单
var Menu = {
  name: 'mu-menu',
  props: {
    popoverClass: [String, Object, Array],
    cover: Popover.props.cover,
    placement: Popover.props.placement,
    space: Popover.props.space,
    open: Boolean,
    openOnHover: Boolean
  },
  data: function data() {
    return {
      active: this.open,
      trigger: null
    };
  },
  mounted: function mounted() {
    // this.$el 获取当前组建的容器节点
    this.trigger = this.$el;
  },

  methods: {
    handleMouseEnter: function handleMouseEnter() {
      var _this = this;

      if (!this.openOnHover) return;
      if (this.timer) clearTimeout(this.timer);
      this.timer = setTimeout(function () {
        return _this.show();
      }, 100);
    },
    handleMouseLeave: function handleMouseLeave() {
      var _this2 = this;

      if (!this.openOnHover) return;
      if (this.timer) clearTimeout(this.timer);
      this.timer = setTimeout(function () {
        return _this2.hide();
      }, 100);
    },
    show: function show() {
      this.active = true;
      this.$emit('open');
    },
    hide: function hide() {
      this.active = false;
      this.$emit('close');
    },
    createPopover: function createPopover(h) {
      return h(Popover, {
        class: this.popoverClass,
        style: {
          'min-width': this.trigger ? this.trigger.offsetWidth + 'px' : ''
        },
        props: {
          cover: this.cover,
          placement: this.placement,
          open: this.active,
          space: this.space,
          trigger: this.trigger
        },
        on: {
          close: this.hide,
          mouseenter: this.handleMouseEnter,
          mouseleave: this.handleMouseLeave
        }
      }, this.$slots.content);
    }
  },
  // render函数在这里是替代template的作用，h代表createElement
  // createElement函数的作用是创建一个dom用于被render函数渲染
  render: function render(h) {
    var _this3 = this;

    // 1. 'div'  第一个参数主要用于提供dom的html内容，类型可以是字符串、对象或函数。
    // 比如”div”就是创建一个 <div>标签
    // 2. 第二个参数（类型是对象）主要用于设置这个dom的一些样式、属性、传的组件的参数、绑定事件之类
    // {
    //   staticClass: 'mu-menu',
    //   class: {
    //     'mu-menu__open': this.active
    //   }
    // }
    // 3.第三个参数（类型是数组，数组元素类型是VNode）主要用于说是该结点下有其他结点的话，就放在这里。
    // [h('div', {
    //   staticClass: 'mu-menu-activator',
    //   on: {
    //     click: function click() {
    //       return _this3.openOnHover ? null : _this3.active ? _this3.hide() : _this3.show();
    //     },
    //     mouseenter: this.handleMouseEnter,
    //     mouseleave: this.handleMouseLeave
    //   }
    // }, this.$slots.default), this.createPopover(h)]
    return h('div', {
      staticClass: 'mu-menu',
      class: {
        'mu-menu__open': this.active
      }
    }, [
      h('div',
        {
          staticClass: 'mu-menu-activator',
          on: {
            click: function click() {
              return _this3.openOnHover ? null : _this3.active ? _this3.hide() : _this3.show();
            },
            mouseenter: this.handleMouseEnter,
            mouseleave: this.handleMouseLeave
          }
        }, this.$slots.default), this.createPopover(h)]);
  },

  watch: {
    active: function active(val) {
      this.$emit('update:open', val);
    },
    open: function open(val) {
      this.active = val;
    }
  }
};
// 注册组件
Menu.install = function (Vue$$1) {
  Vue$$1.component(Menu.name, Menu);
};

学习：
https://blog.csdn.net/qq78827534/article/details/80792514