fix(tip): support multiple trigger types

Author: AngusFu

src/components/tip/index.md

@@ -123,30 +123,44 @@ layout: component
 
 通过 `trigger` 属性可以改变触发方式。可选值包括 `hover` `focus` `click`，默认值是 `hover`。
 
+一般来说，采用 `['hover', 'focus']` 即能满足多数使用 PC 端场景（使用鼠标操作，或使用 <kbd>tab</kbd> 键操作）。
 
 ```html
-<c-tip theme="light" position="top" trigger="hover">
-  <div slot="content">怨春不语，算只有殷勤画檐蛛网，尽日惹飞絮</div>
-  <c-button primary>hover (default)</c-button>
-</c-tip>
+<p>
+  <c-tip theme="light" position="top" trigger="hover">
+    <div slot="content">怨春不语，算只有殷勤画檐蛛网，尽日惹飞絮</div>
+    <div>hover</div>
+  </c-tip>
+</p>
 
-<c-tip theme="light" position="top" trigger="focus">
-  <div slot="content">怨春不语，算只有殷勤画檐蛛网，尽日惹飞絮</div>
-  <c-button primary>focus</c-button>
-</c-tip>
+<p>
+  <c-tip theme="light" position="top" trigger="focus">
+    <div slot="content">怨春不语，算只有殷勤画檐蛛网，尽日惹飞絮</div>
+    <a href="javascript:;">focus</span>
+  </c-tip>
+</p>
 
-<c-tip theme="light" position="top" trigger="click">
-  <div slot="content">怨春不语，算只有殷勤画檐蛛网，尽日惹飞絮</div>
-  <c-button primary>click</c-button>
-</c-tip>
+<p>
+  <c-tip theme="light" position="top" trigger="click">
+    <div slot="content">怨春不语，算只有殷勤画檐蛛网，尽日惹飞絮</div>
+    <div>click</div>
+  </c-tip>
+</p>
+
+<p>
+  <c-tip theme="light" position="top" :trigger="['hover', 'focus']">
+    <div slot="content">怨春不语，算只有殷勤画檐蛛网，尽日惹飞絮</div>
+    <a href="javascript;">hover or focus</a>
+  </c-tip>
+</p>
 ```
 
 ## API
 
 | 属性 | 类型  |  说明 | 默认值 |
 |-----|-------|------|-------|
 | theme | dark \| light | 主题 | dark |
-| trigger | hover \| click \| focus | 触发形式 | hover |
+| trigger | hover \| click \| focus | 触发形式，可以使用数组 | hover |
 | position | top \| right \| bottom \| left | 位置 | bottom |
 | disabled | Boolean | 是否禁用 | false |
 | content |  String | 提示文本 | |

src/components/tip/index.vue

@@ -66,7 +66,14 @@ export default {
 
   props: {
     theme: VueTypes.oneOf(['dark', 'light']).def('dark'),
-    trigger: VueTypes.oneOf(['hover', 'click', 'focus']).def('hover'),
+    trigger: {
+      type: [String, Array],
+      default: 'hover',
+      validator (val) {
+        const validTypes = ['hover', 'click', 'focus']
+        return [].concat(val).every(v => validTypes.includes(v))
+      }
+    },
     disabled: VueTypes.bool.def(false),
     content: VueTypes.string.def(''),
     maxWidth: VueTypes.string.def('300px'),
@@ -87,23 +94,36 @@ export default {
     arrowClass () {
       const position = OPPOSITE_DIRECTION[this.position]
       return `c-tip__arrow--${position}`
+    },
+    triggers () {
+      const { trigger } = this
+      const triggers = [].concat(trigger)
+      return triggers
     }
   },
 
   methods: {
     show ({ type = 'click' }) {
-      if (SHOW_MATCH_MAP[this.trigger] === type) {
-        this.clearTimeout()
-        this.visible = true
+      const { triggers } = this
+      for (let i = 0; i < triggers.length; i++) {
+        if (SHOW_MATCH_MAP[triggers[i]] === type) {
+          this.clearTimeout()
+          this.visible = true
+          break
+        }
       }
     },
 
     hide ({ type = 'click' } = {}) {
-      if (HIDE_MATCH_MAP[this.trigger] === type) {
-        this.clearTimeout()
-        this.tidOut = setTimeout(() => {
-          this.visible = false
-        }, this.hideDelay)
+      const { triggers } = this
+      for (let i = 0; i < triggers.length; i++) {
+        if (HIDE_MATCH_MAP[triggers[i]] === type) {
+          this.clearTimeout()
+          this.tidOut = setTimeout(() => {
+            this.visible = false
+          }, this.hideDelay)
+          break
+        }
       }
     },