Blame view

components/tooltip/tooltip.vue 1.82 KB
dce3e753   梁灏   add Tooltip compo...
1
2
3
4
5
  <template>
      <div :class="[`${prefixCls}`]" @mouseenter="handleShowPopper" @mouseleave="handleClosePopper">
          <div :class="[`${prefixCls}-rel`]" v-el:reference>
              <slot></slot>
          </div>
7570318b   梁灏   fixed Tooltip pla...
6
          <div :class="[`${prefixCls}-popper`]" transition="fade" v-el:popper v-show="!disabled && showPopper">
dce3e753   梁灏   add Tooltip compo...
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
              <div :class="[`${prefixCls}-content`]">
                  <div :class="[`${prefixCls}-arrow`]"></div>
                  <div :class="[`${prefixCls}-inner`]"><slot name="content">{{ content }}</slot></div>
              </div>
          </div>
      </div>
  </template>
  <script>
      import Popper from '../base/popper';
      import { oneOf } from '../../utils/assist';
  
      const prefixCls = 'ivu-tooltip';
  
      export default {
          mixins: [Popper],
          props: {
              placement: {
                  validator (value) {
                      return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']);
                  },
                  default: 'bottom'
              },
              content: {
                  type: [String, Number],
                  default: ''
              },
              delay: {
                  type: Number,
                  default: 0
              },
              disabled: {
                  type: Boolean,
                  default: false
              }
          },
          data () {
              return {
                  prefixCls: prefixCls
              }
          },
dce3e753   梁灏   add Tooltip compo...
47
48
49
50
51
52
53
54
55
56
57
58
59
          methods: {
              handleShowPopper() {
                  this.timeout = setTimeout(() => {
                      this.showPopper = true;
                  }, this.delay);
              },
              handleClosePopper() {
                  clearTimeout(this.timeout);
                  this.showPopper = false;
              }
          }
      }
  </script>