support Tooltip

support Tooltip

CHANGE.md

@@ -27,4 +27,5 @@ class 改为了 className
 ### Circle
 改名为 iCircle
 ### Tabs
-废弃 activeKey，改用 value，使用 v-model，key 更名为 name
+废弃 activeKey，改用 value，使用 v-model，key 更名为 name
+### popper.js 将 prop: visible 移至 data 里

README.md

@@ -45,7 +45,7 @@
 - [x] Collapse
 - [x] Timeline
 - [x] Tag
-- [ ] Tooltip
+- [x] Tooltip
 - [ ] Poptip
 - [x] Carousel
 - [x] Tree

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: {
+        // visible: {
-            type: Boolean,
+        //     type: Boolean,
-            default: false
+        //     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 popper = this.popper || this.$refs.popper;
-            const reference = this.reference || this.$els.reference;
+            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)">
+        <transition name="fade">
-            <div :class="[prefixCls + '-content']">
+            <div :class="[prefixCls + '-popper']" ref="popper" v-show="!disabled && (visible || always)">
-                <div :class="[prefixCls + '-arrow']"></div>
+                <div :class="[prefixCls + '-content']">
-                <div :class="[prefixCls + '-inner']"><slot name="content">{{ content }}</slot></div>
+                    <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

test/app.vue

@@ -35,6 +35,8 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <li><router-link to="/rate">Rate</router-link></li>
                 <li><router-link to="/circle">Circle</router-link></li>
                 <li><router-link to="/tabs">Tabs</router-link></li>
+                <li><router-link to="/tooltip">Tooltip</router-link></li>
+                <li><router-link to="/slider">Slider</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>

test/main.js

@@ -104,6 +104,14 @@ const router = new VueRouter({
         {
             path: '/tabs',
             component: require('./routers/tabs.vue')
+        },
+        {
+            path: '/tooltip',
+            component: require('./routers/tooltip.vue')
+        },
+        {
+            path: '/slider',
+            component: require('./routers/slider.vue')
         }
     ]
 });

test/routers/tooltip.vue

@@ -1,75 +1,10 @@
-<style scoped>
-    .top,.bottom{
-        text-align: center;
-    }
-    .center{
-        width: 300px;
-        margin: 10px auto;
-        overflow: hidden;
-    }
-    .center-left{
-        float: left;
-    }
-    .center-right{
-        float: right;
-    }
-</style>
 <template>
-    <div class="top">
+    <Tooltip placement="top" content="Tooltip 文字提示" :delay="1000">
-        <Tooltip content="Top Left 文字提示" placement="top-start" @on-popper-hide="hide">
+        <Button @click="disabled = true">延时1秒显示</Button>
-            <i-button>上左</i-button>
+    </Tooltip>
-        </Tooltip>
-        <Tooltip content="Top Center 文字提示" placement="top">
-            <i-button>上边</i-button>
-        </Tooltip>
-        <Tooltip content="Top Right 文字提示" placement="top-end">
-            <i-button>上右</i-button>
-        </Tooltip>
-    </div>
-    <div class="center">
-        <div class="center-left">
-            <Tooltip content="Left Top 文字提示" placement="left-start">
-                <i-button>左上</i-button>
-            </Tooltip><br><br>
-            <Tooltip content="Left Center 文字提示" placement="left">
-                <i-button>左边</i-button>
-            </Tooltip><br><br>
-            <Tooltip content="Left Bottom 文字提示" placement="left-end">
-                <i-button>左下</i-button>
-            </Tooltip>
-        </div>
-        <div class="center-right">
-            <Tooltip content="Right Top 文字提示" placement="right-start">
-                <i-button>右上</i-button>
-            </Tooltip><br><br>
-            <Tooltip content="Right Center 文字提示" placement="right">
-                <i-button>右边</i-button>
-            </Tooltip><br><br>
-            <Tooltip content="Right Bottom 文字提示" placement="right-end">
-                <i-button>右下</i-button>
-            </Tooltip>
-        </div>
-    </div>
-    <div class="bottom">
-        <Tooltip content="Bottom Left 文字提示" placement="bottom-start">
-            <i-button>下左</i-button>
-        </Tooltip>
-        <Tooltip content="Bottom Center 文字提示" placement="bottom">
-            <i-button>下边</i-button>
-        </Tooltip>
-        <Tooltip content="Bottom Right 文字提示" placement="bottom-end">
-            <i-button>下右</i-button>
-        </Tooltip>
-    </div>
 </template>
 <script>
-    import { Tooltip, iButton, Message } from 'iview';
     export default {
-        components: { Tooltip, iButton },
+
-        methods: {
-            hide () {
-                Message.info('hide')
-            }
-        }
     }
 </script>