support Tooltip

support Tooltip

src/components/base/popper.js

@@ -18,20 +18,28 @@ export default {
         offset: {
             default: 0
         },
-        value: Boolean,
+        value: {
+            type: Boolean,
+            default: false
+        },
         transition: String,
         options: {
             type: Object,
             default () {
                 return {
                     gpuAcceleration: false,
-                    boundariesElement: 'body'
+                    // boundariesElement: 'body'    // todo 暂时注释，发现在 vue 2 里方向暂时可以自动识别了，待验证
                 };
             }
         },
-        visible: {
-            type: Boolean,
-            default: false
+        // visible: {
+        //     type: Boolean,
+        //     default: false
+        // }
+    },
+    data () {
+        return {
+            visible: this.value
         }
     },
     watch: {
@@ -59,8 +67,8 @@ export default {
             }
 
             const options = this.options;
-            const popper = this.popper || this.$els.popper;
-            const reference = this.reference || this.$els.reference;
+            const popper = this.popper || this.$refs.popper;
+            const reference = this.reference || this.$refs.reference;
 
             if (!popper || !reference) return;
 

src/components/tooltip/tooltip.vue

@@ -1,14 +1,16 @@
 <template>
     <div :class="[prefixCls]" @mouseenter="handleShowPopper" @mouseleave="handleClosePopper">
-        <div :class="[prefixCls + '-rel']" v-el:reference>
+        <div :class="[prefixCls + '-rel']" ref="reference">
             <slot></slot>
         </div>
-        <div :class="[prefixCls + '-popper']" transition="fade" v-el:popper v-show="!disabled && (visible || always)">
-            <div :class="[prefixCls + '-content']">
-                <div :class="[prefixCls + '-arrow']"></div>
-                <div :class="[prefixCls + '-inner']"><slot name="content">{{ content }}</slot></div>
+        <transition name="fade">
+            <div :class="[prefixCls + '-popper']" ref="popper" v-show="!disabled && (visible || always)">
+                <div :class="[prefixCls + '-content']">
+                    <div :class="[prefixCls + '-arrow']"></div>
+                    <div :class="[prefixCls + '-inner']"><slot name="content">{{ content }}</slot></div>
+                </div>
             </div>
-        </div>
+        </transition>
     </div>
 </template>
 <script>