support Poptip & clickoutside

support Poptip & clickoutside

.eslintignore

@@ -0,0 +1 @@
+src/directives

README.md

@@ -46,7 +46,7 @@
 - [x] Timeline
 - [x] Tag
 - [x] Tooltip
-- [ ] Poptip
+- [x] Poptip
 - [x] Carousel
 - [x] Tree
 - [ ] Menu

src/components/base/popper.js

@@ -40,7 +40,7 @@ export default {
     data () {
         return {
             visible: this.value
-        }
+        };
     },
     watch: {
         value: {

src/components/poptip/poptip.vue

@@ -6,13 +6,14 @@
         v-clickoutside="handleClose">
         <div
             :class="[prefixCls + '-rel']"
-            v-el:reference
+            ref="reference"
             @click="handleClick"
             @mousedown="handleFocus(false)"
             @mouseup="handleBlur(false)">
             <slot></slot>
         </div>
-        <div :class="[prefixCls + '-popper']" :style="styles" transition="fade" v-el:popper v-show="visible">
+        <transition name="fade">
+            <div :class="[prefixCls + '-popper']" :style="styles" ref="popper" v-show="visible">
                 <div :class="[prefixCls + '-content']">
                     <div :class="[prefixCls + '-arrow']"></div>
                     <div :class="[prefixCls + '-inner']" v-if="confirm">
@@ -21,18 +22,19 @@
                             <div :class="[prefixCls + '-body-message']"><slot name="title">{{ title }}</slot></div>
                         </div>
                         <div :class="[prefixCls + '-footer']">
-                        <i-button type="text" size="small" @click="cancel">{{ cancelText }}</i-button>
+                            <i-button type="text" size="small" @click.native="cancel">{{ cancelText }}</i-button>
-                        <i-button type="primary" size="small" @click="ok">{{ okText }}</i-button>
+                            <i-button type="primary" size="small" @click.native="ok">{{ okText }}</i-button>
                         </div>
                     </div>
                     <div :class="[prefixCls + '-inner']" v-if="!confirm">
-                    <div :class="[prefixCls + '-title']" v-if="showTitle" v-el:title><slot name="title"><div :class="[prefixCls + '-title-inner']">{{ title }}</div></slot></div>
+                        <div :class="[prefixCls + '-title']" v-if="showTitle" ref="title"><slot name="title"><div :class="[prefixCls + '-title-inner']">{{ title }}</div></slot></div>
                         <div :class="[prefixCls + '-body']">
                             <div :class="[prefixCls + '-body-content']"><slot name="content"><div :class="[prefixCls + '-body-content-inner']">{{ content }}</div></slot></div>
                         </div>
                     </div>
                 </div>
             </div>
+        </transition>
     </div>
 </template>
 <script>
@@ -45,6 +47,7 @@
     const prefixCls = 'ivu-poptip';
 
     export default {
+        name: 'Poptip',
         mixins: [Popper],
         directives: { clickoutside },
         components: { iButton },
@@ -167,8 +170,8 @@
                 this.$emit('on-ok');
             },
             getInputChildren () {
-                const $input = this.$els.reference.querySelectorAll('input');
+                const $input = this.$refs.reference.querySelectorAll('input');
-                const $textarea = this.$els.reference.querySelectorAll('textarea');
+                const $textarea = this.$refs.reference.querySelectorAll('textarea');
                 let $children = null;
 
                 if ($input.length) {
@@ -180,9 +183,10 @@
                 return $children;
             }
         },
-        compiled () {
+        mounted () {
             if (!this.confirm) {
-                this.showTitle = this.$els.title.innerHTML != `<div class="${prefixCls}-title-inner"></div>`;
+//                this.showTitle = this.$refs.title.innerHTML != `<div class="${prefixCls}-title-inner"></div>`;
+                this.showTitle = this.$slots.title !== undefined;
             }
             // if trigger and children is input or textarea,listen focus & blur event
             if (this.trigger === 'focus') {

src/components/tooltip/tooltip.vue

@@ -20,6 +20,7 @@
     const prefixCls = 'ivu-tooltip';
 
     export default {
+        name: 'Tooltip',
         mixins: [Popper],
         props: {
             placement: {

src/directives/clickoutside.js

@@ -1,19 +1,21 @@
 export default {
-    bind () {
+    bind (el, binding, vnode) {
-        this.documentHandler = (e) => {
+        function documentHandler (e) {
-            if (this.el.contains(e.target)) {
+            if (el.contains(e.target)) {
                 return false;
             }
-            if (this.expression) {
+            if (binding.expression) {
-                this.vm[this.expression]();
+                binding.value(e);
             }
-        };
+        }
-        document.addEventListener('click', this.documentHandler);
+        el.__vueClickOutside__ = documentHandler;
+        document.addEventListener('click', documentHandler);
     },
     update () {
 
     },
-    unbind () {
+    unbind (el, binding) {
-        document.removeEventListener('click', this.documentHandler);
+        document.removeEventListener('click', el.__vueClickOutside__);
+        delete el.__vueClickOutside__;
     }
 };

src/index.js

@@ -25,7 +25,7 @@ import InputNumber from './components/input-number';
 // import Modal from './components/modal';
 // import Notice from './components/notice';
 // import Page from './components/page';
-// import Poptip from './components/poptip';
+import Poptip from './components/poptip';
 import Progress from './components/progress';
 import Radio from './components/radio';
 import Rate from './components/rate';
@@ -87,7 +87,7 @@ const iview = {
     // OptionGroup,
     // Page,
     Panel: Collapse.Panel,
-    // Poptip,
+    Poptip,
     Progress,
     Radio,
     RadioGroup: Radio.Group,

test/app.vue

@@ -36,6 +36,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <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="/poptip">Poptip</router-link></li>
                 <li><router-link to="/slider">Slider</router-link></li>
             </ul>
         </nav>

test/main.js

@@ -109,6 +109,10 @@ const router = new VueRouter({
             path: '/tooltip',
             component: require('./routers/tooltip.vue')
         },
+        {
+            path: '/poptip',
+            component: require('./routers/poptip.vue')
+        },
         {
             path: '/slider',
             component: require('./routers/slider.vue')

test/routers/card.vue

@@ -12,7 +12,7 @@
             <li v-for="item in movieList">
                 <a :href="item.url" target="_blank">{{ item.name }}</a>
                 <span>
-                    <Icon type="ios-star" v-for="n in 4"></Icon><Icon type="ios-star" v-if="item.rate >= 9.5"></Icon><Icon type="ios-star-half" v-else></Icon>
+                    <!--<Icon type="ios-star" v-for="n in 4"></Icon><Icon type="ios-star" v-if="item.rate >= 9.5"></Icon><Icon type="ios-star-half" v-else></Icon>-->
                     {{ item.rate }}
                 </span>
             </li>

test/routers/poptip.vue

@@ -1,22 +1,32 @@
 <template>
-    <div style="margin: 100px">
+    <div style="margin: 100px;">
-        <Poptip trigger="hover" placement="bottom" title="提示标题" content="提示内容">
+        <Poptip
-            <i-button>hover 激活</i-button>
+                confirm
+                title="您确认删除这条内容吗？"
+                @on-ok="ok"
+                @on-cancel="cancel">
+            <Button>删除</Button>
         </Poptip>
-        <Poptip title="提示标题" placement="bottom" content="提示内容">
+        <Poptip
-            <i-button>click 激活</i-button>
+                confirm
-        </Poptip>
+                title="Are you sure delete this task?"
-        <Poptip trigger="focus" title="提示标题" content="提示内容">
+                @on-ok="ok"
-            <i-input type="textarea"></i-input>
+                @on-cancel="cancel"
-            <!--<i-button>focus 激活</i-button>-->
+                ok-text="yes"
-        </Poptip>
+                cancel-text="no">
-        <Poptip trigger="focus" placement="bottom" title="提示标题" content="提示内容">
+            <Button>国际化</Button>
-            <i-input></i-input>
         </Poptip>
     </div>
 </template>
 <script>
     export default {
-
+        methods: {
+            ok () {
+                this.$Message.info('点击了确定');
+            },
+            cancel () {
+                this.$Message.info('点击了取消');
+            }
+        }
     }
 </script>