Merge pull request #100 from QingWei-Li/feat/upgrade-tooltip

Tooltip: Add openDelay

examples/docs/tooltip.md

@@ -210,3 +210,5 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`，可以通过
 |  transition     |  定义渐变动画      | String             |  | `fade-in-linear` |
 |  visible-arrow   |  是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean |  | true |
 |  options        | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object            | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
+| openDelay | 延迟出现，单位毫秒 | Number | | 0 |
+

packages/tooltip/src/main.vue

@@ -1,8 +1,8 @@
 <template>
   <div
     class="el-tooltip"
-    @mouseenter="showPopper = true"
-    @mouseleave="showPopper = false">
+    @mouseenter="handleShowPopper"
+    @mouseleave="handleClosePopper">
     <div class="el-tooltip__rel" ref="reference">
       <slot></slot>
     </div>
@@ -28,6 +28,10 @@ export default {
   mixins: [Popper],
 
   props: {
+    openDelay: {
+      type: Number,
+      default: 0
+    },
     disabled: Boolean,
     effect: {
       type: String,
@@ -49,6 +53,19 @@ export default {
         };
       }
     }
+  },
+
+  methods: {
+    handleShowPopper() {
+      this.timeout = setTimeout(() => {
+        this.showPopper = true;
+      }, this.openDelay);
+    },
+
+    handleClosePopper() {
+      clearTimeout(this.timeout);
+      this.showPopper = false;
+    }
   }
 };
 </script>

src/index.js

@@ -7,6 +7,7 @@ import DropdownItem from '../packages/dropdown-item/index.js';
 import Menu from '../packages/menu/index.js';
 import Submenu from '../packages/submenu/index.js';
 import MenuItem from '../packages/menu-item/index.js';
+import MenuItemGroup from '../packages/menu-item-group/index.js';
 import Input from '../packages/input/index.js';
 import InputNumber from '../packages/input-number/index.js';
 import Radio from '../packages/radio/index.js';
@@ -65,6 +66,7 @@ const install = function(Vue) {
   Vue.component(Menu.name, Menu);
   Vue.component(Submenu.name, Submenu);
   Vue.component(MenuItem.name, MenuItem);
+  Vue.component(MenuItemGroup.name, MenuItemGroup);
   Vue.component(Input.name, Input);
   Vue.component(InputNumber.name, InputNumber);
   Vue.component(Radio.name, Radio);
@@ -134,6 +136,7 @@ module.exports = {
   Menu,
   Submenu,
   MenuItem,
+  MenuItemGroup,
   Input,
   InputNumber,
   Radio,