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>

src/index.js

@@ -29,7 +29,7 @@ import InputNumber from './components/input-number';
 import Progress from './components/progress';
 import Radio from './components/radio';
 import Rate from './components/rate';
-// import Slider from './components/slider';
+import Slider from './components/slider';
 // import Spin from './components/spin';
 import Steps from './components/steps';
 import Switch from './components/switch';
@@ -38,7 +38,7 @@ import Tabs from './components/tabs';
 import Tag from './components/tag';
 import Timeline from './components/timeline';
 // import TimePicker from './components/time-picker';
-// import Tooltip from './components/tooltip';
+import Tooltip from './components/tooltip';
 // import Transfer from './components/transfer';
 import Tree from './components/tree';
 import Upload from './components/upload';
@@ -94,7 +94,7 @@ const iview = {
     Rate,
     Row,
     // iSelect: Select,
-    // Slider,
+    Slider,
     // Spin,
     Step: Steps.Step,
     Steps,
@@ -106,7 +106,7 @@ const iview = {
     Timeline,
     TimelineItem: Timeline.Item,
     // TimePicker,
-    // Tooltip,
+    Tooltip,
     // Transfer,
     Tree,
     Upload